CS130: Spring 2020

Intro to the Web

CS130: Spring 2020

Lessons > Tutorial 4. Practice manipulating the DOM with JavaScript

Week 5: Tutorial

Download Tutorial Files Solutions

Please download the tutorial04 files and save them to your repo folder. Then, open the entire tutorial04 folder in Atom. To view how each of the projects should work upon completion, please see this screencast.

Part 1: Font Switcher

Open font-switcher/index.html in Atom, and note the HTML tags. Also note, right before the close of the body tag, the script tag that links to your JavaScript file:

<script src="js/index.js"></script>

Open font-switcher/js/index.js in Atom, and uncomment the section at the bottom by deleting the /* and */ symbols:

/*
document.querySelector(???).onclick = makeBigger;
document.querySelector(???).onclick = makeSmaller;
*/

Replace the ??? with the correct selector, so that your makeBigger function and makeSmaller function get attached to the correct DOM elements.

Finally, modify both the body of the makeBigger and makeSmaller functions so that they modify the font size of the div that is assigned the class of “content”.

Part 2: Theme Switcher

Repeat the same general process with theme-switcher, by:

  1. Opening theme-switcher/js/index.js, uncommenting the event handler code at the bottom, and replacing the ??? with the correct selectors, and
  2. Modifying the bodies of the defaultTheme, oceanTheme, and desertTheme functions so that the theme of the div tag with the class of “container” gets updated with the correct class. To see the themes, open the theme-switcher/css/style.css file and scroll to the bottom.

Part 3: Page Turner

Repeat the same general process with page-turner, by:

  1. Opening page-turner/js/index.js, uncommenting the event handler code at the bottom, and replacing the ??? with the correct selectors, and
  2. Modifying the bodies of the chapter1, chapter2, and chapter3 functions so that they modify the contents of the div that is assigned the class of “content.”

Turn in your files via GitHub

  1. Ensure that your tutorial04 folder is inside of your repo folder.
  2. Check the status of your repo:
    $ git status
    It should say that your tutorial04 files are “untracked”
  3. Add all of your tutorial04 files to the list of files that are tracked by the repo:
    $ git add tutorial04
  4. Check the status of your repo again:
    $ git status
    It should now say that you tutorial04 files are being tracked.
  5. Now, commit your new tutorial04 files to the repo:
    $ git commit -m "Adding my tutorial04 to the repo"
  6. Finally, “push” your files to GitHub:
    $ git push
  7. Paste a link to your GitHub repo and to your GitHub pages

Cheat Sheet

Selector Methods

Method Example
getElementById() document.getElementById(“my_element”)
querySelector() document.querySelector(“#my_element”)
document.querySelector(“p”)
document.querySelector(“.my-announcements”)
querySelectorAll() document.querySelectorAll(“p”)
getElementsByTagName() document.getElementsByTagName(“div”)
getElementsByClassName() document.getElementsByClassName(“.panel”)

Some examples of HTML attributes you can modify

Attribute Example
className document.querySelector(“div”).className = “panel”;
innerHTML document.querySelector(“div”).innerHTML = “hi”;
src (for images) document.getElementsByTagName(“div”)
href (for links) document.getElementsByClassName(“.panel”)

Some examples of style properties you can modify

Property Example
width document.querySelector(“div”).style.width = “200px”;
height document.querySelector(“div”).style.width = “200px”;
background-color document.querySelector(“div”).style.backgroundColor = “hotpink”;
border-width document.querySelector(“div”).style.borderWidth = “5px”;
padding document.querySelector(“div”).style.padding = “10px”;
display document.querySelector(“div”).style.display = “none”;