💻PROJECT #4.2: Simulation

Overview

Project Goal

Create a fun and interactive simulation of a real-life process using JavaScript and the DOM. Your simulation should allow users to interact with buttons or other inputs on a webpage and see changes appear on screen. This is your chance to turn your code into a mini-world where things come to life when clicked!

📥PROGRAM SETUP & SUBMISSION INSTRUCTIONS
  1. Go to the CS1 Project 4.2 assignment on Blackbaud and follow the provided GitHub Classroom link.

    📁 Clicking the link generates a private repository for your project with the appropriate starter code. Note that projects are stored within the BWL-CS Organization, so you cannot access it from the “Your Repositories” page!

  2. Open the repository in a Codespace whenever you spend time working on the program, in class or at home.

    ⚠️ Always remember to commit changes after every coding session!

  3. When your project is complete, submit the link to your repository in the CS1 Project 4.2 assignment on Blackbaud.

Example Project: Coffee Drink Maker

Imagine a blank cup on the screen. The user can click buttons like “Add Coffee” or “Add Milk.” Each click changes how the drink looks or adds a new visual layer. You’ll use DOM methods like querySelector, style, textContent, addEventListener, and possibly createElement and appendChild to make this happen.

See the Pen Covfefe by Katerina Walter (@katerinawalter) on CodePen.

Instructions

Step 1: Plan Your Simulation

🧠 Start by choosing a theme. Here are some ideas:

  • Build a Sandwich (add bread, cheese, lettuce, meat…)
  • Dress a Character (change outfit colors, add hats, accessories…)
  • Assemble a Pizza (choose toppings and watch them appear…)
  • Weather Simulator (toggle between sunny, rainy, snowy visuals…)
  • Tiny Garden (plant seeds, grow flowers, change the background…)

📝 Sketch or list:

  • What elements are on screen when the page loads?
  • What buttons (or keyboard controls) can the user interact with?
  • What changes will happen on screen?

Step 2: Set Up Your HTML

🏗️ Create a simple HTML page with:

  • A descriptive title/header (in an h1 element)
  • A display area (like a div or section) to show your simulation 
    <div id="cup-display" class="coffee">[ Coffee ]</div>
  • At least three buttons that trigger different actions 
    <div class="container text-center m-auto">
  <button id="add-milk">Add Milk</button>
  <button id="add-ice">Add Ice</button>
  <button id="reset">Reset</button>
</div>

Step 3: Style Your Display (style.css)

🎨 Use CSS to format the initial appearance of your display area. For example:

#cup-display {
  width: 200px;
  height: 250px;
  text-align: center;
  font-size: 22px;
  margin: auto;
  border: 10px solid black;
}

Here, setting some general styles that will NOT change later on.

➕ You can also define classes for certain visual effects:

.coffee {
  background: #6F4E37;
}

.milk {
  background: #b89d8a;
}

The intention here is to switch between the class names!

Step 4: Add Interactivity with JavaScript (script.js)

Now, make the buttons actually do something! Use the last project to help you. Here are two additional ways to use JavaScript to change the page:

  • Button that changes the CLASS NAME attached to an element: 
    const cup = document.querySelector("#cup-display");
  
const milkBtn = document.querySelector("#add-milk");
milkBtn.addEventListener("click", addMilk);
  
function addMilk() {
  cup.classList.remove("coffee");
  cup.classList.add("milk");
  cup.textContent = "[ Coffee with Milk ]";
}

    This strategy is useful for applying larger sets of styling rules, as an alternative to setting individual style properties like we did in the last project with element.style.cssProperty = "value".

  • Button that CREATES and ADDS a new HTML element to the document: 
    const iceBtn = document.querySelector("#add-ice");
iceBtn.addEventListener("click", addIce);
  
function addIce() {
  const iceCube = document.createElement("span");
  iceCube.textContent = "🧊";
  cup.appendChild(iceCube);
}

Step 5: Customize Your Simulation

Replace the example with a simulation of your own unique theme and style! Use JavaScript DOM operations to manipulate the HTML and CSS of the document.

📖 JS CHEATSHEET:

Syntax Example Description
const element = document.querySelector(); Selects the first HTML element that matches the provided CSS selector (tag, .class, or #id)
element.textContent = "text"; Sets the text inside an element like <h1>, <p>, or <span>
element.src = "source"; Sets the source attribute of an <img> element
element.style.property = "value"; Changes an inline style of the selected element by setting a CSS property (ex: element.style.border = "2px solid black";)
element.classList.add(); Adds a class name (set of styling rules defined in CSS)
element.classList.remove(); Removes a class name from the element (therefore removing that set of styling rules)
element.addEventListener('click', functionName); Attaches an event listener to an element (usually a <button>) to trigger a function in response to user actions
function functionName() {} Defines a new function (process) that executes a set of JavaScript statements (instructions) when activated
const newElement = document.createElement('tag'); Creates a new HTML element in the DOM
element.appendChild(newElement); Adds a new child element to a parent element (usually a <div>) in the document

🎯 REQUIREMENTS:

  • One display area (or more) that can change with user interaction
    • Include appropriate HTML elements to build the scene of your simulation

      Examples: <p>, <div>, <span>, <img>

    • Design the initial layout/appearance of the elements with CSS rules
  • At least 3 buttons (or other interactive controls, like key presses)
    • Use document.querySelector to select the button elements in JavaScript
    • Use addEventListener to connect each button element to a function
    • Define a function for each button that handles changes in your simulation
  • At least 10 visible DOM changes handled in JavaScript, such as:
    • Changing individual style properties

      Reference: HTML DOM Style Object Properties

    • Apply class names dynamically for larger sets of styling rules (classList.add, classList.remove)
    • Changing the textContent of text elements
    • Modifying the src attribute of image elements
    • Adding new elements to the display area (createElement, appendChild)

      Reference: JavaScript Document Object Model

Extension Ideas:

We have only just scratched the surface of what JavaScript can do! Try to implement one or more of the following features:

  • A RESET button that clears the display area back to the starting appearance.

    See the JavaScript code for resetBtn and resetCup() in my example here: Wk32 CodeCollab

  • Use the classList.add() function to attach an ANIMATION to an element.

    See the CSS code for .milk-animation and @keyframes pour-milk, and the JavaScript code for addMilk() in my example here: Wk32 CodeCollab

  • Use .setTimeout() to create a delay before a change happens

    Reference: W3 Schools - Window setTimeout Method

  • Add sound effects using the <audio> tag in HTML and .play() in JS

    Reference: HTML Audio and JavaScript play Method

  • Use checkboxes or other types of HTML form input instead of buttons

    Reference: How to Submit a Form with JavaScript