Codecademy Forums

My First Project - ChoreBot, Feedback Welcome

I have just completed the ChoreBot project and I am so happy with it, if anyone has any feedback to make it even better I would welcome it :slight_smile: also just wanted to share it because I’m so happy with it.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Chore Door!</title>
    <link href="./Resources/CleanBot.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div class = "header">
      <img src = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg">
    </div>
    <div 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">
    </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 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">
    </div>
    <div id = "start" class = "start-row">
      Good Luck!
    </div>
    <script type = "text/javascript" src = "./Resources/CleanBot.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-row {
  text-align: center;
}

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

.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;
}

Java:

let doorImage1 = document.getElementById ("door1");
let doorImage2 = document.getElementById ("door2");
let doorImage3 = document.getElementById ("door3");
let startButton = document.getElementById ("start");
let currentlyPlaying = true;

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 numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
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)) {
    gameOver();
  }
}

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

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

door2.onclick = () => {
	if (currentlyPlaying && !isClicked (doorImage2)) {
  doorImage2.src = openDoor2;
  playDoor(doorImage2);
}
}

door3.onclick = () => {
	if (currentlyPlaying && !isClicked (doorImage3)) {
  doorImage3.src = openDoor3;
  playDoor(doorImage3);
}
}

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

const startRound = () => {
  numClosedDoors = 3;
  door1.src = closedDoorPath;
  door2.src = closedDoorPath;
  door3.src = closedDoorPath;
  startButton.innerHTML = "Good Luck!";
  currentlyPlaying = true;
  randomChoreDoorGenerator();
}

const gameOver = (status) => {
  if (status === "win") {
    startButton.innerHTML = "You win! Play again?";
  } else {
    startButton.innerHTML = "Game Over! Play again?"
  }
  currentlyPlaying = false;
}
startRound();
2 Likes

It looks like code written professionally except, perhaps, quite a lot neater and tidier. It is very reminiscent of code i’ve seen on quite major websites. Really well done! Nice one! I hope my code is this good after i’ve done some of these courses.

Congrats and regards from a T0m :slight_smile:

Thank you t0m :slight_smile:

1 Like