Hi guys,
So like many others it seems. I am stuck at step 45 on the Chore Door project:
https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door
My problem is that before moving onto Lets make this act like a game! part 1, the .onclick was working fine and now the doors don’t open.
It is probably a typo but I just cant see it, the error that the console it throwing me is:
"Uncaught SyntaxError: Malformed arrow function parameter list at https://cdpn.io/boomboom/v2/index.html?editors=1111&key=iFrameKey-a5531809-2895-b073-d34e-25efbc36cdcb:154"
I have no idea what this means, I have looked at all my arrow functions and they seem fine?
Here is my code:
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-------------------->
<header class='header'>
<img src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg'>
</header>
<!-------------------INSTRUCTIONS TITLE-------------------->
<section class='title-row'>
<img src=https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg>
<p class='instructions-title'>Instructions</p>
<img src=https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg>
</section>
<!-------------------INSTRUCTIONS-------------------->
<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>
<!-------------------DOORS-------------------->
<section class='door-row'>
<img id='door1' class='door-frame' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg'>
<img id='door2' class='door-frame' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg'>
<img id='door3' class='door-frame' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg'>
</section>
<!-------------------STATUS-------------------->
<section id='start' class='start-row'>
Good Luck!
</section>
<script type='text/javascript' src='./script.js'></script>
</body>
</html>
CSS:
body {
background-color: #010165;
margin: 0px;
}
/*-------------HEADER/LOGO--------------*/
.header{
background-color: #00ffff;
padding: 10px;
text-align: center;
}
/*-------------GAME TITLE--------------*/
.title-row{
margin-top:42px;
margin-bottom:21px;
text-align:center;
}
/*-------------INSTRUCTIONS--------------*/
.instructions-title{
display: inline-block;
font-size:18px;
color: #00ffff;
font-family: 'Work Sans';
padding: 0 10px
}
.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;
}
/*-------------DOORS--------------*/
.door-row{
text-align: center;
}
.door-frame {
cursor: pointer;
padding: 10px;
}
/*-------------STATUS--------------*/
.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;
}
JavaScript:
//doors
let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
const numClosedDoors = 3;
//open door theme
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';
//open doors
let openDoor1;
let openDoor2;
let openDoor3;
//
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 if (choreDoor === 2){
openDoor3 = botDoorPath;
openDoor1 = spaceDoorPath;
openDoor2 = beachDoorPath;
}
};
//door click
doorImage1.onclick = () => {
doorImage1.src = openDoor1
};
doorImage2.onclick = () => {
doorImage2.src = openDoor2
};
doorImage3.onclick = () => {
doorImage3.src = openDoor3
};
randomChoreDoorGenerator()
Thank you for looking it over.