Https://www.codecademy.com/courses/build-interactive-websites/projects/chore-door

Projects
1

HI, could someone post the bug-free full code of the Chore Door Challenge on the Interactive JavaScript Websites? My code is here, but somehow the doors won’t open:


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

let doorImage2 = document.getElementById("door2");

let doorImage3 = document.getElementById("door3");

let startButton = document.getElementbyId("start");

let numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

let currentPlaying = true;

let closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";




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)=== true) {
    gameOver();
  }
}

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

let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";

let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";

let spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";




const startRound = () => {
  doorImage1.src = closedDoorPath;
  doorImage2.src = closedDoorPath;
  doorImage2.src = closedDoorPath;
  numClosedDoors = 3;
  doorImage.src = closedDoorPath;
  startButton.innerHTML = 'Good Luck';
  currentPLaying = true;
  randomChoreDoorGenerator();
}
 startButton.onclick = () => {
if(currentlyPlaying === false) {
  startRound() {
  }
}


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

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

https://www.codecademy.com/courses/build-interactive-websites/projects/chore-door

Thank you!

1 Like
2

Could you post your code whilst using the preformatted text button </>?

1 Like
3

I just did. Hope it works. Thanks!

2 Likes
4

Ok, first I would like to say something about your usage of variables (let, const etc). Use const for variables that will not change and you don’t want to be changed. Such as your source paths and functions. Let is used to declare variables that you want to and will change during running such as numClosedDoors, openDoor1 etc.

let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";

//should be

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

Also you really need to pay attention to indentation. Put your code and the brackets on the right spaces/columns. Proper indentation aids in finding bugs/errors. For example in your code:

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

When proper indented should be:

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

Ok that said, lets move to your functions and calls:

First error I spot is in randomDoorGenerator.

You call for a random number between 0 and 3 (Math.random() * numClosedDoors)
However, random number will have decimals etc so you use Math.floor to round to the its lowest round number this means 2.1 will be 2, 0.5 will be 0 etc. Thus your output will be 0, 1 or 2. Your if else if statements compare choreDoor to 1, 2 and 3. This needs to be 0, 1 and 2. This mistake won’t have much effect on the game although it cuts the available door options by one.

In const startRound you have a variable that does not exist doorImage you call .src on it and assign it a value. Since this variable does not exist this will result in an error.

In startButton.onclick there is a { that shouldn’t be there, directly after startRound().

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

The doorX.onclick functions have some issues as well.
First, your playDoor() calls must be inside the if statement. You seem to have some extra }'s laying around. Once again indentation is key here to find errors.

It should be coded as such:

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

Also there is something I can’t blame you, its the fault of Codecademy, is that the hint calls variables door1, door2 and door3. These have actually not been defined so calling them is wrong.

But… for some reason they are taken immediately out of the DOM which should not be possible.

At the start of the assignment you get these element from the DOM and assign them to doorImage1, doorImage2 and doorImage3. These should be the actual targets to be used.

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

So, I hope my comments help ;).

2 Likes
5

Hi Jannes,

Thank you for your support and effort. I updated my code but it still does not run -
please could you review. Hope i understood everything right.


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

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

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

const startButton = document.getElementbyId("start");

let numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

const currentPlaying = true;

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

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) === true) {
    	gameOver();
  };
};

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

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 startRound = () => {
  doorImage1.src = closedDoorPath;
  doorImage2.src = closedDoorPath;
  doorImage2.src = closedDoorPath;
  numClosedDoors = 3;
  startButton.innerHTML = 'Good Luck';
  currentPLaying = true;
  randomChoreDoorGenerator();
	};
};

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


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

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 && !isClicked(doorImage3)) {
			 doorImage3.src = openDoor3;
  		 playDoor(doorImage3);
	};
};  
 startRound();
6

You are welcome ;).

You need to look into your variables again.
Some of your const need to be let ;).

Ask yourself a couple of questions for each variable: What is the purpose of this variable? Will I have to assign other values to it during running?

1 Like