To make this more efficient

Hi Team,

If anyone has had issues, i had to play around with some variable names (handing in doorImage1 rather than door and finally got mine working. If anyone has any ideas to make this more efficient, please let me know!

// global variables
let doorImage1 = document.getElementById(‘door1’);
let doorImage2 = document.getElementById(‘door2’);
let doorImage3 = document.getElementById(‘door3’);
let startButton = document.getElementById(‘start’);
let numClosedDoors = 3;
let currentlyPlaying = true;
let openDoor1;
let openDoor2;
let openDoor3;
const closedDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg’;

// images behind the doors
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’;

// Check if the bot was found!
const isBot = (door) => {
if(door.src === botDoorPath) {
return true;
} else {
return false;
}
}

// function to check if the door has been clicked
const isClicked = (door) => {
if (door.src === closedDoorPath) {
return false;
} else {
return true;
}
}

// play the doors
const playDoor = (door) => {
numClosedDoors–;
// decrease numClosedDoors every time its called
if (numClosedDoors === 0) {
gameOver(‘win’); }
else if (isBot(door)) {
gameOver();
}
}

// start the round
const startRound = () => {
currentlyPlaying = true;
numClosedDoors = 3;
startButton.innerHTML = ‘Good Luck!’;
doorImage1.src = closedDoorPath;
doorImage2.src = closedDoorPath;
doorImage3.src = closedDoorPath;
randomChoreDoorGenerator();
}

// end the game
const gameOver = (status) => {
if(status === ‘win’) {
startButton.innerHTML = ‘You win! Play again?’;
currentlyPlaying = false;
}
else {startButton.innerHTML = ‘Game over! Play again?’;
currentlyPlaying = false;
}
}

// randommize the Chorebot
const randomChoreDoorGenerator = () => {
const 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;
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;
}
}

// on click of door
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();
}
}

startRound();

I am still sorting through this but I am having issues at step 45. When I click the door it is replaced by a broken file image:

Here is a link to my Git repository with my work thus far… Any glaring obvious mistakes? I’ve been stuck for three days now on this issue :laughing:

My apologies if this is the wrong place to post this or if I should have posted this to a new thread.

I noticed a number of HTML elements with scrunched up attributes, including the script.js element. Be sure to separate all attributes with a single space.

<script type="text/javascript"src="script.js"></script>

should be,

<script type="text/javascript" src="script.js"></script>
1 Like

Thanks @mtf I fixed that but it still is not working… The repository is updated to reflect my recent debugging efforts

Will take another look. It’s pretty hard to spot any errors.

So you know, the convention in writing attributes is to not use whitespace where it is not necessary.

type="text/javascript" src="..."

vs.

type = "text/javascript" src = "..."

just so long as there is a space between the attributes.

Spotted an error…

} else { (choreDoor === 2);

else does not take a condition.

} else {

}
1 Like

Let us know when you sort that out and we can take another look for other possible concerns.

Oops noobie error number 1,102 :grimacing:

I fixed that, the problem is still there.

Can you open the console and see what the values are for openDoor1, etc.

  > openDoor1
 <- %should_be_image_URL%

I sort of figured it out. Line 25 reads:

let numCLosedDoors = 3;

it should say:

let numClosedDoors = 3;

:face_with_head_bandage:

Now when I click the door I do not get a broken photo icon. However, now the doors do not open randomly. Instead it is always the robot first, than the beach, than space…


For my future understanding - you asked me to:

Would I do that by typing:

console.log(openDoor1)

or

return openDoor1

??

I am not sure how to accomplish what you had asked…

FYI - in the tutorial video at the 37m40s mark you can see that the demo works with the else statement condition showing (choreDoor === 2);

Figured out why:

door1.onclick = () => {
  doorImage1.src = botDoorPath;
};

door2.onclick = () => {
  doorImage2.src = beachDoorPath;
};

door3.onclick = () => {
  doorImage3.src = spaceDoorPath;
};

Should read:

door1.onclick = () => {
  doorImage1.src = openDoor1;
};

door2.onclick = () => {
  doorImage2.src = openDoor2;
};

door3.onclick = () => {
  doorImage3.src = openDoor3;
};

Yes, very hard to spot that one if you’re 65. Good on you to dig deep enough.

>>> list(zip("let numCLosedDoors = 3;", "let numClosedDoors = 3;"))
[('l', 'l'), ('e', 'e'), ('t', 't'), (' ', ' '), ('n', 'n'), ('u', 'u'), ('m', 'm'), ('C', 'C'), ('L', 'l'), ('o', 'o'), ('s', 's'), ('e', 'e'), ('d', 'd'), ('D', 'D'), ('o', 'o'), ('o', 'o'), ('r', 'r'), ('s', 's'), (' ', ' '), ('=', '='), (' ', ' '), ('3', '3'), (';', ';')]
>>> 

Ignore that this is another language. Just locate the tuple, with,

 ('L', 'l')

That is the only pairing with any disparity. Total segue, yes, but also a big Hooray!.

yes. In the console we don’t have to log out, though. It will echo responses to our commands.

 > openDoor1    // command
<- %the_URL%    // response

We would use console.log() in our code to send periodic information to the console for us to inspect. When in the console, we talk directly to the terminal, not our program.

1 Like

This sounds really cool. However, it went over my head :laughing:

How do I open the console within the Codecademy lesson? I entered:

> openDoor1

at the bottom of the script.js file and nothing happened…

I am in the middle of the Building Interactive JavaScript Websites lesson. Once I get through it I will jump into the Learn the Command Line lesson, perhaps that will clear things up for me.

Thank you very much. I am still trying to wrap my mind around thinking in JS logic… However, in the meantime these big “Ah-ha” moments are what keep me going. I guess I like solving problems.

Thank you very much for your guidance on this, I really do appreciate it @mtf

1 Like

Ctrl + Shift + J works in Chrome. else, Right-click, Inspect > Console

1 Like

That is awesome, I did not know how to do that until now. Pretty cool feature.

1 Like

Cool! Glad that you discovered this feature. It is a world of its own.

If you use Chrome, then you can bookmark, about:blank.

Do that, and put the bookmark on your bookmarks bar where you can always see it. When you click it you get, guess what? A blank page. That is where to start a Console session so there is no artefact of the default page, or any other interference. This is a clean slate.

Ctrl + Shift + J and into the console you plunge. A clean browser window is at the top but we can ignore that. Using only the console, how might we get output to appear in that window? That’s not the current aim of this exercise, but definitely put it on the back burner for later. I’d love to see how you address this. Later, though.

The console only speaks one language… JavaScript, or ECMAScript as it were. Today we refer to the language as ES6, or ES7, &c. as it matures. I’m thinking that the community would like to shed its JS skin and adopt the ES one, instead. It’s all semantics from where we stand. Just know the language we are expected to use to communicate with the console.

Responses are instant. Enter a command in the language the interpreter can understand and the code is executed (or an error message is presented) and the result is echoed to the display.

Try it out.

 > Math.PI * 10 ** 2
<- 314.1592653589793

This is great stuff @mtf Thank you. Lots of rabbit holes to travel down :smile: