Hey!
So, I’ve been working on the Chore Door project and had it going pretty smoothly up until I reached Step 45. At this point, after we have written the logic so the ChoreBot randomizes its position, my doors no longer react to the click events and stay closed.
I’ve gone over my code numerous times, moved a few functions around, and even rewrote parts of the JS code that were working fine before to match the video walkthrough after I couldn’t find the issue myself.
If anyone could give my code a second look and help me figure out what’s wrong, I’d greatly appreciate it! Thank you!
HTML Code:
!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>
CSS Code:
body {
background-color: #010165;
margin: 0px;
}
.header {
background-color: #00ffff;
text-align: center;
}
.title-row {
margin-top: 42px;
margin-bottom: 21px;
text-align: center;
}
.instructions-title {
display: inline;
font-size: 18px;
color: #00ffff;
font-family: 'Work Sans';
}
.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;
font-family: 'Work Sans';
background-color: #eb6536;
padding-top: 18px;
font-size: 18px;
text-align: center;
color: #010165;
margin-bottom: 21px;
cursor: pointer;
}
JS Code:
let doorImage1
= document.getElementById('door1');
let doorImage2
= document.getElementById('door2');
let doorImage3
= document.getElementById('door3');
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 numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
const randomChoreDoorGenerator = () => {
choreDoor
= Math.floor((Math.random() * numClosedDoors));
if (choreDoor === 0) {
openDoor1 = borDoorPath;
openDoor2 = beachDoorPath;
openDoor3 = spaceDoorPath;
}
else if (choreDoor === 1) {
openDoor1 = beachDoorPath;
openDoor2 = borDoorPath;
openDoor3 = spaceDoorPath;
}
else if (choreDoor ==== 2) {
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;
openDoor3 = borDoorPath;
}
else {
document.body.style.backgroundColor = 'red';
}
};
door1.onclick = () => {
doorImage1.src = openDoor1;
}
door2.onclick = () => {
doorImage2.src = openDoor2;
}
door3.onclick = () => {
doorImage3.src = openDoor3;
}
randomChoreDoorGenerator();
I should add that I added the extra “else” statement in the “if/else if/else” portion of the JS code as a sort of error troubleshooting measure since I can’t console.log to check if the ChoreDoorGenerator is working… is it possible that’s causing the issue?