Build a Moon Orbit - Build a Moon Orbit-Moon is off to the side

HTML-CSS
1

Tell us what’s happening:

I passed the assignment but my moon doesn’t go around the earth. How can I share my code with you for help with getting the moon to go aroudn the earth without posting solution code?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>moon</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <script src="index.js"></script>
        <div class="space">
  <div class="earth">
      </div>
  <div class="orbit">
    <div class="moon"></div>
  </div>
</div>

  </body>
</html>




/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  color: white;
}
.space {
  width: 200px;
  height: 200px;
  background-color: black;
  margin: 0;
  padding: 0;
}
.earth {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
}

/* Orbit Container */
.orbit {
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-50%, -50%); /* Centers the orbit within the space */
  animation-name: orbit;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin: 0;
  padding: 0;
  color: yellow;
  border-radius: 50%; /* Make the orbit a circular path */
}

.moon {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0; 
  left: 50%; 
  transform: translateX(-50%); 
  background-color: lightblue;
  border-radius: 50%; /* Make the moon circular */
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  100% {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Challenge Information:

Build a Moon Orbit - Build a Moon Orbit

2

Hi
two things to point out:

  1. Your earth and moon are in space, right? So, why not position them relative to space? That way, the moon can rotate perfectly around the earth.
  2. Even if you set the position of your space to relative, you’ll see the moon rotating around the Earth but crossing the bounds of space, so you might want to remove the translate properties inside your keyframe. Just keep the rotate for 0% and 100%.

Try those and see if it works. If you’re still facing issues, we’ll give it another go.
Happy coding!

3

I will give this a try later tonight. If you haven’t heard back from me, it means it worked. Thanks.

1 Like
4

Hi! I was working on the same task too and passed even if the moon was orbiting on the side. What I did to fix it was to add the the transform-origin property that was missing in the .orbit selector.

code removed by moderator

This makes the orbit rotation center itself.

Although the rotation radius is very small because of the translate(-50%, -50%) value in the @keyframes orbit. In order to make the radius larger, the value must be positive i.e. translate(50%, 50%). Although doing that means not passing the test because Rules 29 & 31 explicitly said to use translate(-50%, -50%).

Here’s my code that working (though with the very small radius) but still passed:

code removed by moderator
1 Like
5

hi @annjoelle46

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

6

Sorry I just saw this as your reply. I will try your idea as a variation. Sometimes when I do these assignments i do two or three variations. Thank you for the suggestion.