Browser API Exercises

Getting Setup with the Practice Exercises

To get setup with these practice exercises:

  1. If you have not already downloaded the practice files, you can get them from github.com/zgordon/javascript-explained

  2. Open the folder "04-browser-api-exercises." It should have a "starter" folder and a "completed" folder.

  3. Open the "starter" directory in your code editor

  4. Open the "starter/index.html" in your web browser and open the console for testing

Practice Exercises with the Browser API

  1. Create a variable called container . For the value, get the div with an ID of "app" from the page. Log it to the console to test.

  2. Create a variable called firstHeader. Get the value of the first h1 on the page. Log it to the console to test.

  3. Create a variable called firstDiv. Get the value of the first div on the page. Log it to the console to test.

  4. Log out the HTML inside of container to the console.

  5. Log out the HTML inside of firstHeader to the console.

  6. Log out the text inside of firstHeader to the console.

  7. Log out the HTML inside of firstDiv to the console.

  8. Log out the text inside of firstDiv to the console.

  9. Create a variable called links that includes all of the links on the page

  10. Create a variable called linksArray that converts link to an array using Array.from(link)

  11. Map over the linksArray and log out the text of each link.

  12. Create a variable called menuLinks that selects all of the links inside of the menu and converts them to an array using Array.from(). Then logout all of the menu links to the console.

  13. Create a function called staticHeader() that returns the following string of HTML <h2>Static Header</h2>. Log out staticHeader() in the console to test.

  14. Add the static header inside of the <div id="app"></div> right before the closing of the div. Use insertAdjacentHTML().

  15. Create a function called header( title ) that takes a title as a parameter and then returns the following string with the title: <h2>TITLE</h2>. Log out header( `My Header` ) to test.

  16. Add the dynamic header inside of the <div id="app"></div> right before the closing of the div. Use insertAdjacentHTML().

  17. Create a new function called menuLink( text, link ) that takes two parameters: text and link. Have the function return the following markup: <li><a href="LINK">TEXT</a></li>. LogmenuLink( `Home`, `/#home` ) in the browser to test.

  18. Create an event handler function called logTitle( e ). Have the function prevent the default event behavior. Then have it log out the innerText of whatever was just interacted with.

  19. Map over the linksArray from before and attach logTitle as an event listener to each link when it is clicked on. Try clicking and checking the console to test.

  20. Create an event handler function called logLink( e ). Have the function prevent the default behavior and then log out the "href" value of whatever link was just interacted with.

  21. Map over the linksArray and attach logLInk as an event handler whenever someone clicks on a link. Click on the links on the page to test.

  22. Add an event listener to the container from Exercise #1. Have it call a new function called logMousePosition( e ) that prevents the default behavior and then logs out the e event object. To test, add the event listener and then move your mouse around the page. It should continue to log out the event object.

  23. Create a new variable called firstLink and select the first link on the page. Add the logMousePosition( e ) function as an event listener to the firstLink . To test, call the function then click on the first link on the page. It should log the event object.

  24. Create an event listener function called logParent( e ) that prevents default behavior and then logs out the parent of the element using e.target.parentNode. Attach the function to all of the paragraph tags so that it logs their parent when you mouseover a paragraph.

  25. Create an event listener function called toggleModal( e ) that is called whenever the "Open Modal" button is clicked. Inside the function create a variable named modal that gets assigned the div with an id of "modal" and a class of "hidden". Toggle the class of hidden so that the modal displays when you click on the button.

  26. Attach the toggleModal( e ) as an event listener on the close button inside the modal as well. Now, when you click the "Open Modal" button it opens the modal and when you click the "Close" button it closes the modal.

  27. Create a function called called modal() that returns markup for a custom modal of your own (see below). <div class="overlay"><div id="my-modal" class="modal"><button class="close">Close My Modal</button><h1>My Modal!</h1></div></div>

  28. Create an event listener called openMyModal( e ) that adds your modal() to the page when the "Open My Modal" button is clicked.

  29. Create an event listener called removeMyModel( e ) that removes the modal from the page when the "Close My Modal" button is clicked.

  30. Create two event listener functions: playVideo( e ) and stopVideo( e ) . Inside of each function, create a variable called video that selects the "video" tag on the page. Then have the functions start and stop the video using video.play() and video.stop(). Click on the Play and then Stop buttons to test.

What Now?

Hopefully you now feel comfortable selecting elements from the page using the DOM Browser API. Plus you should also feel comfortable creating markup of your own and adding it to the page.

Finally, it is very important that you can write "event listener" or "event handler" functions that run your own code when certain events take place in the browser.

The last topic we have to cover is how to get data into our app using the Fetch API. This will let us store our content in a database and access it with JavaScript when we need it.

‚Äč