I’m not exactly sure how to ask this question and couldn’t find it upon searching.
Here’s the issue:
I’ve completed every task on Chore Door up until number 58. My code isn’t the problem…the task is what has me stumped.
I will quote it:
You’ve written a function to determine if a door’s src contains the game-ending ChoreBot image. Now you must apply this logic into currently existing JavaScript functions.
The playOver() function now needs a door argument. After the if statement in this function, add an else if condition that checks if the isBot() will equate to true if you pass the door as the isBot() argument.
Now here is where I’m confused…there was no previous task relating to writing a playOver() function or what if/else statement to place inside of it.
Am I supposed to figure this out myself? And if so, how? Can someone give me a nudge in the right direction or at least quell my confusion?
As I said before, my code isn’t the issue, I’ve got that part. But if you need the code anyway for reference:
let closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg"; let startButton = document.getElementById('start');
//Global variables for doors 1-4
let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
let doorImage4 = document.getElementById('door4');
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";
let loveDoorPath = "https://cq3qna.dm.files.1drv.com/y4mTV0VNAOSTaP28o3ufnSfUj3yzheK_ZO598yGChoqE-bOVWLLe9uO2jFmfJAFsXXOYncta9laeG0xTiP2A-y6ABmVGZncOkaSr1I6ArZFWvSePGjwryHMqHDrfnuSS4Bi8yYqgb1oHfv0UE6SzyKNspmqCLzvSgCuLaVHN8U44wL8kZh_1WHZJPFyebFAQLvRbueLoMhW18ydMm8ND4hzXQ?width=140&height=256&cropmode=none";
//Global Variables for randomDoor
let numClosedDoors = 4;
let openDoor1;
let openDoor2;
let openDoor3;
let openDoor4;
const playOver = (door) => {
if (door === )
}
const isLove = (door) => {
if (door.src === loveDoorPath) {
return true;
} else {
return false;
}
}
//Preventing the "cheaters"
const isClicked = (door) => {
if (door.src === closedDoorPath) {
return false;
} else {
return true;
}
}
//playDoor Functions
const playDoor = () => {
numClosedDoors--;
if (numClosedDoors === 0) {
gameOver('win');
}
}
//Random door generator for game
const randomDoorGen = () => {
let choreDoor = Math.floor(Math.random() * numClosedDoors);
if (choreDoor === 0) {
openDoor1 = loveDoorPath;
openDoor2 = beachDoorPath;
openDoor3 = spaceDoorPath;
openDoor4 = botDoorPath;
} else if (choreDoor === 1) {
openDoor4 = loveDoorPath;
openDoor2 = botDoorPath;
openDoor3 = beachDoorPath;
openDoor1 = spaceDoorPath;
} else if (choreDoor === 2) {
openDoor3 = loveDoorPath;
openDoor1 = spaceDoorPath;
openDoor2 = botDoorPath;
openDoor4 = beachDoorPath
} else {
openDoor2 = loveDoorPath;
openDoor1 = beachDoorPath;
openDoor3 = botDoorPath;
openDoor4 = spaceDoorPath;
}
}
//Functions for opening doors
door1.onclick = () => {
doorImage1.src = openDoor1;
playDoor();
}
door2.onclick = () => {
doorImage2.src = openDoor2;
playDoor();
}
door3.onclick = () => {
doorImage3.src = openDoor3;
playDoor();
}
door4.onclick = () => {
doorImage4.src = openDoor4;
playDoor();
}
const gameOver = (str) => {
if (str === 'win') {
startButton.innerHTML = "You win! Wanna play again?";
}
}
console.log(randomDoorGen());
Earlier (in a topic on this same project) I made a statement which needs to be walked back, something to effect that there is no event, onclick. However a little digging and what do you know, there is one, a global event. Will need to track down that topic and amend my statement.
I have yet to find why the arrow function does work as a handler, and actually breaks the other working handlers, as well.
How much of your program is working as expected? I know this does not address your question, as such, but hopefully we’re getting there and will have a working version soon to compare to yours. Bear with me, please/thanks.
The program works to the extent where each function operates normally. I changed the onclick function to the shorthand expression because it’s easier for me to remember. I don’t know what code to place inside of the
playOver() function. That’s where I’m stumped.
I’ve been preoccupied with other things and have been popping back in periodically to keep plugging away at the project. Should get enough time tonight to finish it up and get caught up to where you are.
I’m assuming there is a reset of variables and closing of all doors before restarting another game.
You know what? I might be mistaken, I am still going to patiently wait for you to check, but I think this might be a spelling error on part of the task. If I’m correct, that is supposed to be playDoor() not playOver() function. Either that or the playDoor() function is supposed to be a playOver() function instead. I’m going to try completing with this newfound knowledge and see if the game works properly.
I’m working on it now, you were right, my doors aren’t clickable. I don’t remember what changes I made to make that happen. I’m pouring over the code on my own personal text editor to see where I went wrong.
Are you interested in refactoring your code now that it’s running? Refactoring is the process of simplifying functions and statements, minimizing listener/handlers, using viable data structures as opposed to lots of loose variables, and so on. The program runs fine out of the box but it can be simplified, and the HTML made less obtrusive.
We need to first come up with a list of concerns, and then look into ways each can be addressed. That’s the theory side, which stems from a number of practical and style concerns, not least of which are accesibility and readability.
Looking at the HTML, how many img tags are there? How many are window dressing? How many have repeated attribute values? This is a concern for a number of reasons, but the above two mentioned are enough to justify taking a second look.
This is what we are after in terms of unobtrusive HTML…
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chore Door!</title>
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div id="header"></div>
<div class="title-row">
<p class="instructions-title">Instructions</p>
</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 id="doors" class="door-row">
<img class="door-frame" src="#" title="0">
<img class="door-frame" src="#" title="1">
<img class="door-frame" src="#" title="2">
</div>
<div id="start" class="start-row"></div>
<script src="./script.js"></script>
</body>
</html>
Getting there is the refactoring part. It’s involved so buckle up.
Okay, I ran into another issue while celebrating the functions working. Now I’m trying to figure out where to place the if statement in the door.onclick functions. so that the game wont default win when you open all of the doors.
I’m stuck again at the 
