Created
March 11, 2021 12:17
-
-
Save bogoreh/6f469e4d3d97c6dd1386af30a4075e93 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Challenge: Create a solar system</title> | |
| <style> | |
| body { | |
| background-color: rgb(56, 91, 128); | |
| padding: 10px; | |
| } | |
| .planet { | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 50%; | |
| text-align: center; | |
| padding: 10px; | |
| position: relative; | |
| } | |
| .moon { | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background: rgb(237, 237, 237); | |
| } | |
| .morelse { | |
| background-color: rgba(153, 34, 153, 0.5); | |
| text-decoration: underline; | |
| text-align: center; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| //Add a heading | |
| var textEl = document.createElement("h1"); | |
| //create style tag | |
| var cursiveEl = document.createElement("em"); | |
| //create a text node | |
| var cursiveText = document.createTextNode("Solar system"); | |
| //append children | |
| cursiveEl.appendChild(cursiveText); | |
| textEl.appendChild(cursiveEl); | |
| document.body.appendChild(textEl); | |
| //apply css to a heading | |
| textEl.style.color = "red"; | |
| textEl.style.textAlign = "center"; | |
| //apply class rule to a heading | |
| cursiveEl.className = "morelse"; | |
| var crEl = document.createElement("div"); | |
| crEl.className = "planet"; | |
| crEl.style.backgroundColor = "rgb(61, 179, 126)"; | |
| document.body.appendChild(crEl); | |
| var moonEl = document.createElement("div"); | |
| moonEl.className = "moon"; | |
| crEl.appendChild(moonEl); | |
| crEl.style.left = "5%"; | |
| //The second planet and moon | |
| var crEl2 = document.createElement("div"); | |
| crEl2.className = "planet"; | |
| crEl2.style.backgroundColor = "rgb(178, 179, 152)"; | |
| //move the planet right and up | |
| crEl2.style.left = "80%"; | |
| crEl2.style.top = "-120px"; | |
| document.body.appendChild(crEl2); | |
| var moonEl2 = document.createElement("div"); | |
| moonEl2.className = "moon"; | |
| crEl2.appendChild(moonEl2); | |
| //Add a paragraph | |
| var otherEl = document.createElement("p"); | |
| //create a text node | |
| var otherText = document.createTextNode("This is a spin-off of a challenge 'Create a solar system'"); | |
| //append a child | |
| otherEl.appendChild(otherText); | |
| //applay class property | |
| otherEl.className = "morelse"; | |
| //append a child | |
| document.body.appendChild(otherEl); | |
| //applay css property to an element | |
| otherEl.style.color = "rgb(200, 200, 200)"; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment