Chore Door Project Exercise

Projects
1

It doesn’t give the result it should… Images dissappear, the text on the startButton does not change…
What am I doing wrong?

let doorImage1 = document.getElementById("door1");
let doorImage2 = document.getElementById("door2");
let doorImage3 = document.getElementById("door3");
const startButton = document.getElementById("start");
const botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
const beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
const spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";
const closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg"
let currentlyPlaying = true;

const numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;

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) {
    return gameOver('win');
  } else if (isBot(door) === true){
    gameOver();
  };
};

const randomChoreDoorGenerator = () => {
  let choreDoor = Math.floor(Math.random() * numClosedDoors);
  if (choreDoor === 0) {
    openDoor1 = botDoorPath;
    openDoor2 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  } else if (choreDoor === 1) {
    openDoor1 = spaceDoorPath
    openDoor2 = botDoorPath;
    openDoor3 = beachDoorPath;
  } else if (choreDoor === 2) {
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
    openDoor3 = botDoorPath;
  };
  
};

doorImage1.onclick = () => {
  
  if (currentlyPlaying === true && !isClicked(doorImage1)) {
  	doorImage1.src = openDoor1;
   	playDoor(doorImage1);
  };  
};

doorImage2.onclick = () => {
  
  if (currentlyPlaying === true && !isClicked(doorImage2)) {
  	doorImage2.src = openDoor2;
   	playDoor(doorImage2);
  };  
};

doorImage3.onclick = () => {
  if (currentlyPlaying === true && !isClicked(doorImage3)) {
  	doorImage3.src = openDoor3;
   	playDoor(doorImage3);
  };  
};

if (currentlyPlaying === false) {
	startButton.onclick = () => {
  	startRound();
	};
};

const startRound = () => {
  doorImage1.src = closedDoorPath;
  doorImage2.src = closedDoorPath;
  doorImage3.src = closedDoorPath;
  numClosedDoors = 3;
  currentlyPlayin = true;
  startButton.innerHTML = 'Good luck!';
  randomChoreDoorGenerator();
}

const gameOver = (status) => {
  if (status === 'win') {
  	startButton.innerHTML = 'You win! Play again?'; 
  } else {
    startButton.innerHTML = 'Game Over! Play again?'
  };
  currentlyPlaying = false;
};

startRound();
1 Like
2

Typo. Could that be the culprit?

1 Like
3

Fixed the typo, didn’t solve it. :frowning:

4

During the exercise, everything went as it should until I had to add the playDoor functions and gameOver. But I can’t seem to find any errors there.

5

My bookmark seems to be out of date. Please provide a link to the exercise page. Thanks.

Belay, belay… Found it.

Chore Door

Unfortunately I’ve gone and changed so much in my code I’m going to need your HTML and CSS in order to test your code.

Check that… I’ve found the HTML in a forum post, and just need your style.css file.

1 Like
6

Was about to go to bed, its after midnight here :P. But this is the css code:

body {
  background-color: #010165;
  margin: 0px;
}

.header {
  background-color: #00ffff;
  text-align: center;
}

.door-frame {
  cursor: pointer;
  padding: 10px;
}

.title-row {
  margin-top: 42px;
  margin-bottom: 21px;
  text-align: center;
}

.instructions-title {
  display: inline;
  font-size: 18px;
  color: #0ff;
  font-family: "Work Sans";
}

.instructions-row {
  margin: 0 auto;
  width: 400px;
}

.instructions-number {
  padding-right: 25px;
  font-family: "Work Sans";
  font-size: 36px;
  color: #0ff;
}

.instructions-text {
  padding: 10px;
  font-family: "Work Sans";
  font-size: 14px;
  color: #fff;
}

.door-row {
  text-align: center;
}

.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: 12px;
  cursor: pointer;
}
1 Like
7

@mtf can’t thank you enough for digging through my code ;). Will go to bed now, will read your feedback tomorrow if you don’t mind.

2 Likes
8

This is 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="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg">
    </div> 
    <div class="title-row">
      <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
      <p class="instructions-title">Instructions</p>
      <img src="https://s3.amazonaws.com/codecademy-content/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>
      	<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>
        <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://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt="closed door">
      <img id="door2" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt="closed door">
      <img id="door3" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt="closed door">
    </div>
    <div id="start" class="start-row">
      Good Luck!
    </div>  
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>
1 Like
9

The problem is this part.
You created this variable as a constant which says it may not be changed in run time.

in your playdoor function you are trying to change it and this causes an error.

const playDoor = (door) => {
	numClosedDoors--; <-------  throws error since numClosedDoors is const
  if (numClosedDoors === 0) {
    return gameOver('win');
  } else if (isBot(door) === true){
    gameOver();
  };
};

change the variable to use let instead of const and it will work.

let numClosedDoors = 3;
4 Likes
10

@biirra Thanks a lot!! That did the trick! How I could have missed that… Shame on me.

2 Likes
11

No problem. Useally when stuff does not work youre browser will give an error. If you press “F12” If you go to the console tab you will see the errors if there are any.

3 Likes
12

The code was still not running properly, it wouldn’t start another round but I managed to figure that out ;). It appeared that in the onclick event for the startButton the if statement should have been inside the onclick function rather than the other way round. :stuck_out_tongue:

startButton.onclick = () => {
  if (currentlyPlaying === false) {  
  	startRound();
	};
};
1 Like
13

That was on my list of things to ask you about. Glad you solved it. Something else I was going to suggest is not using const on any variables that need to change, and using it on any that should not change, such as your cached nodes.

const doorImage1 = ...
2 Likes
14

Thanks @mtf! Will pay attention to that ;).

2 Likes