CSCI 344: Fall 2024

Advanced Web Technology

CSCI 344: Fall 2024

UNCA Logo

Assignments > Tutorial 5: JavaScript: Event Handlers

Due on Mon, 09/23 @ 11:59PM. 6 Points.

Introduction

The goal of today’s tutorial is to:

  1. Help you practice using JavaScript to target and modify HTML elements in your DOM Tree.
  2. Continue practicing your CSS skills.
  3. Encourage you to keep thinking about improving the accessibility of your website.

Cheatsheet

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 = “<p>hi</p>”;
src (for images) document.querySelector(“.my_image”).src = “sponge_bob.png”;
href (for links) document.querySelector(“.my_link”).href = ‘https://www.wikipedia.org’;

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”;

Your Tasks

Download Tutorial 5

Please download the tutorial05.zip file, unzip it, and move the tutorials folder inside of your csci344/tutorials folder. Then complete the tasks:

1. Font Size Adjuster

Open font-switcher/index.html in VS Code, and note the HTML tags. Also note that within the header tag there is a script tag that links to your JavaScript file:

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

The keyword defer means that the script won’t run until your entire web page is loaded.

Open 01-font-switcher/index.html:

  1. Attach the makeBigger() event handler to the #bigger button.
  2. Attach the makeSmaller() event handler to the #smaller button.

Next, open 01-font-switcher/index.js and, modify the body of the makeBigger and makeSmaller functions so that they update the font size of the div.content element and the h1 element. There should be at least two statements within the body of each function (one to target and manipulate div.content, and one to target and manipulate h1). When you’re done, your web page should look like this:

2. Theme Switcher

Another way to make your site more accessible is to create a “high-contrast” stylesheet or CSS class. For this exercise, please do the following:

  1. Open 02-theme-switcher/index.js and attach a click event handler to each of the four of the buttons in the nav bar.
  2. Each event handler should modify the class of the body tag to match the theme of the button that was clicked (just like we did in class for Lecture 10).
    • The available theme classes are: ocean, desert and high-contrast. To see the themes, open the style.css file and scroll to the bottom.
  3. If the default button is clicked, just unset the class on the body tag.
  4. [Optional] If you have time, try creating your own theme in the ../style.css file and creating another button so that when you click on the new button, your theme shows up.

When you’re done, your web page should look like this:

In part 3, you will use JavaScript to create a method for people with dyslexia to more easily read your web page. This technique is based on this artice: Adding A Dyslexia-Friendly Mode To A Website. Please complete the following tasks:

  1. In style.css, create a new class called .dyslexia-mode.

  2. Following the recommendations from the Smashing Magazine article above, ensure that your class does the following:

    • Adjust the letter and word spacing to the recommended settings
    • Disables ligatures
    • Modify the line spacing
    • Modify either the font weight (to be bolder) or the color (to be darker)
    • Make the font-size bigger
    • Narrow the line width (lines that are too long in the horizontal direction are hard to read)
  3. When you’re done, create a button and add the needed functionality to enabled the user to toggle the “Dyslexia Mode” on and off.
  4. Note that the Smashing Magazine also makes use of localStorage so that the site “remembers” the users’ preferences for the next time.

When you’re done, your web page should look like this:

What to Submit

Please make sure that you have completed the following:

When you’re done, please create a link from your homepage to each of your Tutorial 5 web pages (see Sarah’s homepage for an example). Then, commit and push all of your edits to GitHub and, paste a link to your GitHub Repository and to your GitHub pages in the Moodle submission.