CSCI 344: Spring 2025

Advanced Web Technology

CSCI 344: Spring 2025

UNCA Logo

Assignments > Tutorial 5: JavaScript: Event Handlers

Due on Mon, 02/24 @ 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. Exploring some common UX/UI widgets and how they’re implemented using JavaScript.

Cheatsheet

Here are some examples of different selector methods and approaches to updating the DOM. You can also try practicing with Sarah's interactive DOM manipulation tool.

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 el.className = "panel";
innerHTML el.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 el.style.width = "200px";
height el.style.height = "200px";
background-color el.style.backgroundColor = "hotpink";
border-width el.style.borderWidth = "5px";
padding el.style.padding = "10px";
display el.style.display = "none";

Some useful helper functions

Property Example
insertAdjacentHTML(position, htmlString) el.insertAdjacentHTML("beforeend", "<p>stuff</p>");
insertAdjacentHTML docs
classList.add(className) el.classList.add("highlight");
classList docs
classList.remove(className) el.classList.remove("highlight");
classList.toggle(className) el.classList.toggle("highlight");

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. Theme Switcher

Open styles.css and scroll down to ~line 70. You will see three classes ( ocean, desert, and high-contrast) which correspond to three different themes. If you apply any of these classes to the <body></body> tag and preview your HTML, you will see that the theme changes. Try it out!

You job is to make the buttons dynamically change the theme of the web page as pictured below. When you’re done, your web page should look like this:

Hints:

  1. Inside of index.js, create a single function called changeClass() that has one parameter, which will store the name of the class as a string.
  2. Within the changeClass() function body, set the body’s class attribute to the name of the class passed into the function. If the default button is clicked, just unset the class on the body tag.
  3. Attach your changeClass() function to the click event of each button. Make sure you’re passing in the correct argument.
  4. Use the cheatsheet associated with this tutorial to figure out how to modify the class attribute.

Optional

If you have time, try creating your own theme in the styles.css file and creating another button so that when you click on the new button, your theme shows up.

2. Hamburger Menu

As you probably already know, a hamburger menu is a common design pattern for showing and hiding the navigation of your web page if you are on a mobile device. The logic of the hamburger menu implementation is as follows:

CSS Tasks (already done for you)

Preview the index.html and notices the responsive styling. Then take a look at the styles.css file and see what’s going on. Please note the following:

JavaScript (your task)

Your job is to modify the JavaScript file so that it achieves the effect shown below. Specifically:

Hint: Consider using the classList.toggle("some_class") method (see cheatsheet above, or google it).

Demo

If you were on a front-end team and in need of a carousel, you would probably use a pre-made widget from an existing design system / UI kit. That said, it is useful to understand how these widgets work so that you understand the basic idea.

Given this, please open the 03-carousel folder and make the following changes:

  1. Add comments to the index.js file explaining what each of the statements does.
  2. [Optional]
    • Stylize the buttons using one of the font-awesome icons (or some other image or icon).
    • Change out the photos.
    • Make any additional stylistic changes you see fit.

For this task, you may not use an AI assistant to comment the index.js code for you. YOU need to do it.

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.