{ "componentChunkName": "component---src-templates-challenges-classic-show-tsx", "path": "/learn/front-end-development/lab-moon-orbit/build-a-moon-orbit", "result": {"data":{"challengeNode":{"challenge":{"block":"lab-moon-orbit","demoType":"onClick","title":"Build a Moon Orbit","description":"
\n

In this lab, you will create a simple animation of the Moon's orbit around the Earth using HTML and CSS. The Earth will be at the center of the system, and the Moon will orbit around it.

\n

Objective: Fulfill the user stories below and get all the tests to pass to complete the lab.

\n

User Stories:

\n
    \n
  1. \n

    You should align all the elements to the center of the page by setting the height to 100% of the viewport and setting a flexbox layout in the body element.

    \n
    2. \n
  2. \n

    You should have a div with the class space.

    \n
    3. \n
  3. \n

    Inside the .space div, there should be two more div elements with the class earth and orbit, respectively, in order.

    \n
    4. \n
  4. \n

    Inside the .orbit div, there should be another div with the class moon.

    \n
    5. \n
  5. \n

    The space div should be centered on the page and have a width and height of 200px.

    \n
    6. \n
  6. \n

    The earth div should use absolute positioning. Position the center of the earth div at the halfway point of its parent on both the vertical (top) and horizontal (left) axes. After that, shift the earth div back by half its own width and height, to center it within its parent, .space.

    \n
    7. \n
  7. \n

    The earth div should have a width and height of 100px.

    \n
    8. \n
  8. \n

    The orbit div should have a width and height of 200px.

    \n
    9. \n
  9. \n

    The orbit div should be positioned using absolute positioning. Its bottom right corner should be at the center of the space div using a transform property that shifts it by -50% on both the vertical and horizontal axes.

    \n
    10. \n
  10. \n

    The orbit path for the moon around the Earth should be a circle.

    \n
    11. \n
  11. \n

    The moon div should be positioned using absolute positioning and have a width and height of 30px. The moon div should position itself at the top of the orbit div and be centered horizontally.

    \n
    12. \n
  12. \n

    You should further adjust the horizontal positioning of the moon by moving the element to the left by half of its width.

    \n
    13. \n
  13. \n

    Your .earth and .moon div elements should have a background color and a border-radius of 50% to make them look like planets.

    \n
    14. \n
  14. \n

    You should define a @keyframes orbit animation that rotates the .orbit element 360 degrees around its center. You should apply this animation to the .orbit element with a duration of 5 seconds, a linear timing function, and infinite iterations.

    \n
    15. \n
\n

Note: Be sure to link your stylesheet in your HTML and apply your CSS.

\n
","id":"66a37f37ef5823a313de8c26","hasEditableBoundaries":false,"instructions":null,"notes":null,"challengeType":14,"helpCategory":"HTML-CSS","videoUrl":null,"superBlock":"front-end-development","translationPending":false,"forumTopicId":null,"fields":{"blockName":"lab-moon-orbit","slug":"/learn/front-end-development/lab-moon-orbit/build-a-moon-orbit","tests":[{"text":"

The contents of the body element should be centered on the page by setting the height to 100% of the viewport height, display to flex, justify-content, and align-items to center.

","testString":"\nassert(new __helpers.CSSHelp(document).getStyle('body')?.height === '100vh' && new __helpers.CSSHelp(document).getStyle('body')?.display === 'flex' && new __helpers.CSSHelp(document).getStyle('body')?.justifyContent === 'center'&& new __helpers.CSSHelp(document).getStyle('body')?.alignItems === 'center');"},{"text":"

You should have a main div with the class space.

","testString":"assert(document.querySelector('div')?.getAttribute('class') === 'space');"},{"text":"

The space div should have a width and height of 200px.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.space')?.width === '200px' && new __helpers.CSSHelp(document).getStyle('.space')?.height === '200px');"},{"text":"

You should have a div with the class earth inside the .space div.

","testString":"assert.exists(document.querySelector('div.space div.earth'));"},{"text":"

The earth div should be the first child of the space div.

","testString":"assert(document.querySelector('.space > div')?.getAttribute('class') === 'earth');"},{"text":"

The earth div should have a width and height of 100px.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.earth')?.width === '100px' && new __helpers.CSSHelp(document).getStyle('.earth')?.height === '100px');"},{"text":"

The earth div should use absolute positioning.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.earth')?.position === 'absolute');"},{"text":"

The earth div should have a top and left position of 50%.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.earth')?.top === '50%' && new __helpers.CSSHelp(document).getStyle('.earth')?.left === '50%');"},{"text":"

The earth div should be moved back and up by 50% by setting the transform property to translate(-50%, -50%).

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.earth')?.transform === 'translate(-50%, -50%)');"},{"text":"

You should have a div with the class orbit inside the .space div.

","testString":"assert.exists(document.querySelector('div.space div.orbit'));"},{"text":"

The orbit class div should come after the earth class div.

","testString":"assert(document.querySelector('.earth')?.nextElementSibling?.classList?.contains('orbit'));"},{"text":"

The orbit div should have a width and height of 200px.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.orbit')?.width === '200px' && new __helpers.CSSHelp(document).getStyle('.orbit')?.height === '200px');"},{"text":"

The orbit div should use absolute positioning.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.orbit')?.position === 'absolute');"},{"text":"

The orbit div should be positioned at the center of the space div using a transform property that shifts it by -50% on both the vertical and horizontal axes.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.orbit')?.transform === 'translate(-50%, -50%)');"},{"text":"

You should have a div with the class moon inside the .orbit div.

","testString":"assert.exists(document.querySelector('div.space div.orbit div.moon'));"},{"text":"

The moon div should have a width and height of 30px.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.moon')?.width === '30px' && new __helpers.CSSHelp(document).getStyle('.moon')?.height === '30px');"},{"text":"

The moon div should be positioned using absolute positioning.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.moon')?.position === 'absolute');"},{"text":"

The top edge of the .moon element should be aligned with the top edge of its containing block.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.moon')?.top === '0px');"},{"text":"

You should move the left edge of the .moon element to the center of the containing block (50% from the left side).

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.moon')?.left === '50%');"},{"text":"

The .moon div should be adjusted horizontally by translating it to -50% across the x-axis.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.moon')?.transform === 'translateX(-50%)');"},{"text":"

Your .earth div element should have a background color.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.earth')?.backgroundColor);"},{"text":"

Your .earth element should have border-radius of 50% to make it look like a circle.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.earth')?.borderRadius === '50%');"},{"text":"

Your .moon div element should have a background color.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.moon')?.backgroundColor);"},{"text":"

Your .moon element should have border-radius of 50% to make it look like a circle.

","testString":"assert(new __helpers.CSSHelp(document).getStyle('.moon')?.borderRadius === '50%');"},{"text":"

You should have a @keyframes rule.

","testString":"assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 1);"},{"text":"

Your new @keyframes rule should be named orbit.

","testString":"assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'orbit');"},{"text":"

Your @keyframes orbit rule should have a 0% selector.

","testString":"const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules\nassert(rules?.[0]?.keyText === '0%' || rules?.[0]?.keyText === '0%');"},{"text":"

Your @keyframes orbit rule should have a 100% selector.

","testString":"const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules\nassert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%');"},{"text":"

Your 0% selector should have a transform property set to rotate(0deg) translate(-50%, -50%).

","testString":"assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.style?.transform === 'rotate(0deg) translate(-50%, -50%)');"},{"text":"

Your 100% selector should come after your 0% selector.

","testString":"assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.keyText === '100%')"},{"text":"

Your 100% selector should have a transform property set to rotate(360deg) translate(-50%, -50%).

","testString":"assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.style?.transform === 'rotate(360deg) translate(-50%, -50%)')"},{"text":"

