Here is my code…
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>
</body>
<script type ="text/javascript" src ="script.js">
</script>
</html>
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;
}
JS
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;
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('lose');
}
}
const randomChoreDoorGenerator = () => {
const choreDoor = Math.floor(Math.random() * numClosedDoors);
if(choreDoor === 0){
openDoor1 = botDoorPath;
openDoor2 = beachDoorPath;
openDoor3 = spaceDoorPath;
} else if (choreDoor === 1){
openDoor2 = botDoorPath;
openDoor1 = beachDoorPath;
openDoor3 = spaceDoorPath;
} else { (choreDoor === 2)
openDoor3 = botDoorPath;
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;
}
}
door1.onclick = () => {
if(currentlyPlaying && !isClicked(doorImage1)) {
doorImage1.src = openDoor1;
playDoor(door1);
}
}
door2.onclick = () => {if(currentlyPlaying &&!isClicked(doorImage2)) {doorImage2.src = openDoor2;
playDoor(door2);
}
}
door3.onclick = () => { if(currentlyPlaying &&!isClicked(doorImage3)) { doorImage3.src = openDoor3;
playDoor(door3);
}
}
startButoon.onclick = () => {
if(!currentlyPlaying) {
startRound();
}
}
const startRound = () => {
door1.src = closedDoorPath;
door2.src = closedDoorPath;
door3.src = closedDoorPath;
numClosedDoors = 3;
currentlyPlaying = true;
startButton.innerHTML = 'Good luck!';
randomeChoreDoorGenerator();
}
const gameOver = (status) => {
if (status === 'win') {
startButton.innerHTML = 'You win! Play again?';
} else {
startButton.innerHTML = 'Game over! Play again?'
}
currentlyPlaying = false;
}
startRound();