Chore Door Project Guide

In this project, you’ll create a simple interactive game using HTML, CSS and JavaScript.

The goal is to open all three doors without revealing the ChoreBot until the very last door.

---

Folder Structure

1. Create a new folder named project;
2. Inside, create three files: index.html, style.css and script.js;
3. Make sure to place all your images (robot.svg, beach.svg, space.svg, logo.svg, star.svg) in the same folder.

---

1. HTML Structure

2. CSS Styling

Link your index.html with your style.css. Use the following suggestions to style your project (or get creative!):

Section	Property	Value
General	Background	#010165
General	Margin	0px
Header	Background	#00ffff
Title row	Margin-top	42px
Title row	Margin-bottom	21px
Title row	Font-family	'Work Sans', sans-serif
Title row	Color	#00ffff
Title row	Font-size	18px
Instructions	Margin	0 auto
Instructions	Width	400px
Instructions	Font	'Work Sans'
Instructions - Numbers	Padding-right	25px
Instructions - Numbers	Font-size	36px
Instructions - Numbers	Color	#00ffff
Instructions - Text	Padding	10px
Instructions - Text	Font-size	14px
Instructions - Text	Color	#ffffff
Doors	Cursor	pointer
Doors	Padding	10px
Start Button	Width	120px
Start Button	Height	43px
Start Button	Font	'Work Sans'
Start Button	Background	#eb6536
Start Button	Font-size	18px
Start Button	Color	#010165
Start Button	Margin-bottom	21px
Start Button	Cursor	pointer

3. JavaScript Logic

Link your index.html to your script.js.

JavaScript Roadmap

Here’s a checklist for the logic:

• Assign image paths (bot, beach, space)
• Get door elements by ID (getElementById)
• Make doors clickable (change image when clicked)
• Shuffle images using Math.random() and assign to door variables
• Create playDoor() to track opened doors
• Create isBot() to check if a door is the robot
• Create gameOver() that updates the start button text
• Add logic to detect win/loss conditions
• Reset game on button click

Step 1: Setup

In script.js, create variables for each image and assign its path to the variable. Then create variables and use getElementbyId to link them to your doors.

JavaScript

// Define image paths for bot, beach, and space
let botDoor = "robot.svg";
// Add paths for beachDoor and spaceDoor

// Get references to the door images
let doorImage1 = document.getElementById("door1");
// Do the same for door2 and door3...

Step 2: Randomize Door Content

Write a function that randomly assigns the robot to one of the doors.

JavaScript

// Name the function something like randomChoreDoorGenerator
// Inside, generate a random number between 0 and 2
// Based on that number, assign which door gets the robot

Step 3: Add Interactivity

Your goal: when a player clicks a door, it should:

• Reveal what’s behind the door
• Check if it’s the robot
• Update the number of doors left

JavaScript

// Set an onclick event for doorImage1
doorImage1.onclick = () => {
  // Set doorImage1.src = openDoor1;
  // Call your function to handle what happens after opening
}

// Do the same for doorImage2 and doorImage3

Step 4: Win/Lose Logic

Create a function that:

• Ends the game if the robot is found
• Shows “You win!” if all doors are opened safely

JavaScript

// Name it something like playDoor(door)
// If numClosedDoors hits 0 → you win
// If clicked door has robot → game over

Step 5: Start/Reset the Game

Connect the “Start” button to reset everything and start a new round.

JavaScript

// Add an onclick event to the start button
// Reset all variables and call your random door generator again

Challenge: Can you build in a winning streak counter?