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

Curriculum Help
,
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
https://www.freecodecamp.org/learn/full-stack-developer/lab-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.

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

7

Because the instructions say they should be set to position absolute.

8

I had the same problem as the rest of the students on here with this one. The moon will not rotate around the earth in an even orbit because the instructions have specific parameters that wont allow you to match the example . Can someone from the freeCodeCamp staff please fix this issue? i spent way too long on this project and even ChatGPT could not correct the problem and meet the parameters.

9

we are unable to help you in someone else’s topic, please create your own topic sharing your code

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.