JavaScript JavaScript and the DOM Getting a Handle on the DOM Select a Page Element By Its ID

My extra credit solution ("Experiment with app" in Teacher's Notes)

My solution for the suggestions to play around with the app as stated at the end of the video and in the teacher's notes.

JavaScript:

const myHeading = document.getElementById('myHeading');

const colorTextInput = document.getElementById('colorTextInput');
const colorButton = document.getElementById('colorButton');
const colorResetButton = document.getElementById('colorResetButton');

const styleTextInput = document.getElementById('styleTextInput');
const styleButton = document.getElementById('styleButton');
const styleResetButton= document.getElementById('styleResetButton');

colorButton.addEventListener('click', () => {
  myHeading.style.color = colorTextInput.value;                           
});

colorResetButton.addEventListener('click', () => {
  myHeading.style.color = '#484848';                             
});

styleButton.addEventListener('click', () => {
  myHeading.style.backgroundColor = styleTextInput.value;                            
});

styleResetButton.addEventListener('click', () => {
  myHeading.style.backgroundColor = null;                                  
});

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading" >JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>
    <p>
      <input type="text" id="colorTextInput">
      <button id="colorButton">Set headline color</button>
      <button id="colorResetButton">Reset title color</button>
    </p>
    <p>
      <input type="text" id="styleTextInput">
      <button id="styleButton">Set headline style</button>
      <button id="styleResetButton">Reset title style</button>
    </p>
    <script src="app.js"></script>
  </body>
</html>

1 Answer

Eric McKibbin
Eric McKibbin
11,490 Points

Hi Jesse,

Good work extending the content from this video!

I don't have any feedback on your code itself, but I do have some UX feedback.

Your buttons refer to the same element as both "headline" and "title", this is a little confusing. It's always good to be consistent with terms so that the user of your app can learn what to expect from it.

The buttons for the second input box refer to "style" it wasn't clear at all to me that this meant background colour. I first tried typing in "italic", "heavy", and "underline" though even these were guesses as to what style might mean. Looking at the code made it clear that this was setting the background colour. Just as you should be clear and explicit in the naming of your functions and variables you should be clear and explicit in your user interface.

It's awesome that you actually did the extra credit stuff and even better that you posted your code to the forums for feedback.

Happy coding,

Eric

Thank you so much! Fixed for personal satisfaction and experience!!