Your .orbit selector should have an animation property set to orbit 5s linear infinite.

","testString":"\nconst orbitStyles = new __helpers.CSSHelp(document).getStyle('.orbit');\nassert(\n orbitStyles?.animationName === \"orbit\" &&\n orbitStyles?.animationDuration === \"5s\" &&\n orbitStyles?.animationTimingFunction === \"linear\" &&\n orbitStyles?.animationIterationCount === \"infinite\"\n);\n"}]},"required":[],"usesMultifileEditor":true,"challengeFiles":[{"fileKey":"indexhtml","ext":"html","name":"index","contents":"\n\n\n\n \n Moon Orbit\n\n\n\n\n\n\n","head":"","tail":"","editableRegionBoundaries":[],"history":["index.html"]},{"fileKey":"stylescss","ext":"css","name":"styles","contents":"","head":"","tail":"","editableRegionBoundaries":[],"history":["styles.css"]}]}}},"pageContext":{"challengeMeta":{"blockHashSlug":"/learn/front-end-development/#lab-moon-orbit","dashedName":"build-a-moon-orbit","certification":"front-end-development","disableLoopProtectTests":false,"disableLoopProtectPreview":false,"superBlock":"front-end-development","block":"lab-moon-orbit","isFirstStep":true,"template":null,"required":[],"nextBlock":"lab-personal-portfolio","nextChallengePath":"/learn/front-end-development/lab-personal-portfolio/build-a-personal-portfolio","prevChallengePath":"/learn/front-end-development/quiz-css-grid/quiz-css-grid","id":"66a37f37ef5823a313de8c26"},"projectPreview":{"challengeData":{"challengeType":14,"challengeFiles":[{"name":"index","ext":"html","contents":"\n\n\n\n \n \n Moon Orbiting Earth\n \n\n\n\n
\n
\n
\n
\n
\n
\n\n\n","head":"","tail":"","history":["index.html"],"fileKey":"indexhtml"},{"name":"styles","ext":"css","contents":"body {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #000;\n}\n\n.space {\n position: relative;\n width: 200px;\n height: 200px;\n}\n\n.earth {\n width: 100px;\n height: 100px;\n background-color: blue;\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 0 20px rgba(0, 0, 255, 0.5);\n}\n\n.orbit {\n width: 200px;\n height: 200px;\n position: absolute;\n transform: translate(-50%, -50%);\n animation: orbit 5s linear infinite;\n}\n\n.moon {\n width: 30px;\n height: 30px;\n background-color: gray;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n box-shadow: 0 0 10px rgb(255, 255, 255);\n}\n\n\n@keyframes orbit {\n 0% {\n transform: rotate(0deg) translate(-50%, -50%);\n }\n\n 100% {\n transform: rotate(360deg) translate(-50%, -50%);\n }\n}","head":"","tail":"","history":["styles.css"],"fileKey":"stylescss"}]}},"id":"/learn/front-end-development/lab-moon-orbit/build-a-moon-orbit"}}, "staticQueryHashes": ["4268002518","813102432"]}