From 527c80ee9bb8c0dd8a371f0aa7a60f4a7b177822 Mon Sep 17 00:00:00 2001 From: the-darkesttt <86405617+the-darkesttt@users.noreply.github.com> Date: Tue, 9 Aug 2022 12:11:28 +0300 Subject: [PATCH] Js dom task (#57) * js-dom-task * newlines at the ends * another newline * remove useless lines * small fixings --- submissions/the-darkesttt/js-dom/index.html | 62 +++++++++ submissions/the-darkesttt/js-dom/script.js | 78 ++++++++++++ submissions/the-darkesttt/js-dom/style.css | 131 ++++++++++++++++++++ 3 files changed, 271 insertions(+) create mode 100644 submissions/the-darkesttt/js-dom/index.html create mode 100644 submissions/the-darkesttt/js-dom/script.js create mode 100644 submissions/the-darkesttt/js-dom/style.css diff --git a/submissions/the-darkesttt/js-dom/index.html b/submissions/the-darkesttt/js-dom/index.html new file mode 100644 index 0000000000..dbe3e4b169 --- /dev/null +++ b/submissions/the-darkesttt/js-dom/index.html @@ -0,0 +1,62 @@ + + + + + + + Dom task + + + + + + + + + + +
+

Solar System

+
+ +
+
+

Solar system

+
+ The Solar Systemis the gravitationally bound system of the Sun and the objects that orbit it. It formed 4.6 billion years ago from the gravitational collapse of a giant interstellar molecular cloud. The vast majority (99.86%) of the system's mass is in the Sun, with most of the remaining mass contained in the planet Jupiter. The four inner system planets—Mercury, Venus, Earth and Mars—are terrestrial planets, being composed primarily of rock and metal. The four giant planets of the outer system are substantially larger and more massive than the terrestrials. +
+
+
+
+
+ + + + diff --git a/submissions/the-darkesttt/js-dom/script.js b/submissions/the-darkesttt/js-dom/script.js new file mode 100644 index 0000000000..0114a919ed --- /dev/null +++ b/submissions/the-darkesttt/js-dom/script.js @@ -0,0 +1,78 @@ +const solarSystem = { + title: 'Solar system', + desc: "The Solar Systemis the gravitationally bound system of the Sun and the objects that orbit it. It formed 4.6 billion years ago from the gravitational collapse of a giant interstellar molecular cloud. The vast majority (99.86%) of the system's mass is in the Sun, with most of the remaining mass contained in the planet Jupiter. The four inner system planets—Mercury, Venus, Earth and Mars—are terrestrial planets, being composed primarily of rock and metal. The four giant planets of the outer system are substantially larger and more massive than the terrestrials. ", +}; + +const planets = [ + { + title: 'Mercury', + desc: "Mercury is the smallest planet in the Solar System and the closest to the Sun. Its orbit around the Sun takes 87.97 Earth days, the shortest of all the Sun's planets. It is named after the Roman god Mercurius (Mercury), god of commerce, messenger of the gods, and mediator between gods and mortals, corresponding to the Greek god Hermes (Ἑρμῆς). Like Venus, Mercury orbits the Sun within Earth's orbit as an inferior planet, and its apparent distance from the Sun as viewed from Earth never exceeds 28°. This proximity to the Sun means the planet can only be seen near the western horizon after sunset or the eastern horizon before sunrise, usually in twilight.", + }, + { + title: 'Venus', + desc: "Venus is the second planet from the Sun and is named after the Roman goddess of love and beauty. As the brightest natural object in Earth's night sky after the Moon, Venus can cast shadows and can be visible to the naked eye in broad daylight. Venus's orbit is smaller than that of Earth, but its maximal elongation is 47°; thus, at latitudes with a day-night cycle, it is most readily visible for up to a few hours following the start of sunset or before sunrise. At times, it has been seen in a completely dark sky. Venus orbits the Sun every 224.7 Earth days.It has a synodic day length of 117 Earth days and a sidereal rotation period of 243 Earth days.", + }, + { + title: 'Earth', + desc: "Earth is the third planet from the Sun and the only astronomical object known to harbor life. While large volumes of water can be found throughout the Solar System, only Earth sustains liquid surface water. About 71% of Earth's surface is made up of the ocean, dwarfing Earth's polar ice, lakes, and rivers. The remaining 29% of Earth's surface is land, consisting of continents and islands. Earth's surface layer is formed of several slowly moving tectonic plates, interacting to produce mountain ranges, volcanoes, and earthquakes. Earth's liquid outer core generates the magnetic field that shapes Earth's magnetosphere, deflecting destructive solar winds.", + }, + { + title: 'Mars', + desc: "Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, being larger than only Mercury. In the English language, Mars is named for the Roman god of war. Mars is a terrestrial planet with a thin atmosphere, and has a crust primarily composed of elements similar to Earth's crust, as well as a core made of iron and nickel. Mars has surface features such as impact craters, valleys, dunes, and polar ice caps. It has two small and irregularly shaped moons: Phobos and Deimos.", + }, + { + title: 'Jupiter', + desc: "Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, but slightly less than one-thousandth the mass of the Sun. Jupiter is the third brightest natural object in the Earth's night sky after the Moon and Venus, and it has been observed since prehistoric times. It was named after the Roman god Jupiter, the king of the gods.", + }, + { + title: 'Saturn', + desc: "Saturn is the sixth planet from the Sun and the second-largest in the Solar System, after Jupiter. It is a gas giant with an average radius of about nine and a half times that of Earth. It has only one-eighth the average density of Earth; however, with its larger volume, Saturn is over 95 times more massive", + }, + { + title: 'Uranus', + desc: "Uranus is the seventh planet from the Sun. Its name is a reference to the Greek god of the sky, Uranus, who, according to Greek mythology, was the great-grandfather of Ares (Mars), grandfather of Zeus (Jupiter) and father of Cronus (Saturn). It has the third-largest planetary radius and fourth-largest planetary mass in the Solar System. Uranus is similar in composition to Neptune, and both have bulk chemical compositions which differ from that of the larger gas giants Jupiter and Saturn. ", + }, + { + title: 'Neptune', + desc: "Neptune is the eighth planet from the Sun and the farthest known solar planet. In the Solar System, it is the fourth-largest planet by diameter, the third-most-massive planet, and the densest giant planet. It is 17 times the mass of Earth, and slightly more massive than its near-twin Uranus. Neptune is denser and physically smaller than Uranus because its greater mass causes more gravitational compression of its atmosphere. It is referred to as one of the solar system's two ice giant planets (the other one being Uranus)." + }, +]; + +const solarTitle = document.querySelector('.wrapper__title'); +const asideList = document.querySelector('.aside__list'); +const solarSystemTitle = document.querySelector('.container__title'); +const solarSystemDesc = document.querySelector('.container__desc'); + +let selected; + +solarTitle.addEventListener('click', function() { + solarSystemTitle.innerText = solarSystem.title; + solarSystemDesc.innerText = solarSystem.desc; + + if (selected) { + selected.classList.remove('focused'); + } +}); + +asideList.addEventListener('click', function(event) { + const listTarget = event.target; + if (listTarget.tagName === 'UL') return; + highlightFocused(listTarget); + + const listTargetTitle = listTarget.innerText; + + const thatInPlanets = planets.filter(item => { + return item.title === listTargetTitle; + }); + + solarSystemDesc.innerText = thatInPlanets[0].desc; + solarSystemTitle.innerText = thatInPlanets[0].title; +}); + +function highlightFocused(item) { + if (selected) { + selected.classList.remove('focused'); + } + selected = item; + selected.classList.add('focused'); +} diff --git a/submissions/the-darkesttt/js-dom/style.css b/submissions/the-darkesttt/js-dom/style.css new file mode 100644 index 0000000000..e63874718d --- /dev/null +++ b/submissions/the-darkesttt/js-dom/style.css @@ -0,0 +1,131 @@ +:root { + --border-color: #cecece; + --aside-bg-color: #e8ebe6; + --dark-color: rgb(21, 21, 21); +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Montserrat', sans-serif; + transition: .3s; +} + +body { + background-color: var(--dark-color); + background-image: url(img/planets/earth.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +.wrapper { + max-width: 1000px; + margin: 0 auto; + padding: 0 15px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +.wrapper__title { + margin-bottom: 30px; + cursor: pointer; + + text-align: center; + background-color: transparent; + color: #fff; +} + +.inner_wrapper { + width: 100%; + display: grid; + grid-template-columns: 1fr 2fr; + min-height: 400px; + border-radius: 8px; + border: 2px solid var(--border-color); +} + +/* aside -------------------------------------------------------------- */ + +.aside { + background-color: var(--aside-bg-color); + display: flex; + border-radius: 5px 0px 0px 5px; +} + +.aside__list { + list-style: none; + display: flex; + flex-direction: column; + width: 100%; +} + +.aside__item { + padding: 15px; + cursor: pointer; + color: var(--dark-color); + border-radius: 5px 0px 0px 5px; +} + +.focused { + background-color: var(--dark-color); + color: #fff; + opacity: .8; +} + +.aside__item:not(:last-child){ + border-bottom: 2px solid var(--border-color); +} + +/* main --------------------------------------------------------------- */ + +.main { + display: flex; + background-color: rgba(21, 21, 21, 0.857); + border-radius: 0px 5px 5px 0px; +} + +.container { + padding: 30px; + color: #fff; +} + +.container__title { + margin-bottom: 20px; +} + +.container__img { + max-width: 100%; +} + +@media screen and (max-width: 768px) { + .inner_wrapper { + min-height: 500px; + } +} + +@media screen and (max-width: 530px) { + + .wrapper { + margin: 100px 0; + } + + .inner_wrapper { + grid-template-columns: 1fr; + text-align: center; + } + + .aside { + text-align: center; + border-radius: 5px 5px 0px 0px; + } + + .main { + min-height: 400px; + border-radius: 0px 0px 5px 5px; + } +}