Project Chore door help

Projects
1

Hey guys, I’m having trouble figuring out why my doors are no longer working correctly. Before i reached step 39 (create random generator), the doors all worked interactively. I have followed the steps, gone back over the code but can’t seem to find where i am going wrong.

Project link: https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door

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>
    <!-- header -->
    <div class='header'>
      <img src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg' alt='header logo'>
    </div>
    <!-- Title row -->
    <div class='title-row'>
      <img src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg' alt='star image'>
      <p class='instructions-title'>Instructions</p>
      <img src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg' alt='star image'>
    </div>
    <!-- Instructions table -->
    <table class='title-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>
    <!-- Door parent container -->
    <div class='door-row'>
    <!-- Chorebot door -->  
      <img id='door1' class='door-frame' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg' alt='closed door'>
      <!-- door 2 -->
      <img id='door2' class='door-frame' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg' alt='closed door'>
      
      <!-- door 3 -->
      <img id='door3' class='door-frame' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg' alt='closed door'>
    </div>
    
    <!-- Start button -->
    <div id='start' class='start-row'>
      Good luck!
    </div>
    <script type='text/javascript' src='script.js'></script>
  </body>
</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 styling */

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

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

/* misc styling */

.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:

// Global scope

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

// Door generator variables

let numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;
    

// Door images

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



// Block scope

// Random door generator

const randomChoreDoorGenerator = () => {
  let 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 (choreDoor === 2) {
    openDoor3 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
  }
};

// Robot door
doorImage1.onclick = () => {
  doorImage1.src = openDoor1
};

// Door 2
doorImage2.onclick = () => {
  doorImage2.src = openDoor2
};

// Door 3
doorImage3.onclick = () => {
  doorImage3.src = openDoor3
};
2

Hello, @text6903111200.

You’ve got an issue here:
else does not take a condition. Its code block should execute when none of the preceding if or else if conditions evaluate to true.

After fixing that, if you’d like to see your function in action, you’ll have to call it at the end of your code. Just remember to delete that function call before proceeding to the next step.

1 Like
3

Thanks a lot! :slight_smile:

1 Like
4

You’re very welcome!

7

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