Ok, I’ve just spent hours trying to get the Chore Door exercise to work without any success… I’ve talked to other students and even a dev I know and no one was able to figure out what the issue is…
I’m working from my computer, I’ve downloaded the images and I’m trying to make it work completely local/offline. Here are my codes:
My 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="./images/logo.svg">
</div>
<div class="title-row">
<img src="images/star.svg">
<p class="instructions-title">Instructions</p>
<img src="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 on the first two doors.</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="images/closed_door.svg">
<img id="door2" class="door-frame" src="images/closed_door.svg">
<img id="door3" class="door-frame" src="images/closed_door.svg">
</div>
<div id="start" class="start-row">Good luck!</div>
<script type="text/javascript" src="scriptB.js"></script>
</body>
</html>
My CSS:
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;
}
My JavaScript:
const doorImage1 = document.getElementById("door1");
const doorImage2 = document.getElementById("door2");
const doorImage3 = document.getElementById("door3");
const startButton = document.getElementById("start")
const botDoorPath = "images/robot.svg";
const beachDoorPath = "images/beach.svg";
const spaceDoorPath = "images/space.svg";
const closedDoorPath = "images/closed_door.svg";
let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
let currentlyPlaying = true;
const isBot = (door) => {
if (door.src === botDoorPath) {
return true;
} else {
return false;
}
};
const isClicked = (door) => {
if (door.src === closedDoorPath) {
return false;
} else {
return true;
}
};
const playDoor = (door) => {
numClosedDoors--;
if (numClosedDoors === 0) {
gameOver('win')
} else if (isBot(door)) {
gameOver()
}
};
const randomChoreDoorGenerator = () => {
const 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(openDoor1);
}
};
doorImage2.onclick = () => {
if (currentlyPlaying && !isClicked(doorImage2)) {
doorImage2.src = openDoor2;
playDoor(openDoor2);
}
};
doorImage3.onclick = () => {
if (currentlyPlaying && !isClicked(doorImage3)) {
doorImage3.src = openDoor3;
playDoor(openDoor3);
}
};
startButton.onclick = () => {
if(!currentlyPlaying) {
startRound();
}
};
const startRound = () => {
if (currentlyPlaying === false) {
doorImage1.src = closedDoorPath;
doorImage2.src = closedDoorPath;
doorImage3.src = closedDoorPath;
numClosedDoors = 3;
startButton.innerHTML = 'Good luck!';
currentlyPlaying = true;
randomChoreDoorGenerator()
}
};
const gameOver = (status) => {
if (status === 'win') {
startButton.innerHTML = 'You win! Play again?';
} else {
startButton.innerHTML = 'Game over! Play again?';
}
currentlyPlaying = false;
};
startRound();
I’m hoping I can find someone here to give me a rubber ducking session because I have really just given up on this by now.