Skip to content

Exercises

Exercise 1

  • Copy/paste the folder Exercise1 from ClassesICT in your personal folder.
  • Open the file index.html in a browser.
  • In Notepad++, open the file main.js.
  • In main.js, using the .querySelector() method and the .innerHTML property, change the h1 title to Most popular TV show searches in 2016.
  • Use the .getElementById() method and the .innerHTML property to replace the content in the fourth item of the list to: Fourth element.
  • Style the background-color of the body to #F9ACB8 by using the .style property.

Exercise 2

  • Copy/paste the folder Exercise2 from ClassesICT in your personal folder.
  • Open the file index.html in a browser.
  • In Notepad++, open the file main.js.

Let's add a new li element:

  • Use the .createElement() to create a new li and save it in a variable called newDestination.
  • Assign to the element an id of oaxaca.
  • Assign to the element the text Oaxaca, Mexico.
  • Append the new element you created as the last child of the list with the ID more-destinations.
  • Scroll to the bottom of the page in the browser to see your new element.

Let’s now delete it:

  • Remove the element using the .removeChild() method and passing in the element with ID oaxaca.

Exercise 3

  • Copy/paste the folder Exercise3 from ClassesICT in your personal folder.
  • Open the file index.html in a browser.

  • In Notepad++, open the file main.js.

  • Modify the body of the turnButtonRed() function so that it modifies the button as follows:

    1. Assigns the .style.backgroundColor to red
    2. Assigns the style.color to white
    3. Modifies the .innerHTML to Red Button

  • Add interactivity to the button element by adding the function turnButtonRed() when the button is clicked.

Exercise 4

  • Copy/paste the folder Exercise4 from ClassesICT in your personal folder.
  • Open the file index.html in a browser.
  • In Notepad++, open the file main.js.
  • Access the .firstChild of the body and save it to a variable named first. Then modify first‘s .innerHTML to: I am the child!

Take a moment to note which element has now been modified.

  • Use the .parentNode property to access the parent element of the variable first and modify its .innerHTML to: I am the parent and my inner HTML has been replaced!

Take a moment to notice the change in the web page.