Been messing with this Project: Chore Door for the past two hours and can’t seem to get it to work. Watched the video, searched the forums, even ran it through JSLint, VS Code, and the browser console. I would very greatly appreciate if someone could please look through my script.js and please tell me where I am going wrong.
NOTE: Unsure if it is related but I do have a few warnings in my browser console: Screenshot by Lightshot
EDIT: Here’s a JSFiddle link to make it easier to work with: Building Interactive Javascript Websites: Project Chore Door - JSFiddle - Code Playground
script.js
// Access HTML elements
let doorImage1 = document.getElementById("door1");
let doorImage2 = document.getElementById("door2");
let doorImage3 = document.getElementById("door3");
let startButton = document.getElementById("start");
let botDoorPath = "https://content.codecademy.com/projects/chore-door/images/robot.svg";
let beachDoorPath = "https://content.codecademy.com/projects/chore-door/images/beach.svg";
let spaceDoorPath = "https://content.codecademy.com/projects/chore-door/images/space.svg";
let closedDoorPath = "https://content.codecademy.com/projects/chore-door/images/closed_door.svg";
let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
let currentlyPlaying = true;
// Define game logic to check doors, progress game, end game, and choose a random chore door
const isClicked = (door) => {
if (door.src === closedDoorPath) {
return true;
} else {
return false;
}
};
const isBot = (door) => {
if (door.src === botDoorPath) {
return true;
} else {
return false;
}
};
const gameOver = (status) => {
if (status === "win") {
startButton.innerHTML = "You Win! Play again?";
} else {
startButton.innerHTML = "Game Over! Play again?";
}
currentlyPlaying = false;
};
const playDoor = (door) => {
numClosedDoors--;
if (numClosedDoors === 0) {
gameOver("win");
} else if (isBot(door)) {
gameOver();
}
};
const randomChoreDoorGenerator = () => {
let choreDoor = Math.floor(Math.random() * numClosedDoors);
if (choreDoor === 0) {
openDoor1 = botDoorPath;
openDoor2 = beachDoorPath;
openDoor3 = spaceDoorPath;
} else if (choreDoor === 1) {
openDoor1 = beachDoorPath;
openDoor2 = botDoorPath;
openDoor3 = spaceDoorPath;
} else {
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;
openDoor3 = botDoorPath;
}
};
doorImage1.onclick = () => {
if (currentlyPlaying && isClicked(doorImage1)) {
doorImage1.src = openDoor1;
playDoor(doorImage1);
}
};
doorImage2.onclick = () => {
if (currentlyPlaying && isClicked(doorImage2)) {
doorImage2.src = openDoor2;
playDoor(doorImage2);
}
};
doorImage3.onclick = () => {
if (currentlyPlaying && isClicked(doorImage3)) {
doorImage3.src = openDoor3;
playDoor(doorImage3);
}
};
startButton.onclick = () => {
if (currentlyPlaying === false) {
startRound();
}
};
// Start a game round
const startRound = () => {
doorImage1 = closedDoorPath;
doorImage2 = closedDoorPath;
doorImage3 = closedDoorPath;
numClosedDoors = 3;
currentlyPlaying = true;
startButton.innerHTML = "Good Luck!";
randomChoreDoorGenerator();
};
startRound();
index.html
<!DOCTYPE html>
<html>
<head>
<title>Chore Door!</title>
<link href="./style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
<img src="https://content.codecademy.com/projects/chore-door/images/logo.svg">
</div>
<div class="title-row">
<img src="https://content.codecademy.com/projects/chore-door/images/star.svg">
<p class="instructions-title">Instructions</p>
<img src="https://content.codecademy.com/projects/chore-door/images/star.svg">
</div>
<table class="instructions-row">
<tr>
<td class="instructions-number">1</td>
<td class="instructions-text">Hiding behind one of these doors is the ChoreBot.</td>
</tr>
<tr>
<td class="instructions-number">2</td>
<td class="instructions-text">Your mission is to open all of the doors without running into the ChoreBot.</td>
</tr>
<tr>
<td class="instructions-number">3</td>
<td class="instructions-text">If you manage to avoid the ChoreBot until you open the very last door, you win!</td>
</tr>
<tr>
<td class="instructions-number">4</td>
<td class="instructions-text">See if you can score a winning streak!</td>
</tr>
</table>
<div class="door-row">
<img id="door1" class="door-frame" src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
<img id="door2" class="door-frame" src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
<img id="door3" class="door-frame" src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
</div>
<div id="start" class="start-row">Good luck!</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
style.css
body {
background-color: #010165;
margin: 0px;
}
.header {
background-color: #00ffff;
text-align: center;
}
.title-row {
margin-top: 42px;
text-align: center;
margin-bottom: 21px;
}
.instructions-title {
display: inline;
font-family: 'Work Sans';
font-size: 18px;
color: #00ffff;
}
.instructions-row {
margin: 0 auto;
width: 400px;
}
.instructions-number {
padding-right: 25px;
font-family: 'Work Sans';
font-size: 36px;
color: #00ffff;
}
.instructions-text {
padding: 10px;
font-family: 'Work Sans';
font-size: 14px;
color: #ffffff;
}
.door-row {
text-align: center;
}
.door-frame {
cursor: pointer;
padding: 10px;
}
.start-row {
margin: auto;
width: 120px;
height: 43px;
background-color: #eb6536;
padding-top: 18px;
font-family: 'Work Sans';
font-size: 18px;
text-align: center;
color: #010165;
margin-bottom: 9px;
cursor: pointer;
}
