Assignment 03 — JavaScript and Document Object Model (DOM) Basics

Overview

Create a new webpage that introduces interactivity and basic document object model manipulation using JavaScript. Do not build off of your previous assignments.

Project Structure

Folder: csc336-fall2025/03-js-dom-basics
HTML: index.html
CSS: style.css
JavaScript: script.js

Requirements

Use document.getElementById or document.querySelector to access html elements.
Have a button that, when clicked, calls a function you wrote.
Use document.createElement at least once to add something new to the page.
Dynamically modify at least one element’s CSS style with JavaScript.
Include at least 3 CSS rules.
Be creative!

The Creative Part

In addition to meeting the technical requirements, your webpage should include a creative interactive element. This is open-ended, but it must involve user input and JavaScript changes to the page. Some possible ideas:

A “mood switcher” that changes the page background and text style when a button is clicked.
A simple fortune-teller that displays a random message when the user interacts with it.
An interactive mini-gallery where clicking a thumbnail reveals a larger image.

You do not need to use one of these examples — come up with something fun, interesting, or unusual that shows off your ability to manipulate the DOM with JavaScript.

Examples

First, here are the two examples from class: Simple Example, More Complex Example, and Most In-Depth Example.

These two examples demonstrate how to satisfy the requirement for the assignment. Using developer tools, look at the code for this assignment webpage to see how the below example work.