Javascript DOM Exercises

Focus: JS | Authors: Dylan H

These exercises are designed to get you familar with making changes to the DOM. You should open the file in your browser by copying the absolute file path of ex(1|2|3).html and pasting it into the top bar.

Exercise 1

For this exercise change ex1.js. Use javascript to change the following things on the html page

• Link the javascript into the html
• Add your name in the h2 element with id #name
• Make the text bigger and green
• Change the img src to show a photo of a cat
• Change the style of all of the squares so that they appear on the page

Exercise 2

For this exercise alter both ex2.js and ex2.html so that when button(x) is pressed it will fill in the center box with the corresponding html.

Bonus ⭐: Make it so that the text fills in when the mouse leave the button instead of the click event. What happens if you add another button?

Exercise 3

Complete the fetch code in ex3.js. Add the friendly advice from the API to the given box.

Bonus ⭐: Try using another api! You could also try to use an api that takes an input and combine that with a text input.