Full Stack Engineer - Chore Door Project

I’ve been stuck for longer than I’d like to admit working on the Chore Door project in the full stack engineer stream.

I am fairly certain that it’s step 52 that tripped it up, when I added the isClicked() function in the JavaScript section, but I will include all 3 pages of code, in case it’s just something I broke earlier just showing up now.

The project description link is here

<!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>

    <div class='instructions-row'>
      <table>
        <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>

    <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>
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.title {
  margin: 0 auto;
  width: 400px;
}

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

const doorImage2 = document.getElementById('door2');

const doorImage3 = document.getElementById('door3');

let openDoor1;
let openDoor2;
let openDoor3;

const botDoorPath = 'https://content.codecademy.com/projects/chore-door/images/robot.svg';

const beachDoorPath = 'https://content.codecademy.com/projects/chore-door/images/beach.svg';

const spaceDoorPath = 'https://content.codecademy.com/projects/chore-door/images/space.svg';

const closedDoorPath = 'https://content.codecademy.com/projects/chore-door/images/closed_door.svg';

const startButton = document.getElementById('start');

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

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

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

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

gameOver = (status) => {
  if (status == 'win') {
    startButton.innerHTML = 'You Win! Play again?';
  }
};
randomChoreDoorGenerator();

Thanks in advance for any help you can offer :slight_smile:

If I look at this condition in your isClicked:

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

looks to me like: if door is closed/not clicked, you return true. Which doesn’t sit right with me.

seems you got your condition or return value the wrong way around

ok, that worked 100% to fix that problem.

Don’t suppose you ran into anything along your travels that suggested why upon the next step the text under the tag “id” won’t change when I believe that I have coded it to?

My understanding is that with the code as entered above, and the correction mentioned here i should be getting it to change once 3 doors have been clicked…

The text won’t change for me under any circumstances it seems, and I have no idea what’s up.

did you press the save button?

Difficult to say without seeing an updated version of your code

I’ve used both the in course browser, and have built the entire project on board my computer on VS Code, and it experiences the same problems regardless of where i go.

const doorImage1 = document.getElementById('door1');

const doorImage2 = document.getElementById('door2');

const doorImage3 = document.getElementById('door3');

let openDoor1;
let openDoor2;
let openDoor3;

const botDoorPath = 'https://content.codecademy.com/projects/chore-door/images/robot.svg';

const beachDoorPath = 'https://content.codecademy.com/projects/chore-door/images/beach.svg';

const spaceDoorPath = 'https://content.codecademy.com/projects/chore-door/images/space.svg';

const closedDoorPath = 'https://content.codecademy.com/projects/chore-door/images/closed_door.svg';

const startButton = document.getElementById('start');

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

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

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

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

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

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

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

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

Solved, I think…

I had two problems with the numClosedDoors variable.

first - it was declared using const, but needs to be able to change values, so I changed that to let.
second - I moved it in with the global variables.

I’m not 100% confident that I solved the correct problem, but it now works no matter where I run it.

const doorImage1 = document.getElementById('door1');

const doorImage2 = document.getElementById('door2');

const doorImage3 = document.getElementById('door3');

let openDoor1;
let openDoor2;
let openDoor3;

const botDoorPath = 'https://content.codecademy.com/projects/chore-door/images/robot.svg';

const beachDoorPath = 'https://content.codecademy.com/projects/chore-door/images/beach.svg';

const spaceDoorPath = 'https://content.codecademy.com/projects/chore-door/images/space.svg';

const closedDoorPath = 'https://content.codecademy.com/projects/chore-door/images/closed_door.svg';

const startButton = document.getElementById('start');

let numClosedDoors = 3;

let currentlyPlaying = true;

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

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

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

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

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

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

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

Ok…

So everything went really smoothly until I reached the startRound() function.

As soon as I attempt to utilize this function, I run into an issue where the openDoor images aren’t being correctly applied, and I get a broken image link.

Help greatly appreciated, hopefully for the second time today, I post it and then immediately find the problem

I don’t see you call your randomChoreDoorGenerator function anywhere? This function has to be called/executed to assign the images to the openDoor variables

Thank you muchly

Took a few tries, but I got it to run correctly :slight_smile:

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.