Chore Door

Chore Door Project

It says the start button should transform over to “You Win! Play Again” when all three doors are clicked, but it does not change. Any help please?

<!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>
      <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://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
  <img id="door2" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
  <img id="door3" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/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>

const doorImage1 = document.getElementById('door1');
const doorImage2 = document.getElementById('door2');
const 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';

const numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

const isClicked = (door) =>{
  if (door.src === closedDoorPath){
    return false;
  } else{
    return true;
  }
}

const playDoor = (door) => {
  numClosedDoors--;
  if(numClosedDoors === 0) {
    gameOver('win');
  }
}

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

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

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

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

const gameOver = (status) => {
  if(status === 'win'){
      startButton.innerHTML= "You Win! Play Again";
  }
}

randomChoreDoorGenerator()

Still something is wrong here mmmmhhh…

const doorImage1 = document.getElementById('door1');
const doorImage2 = document.getElementById('door2');
const doorImage3 = document.getElementById('door3');
const startButton = document.getElementById('start');

const currentlyPlaying = true;

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';

const numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

function isBot(door){
  if(door.src === botDoorPath){
    return true;
  }else {
    return false;
  }
}

function isClicked (door) {
  if (door.src === closedDoorPath){
    return false;
  } else{
    return true;
  }
}

function playDoor(door){
  numClosedDoors--;
  if(numClosedDoors === 0) {
    gameOver('win');
  }else if(isBot(door)) {
    gameOver()
  }
}

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


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();
  }
}

function startRound(){
doorImage1.src= closedDoorPath;
doorImage2.src=closedDoorPath;
doorImage3.src=closedDoorPath;
numClosedDoors= 3;
startButton.innerHTML= 'Good Luck!';
currentPlaying=true;
randomChoreDoorGenerator();
}

function gameOver(status){
  if(status === 'win'){
      startButton.innerHTML= "You Win! Play Again";
  }else{
    startButton.innerHTML = 'Game over! Play again?'
  }
  currentlyPlaying = false;
}


startRound()

None of the open door images want to show, neither does the ‘Game Over! Play again?’ button.

Hi everyone! I am currently working on this, will let you know if i figure it out. @drewbooth

Make sure you’re declaring your variables correctly. There is a big difference between let and const

2 Likes

If you open your browser’s console, and click the reload button in the browser window of the Codecademy Learning Environment, you should see some errors similar to:

TypeError: invalid assignment to const `numClosedDoors’

2 Likes

I’m having the same problem. After making the gameOver() function the text won’t change as it is suposed to do.
https://gist.github.com/9d6139f1b2983ad2ede3a93ae8aa5e81

Hello, @rafaelribeirogontijo, and welcome to the forums!

I’ve looked at your code. Here’s a few things to consider:

  1. In your playDoor function, you are wanting to update the variable numClosedDoors
    numClosedDoors--; Is it possible to update a variable declared with const?

  2. Your playDoor function has a single parameter, ‘door’. Are you passing an argument each time you call the function?

  3. Inside your playDoor function, you should be testing the value of numClosedDoors using an if conditional statement. Is that happening? Consider the difference between the assignment operator = and the comparision operators == and ===.

  4. Your doors appear on top of each other in three separate rows rather than all three in a single row. Double check instruction number 11.

Good luck, and report back on your progress, or if you have questions.

2 Likes

Thank you so much! It’s hard to pay attention in every detail. I appreciate the help and will try to be more attentive!

1 Like

i’m having same problem but my variables are made with let and according to hint and instructions i’m doing just the way it should be.