Chore door project, step 22

I’m doing the chore door project in the Javascript Interactive Websites course: https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door

On step 22, it asks me to create two images with the url given: https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg

So, I typed

<div class="title-row">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
      </div>

However, when I run the code, the stars don’t appear.

Note that .title-row is not referenced in the .css or .js file at this stage, so it can’t be that I’ve somehow accidentally hidden it.

Has the image somehow been removed? Or is there a problem with my code?

(HTML)

Summary
<!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>
    <div class="header">
      <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg">
      <div class="title-row">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
      </div>
      <div id="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>
    <script type="text/javascript" src="./script.js"></script>
  </body>
</html>

(CSS)

Summary
body {
  background-color: #010165;
  margin: 0px;
}

.header {
  background-color: #00ffff;
  text-align: center;
}

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

(JS)

Summary
let doorImage1 = document.getElementById("door1");
let doorImage2 = document.getElementById("door2");
let doorImage3 = document.getElementById("door3");
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";

door1.onclick = () => {
  doorImage1.src = botDoorPath;
};
door2.onclick = () => {
  doorImage2.src = beachDoorPath;
};
door3.onclick = () => {
  doorImage3.src = spaceDoorPath;
};

also if I check the console it responds with the 403 for me, do you see that as well?
if so it could be a permissions issue.

okay so I did some digging, and it’s there, it has inline styles of 10px x 10px which is making it very small! and the blue is hard to see.

have a look at it in the inspector and edit the inline styles, then go from there.
Have fun :),

ps, all your code so far is fine, but in the Js, you seem to be referencing the image id, rather than the variable in which you are storing the ID.

Unless you’ve declared that else where, you may wanna reference

doorImage1.onclick … instead of door1.onclick