From 46e3ec46d026f4c2447d1841c8665fe60bc01fe7 Mon Sep 17 00:00:00 2001 From: Volodymyr Franchuk Date: Thu, 1 Sep 2022 15:04:40 +0300 Subject: [PATCH 1/4] Finished DOM practice --- submissions/franchukv/dom-api/index.html | 51 ++ submissions/franchukv/dom-api/script.js | 135 ++++++ submissions/franchukv/dom-api/style.css | 567 +++++++++++++++++++++++ 3 files changed, 753 insertions(+) create mode 100644 submissions/franchukv/dom-api/index.html create mode 100644 submissions/franchukv/dom-api/script.js create mode 100644 submissions/franchukv/dom-api/style.css diff --git a/submissions/franchukv/dom-api/index.html b/submissions/franchukv/dom-api/index.html new file mode 100644 index 0000000000..ab0e265d9c --- /dev/null +++ b/submissions/franchukv/dom-api/index.html @@ -0,0 +1,51 @@ + + + + + + + + + Franchukv - DOM practice + + + + +
+ +
+
+

Hmm, was it a bird or a f*@king Icarus?

+ Just click on the card to read about air sport. +
+
+ +
+ + +
+
+
+ +
+
+
+ + + +
+ + + + + + \ No newline at end of file diff --git a/submissions/franchukv/dom-api/script.js b/submissions/franchukv/dom-api/script.js new file mode 100644 index 0000000000..9753f0eade --- /dev/null +++ b/submissions/franchukv/dom-api/script.js @@ -0,0 +1,135 @@ +const mainContent = document.querySelector('.content'); +const navigation = document.querySelector('.cards'); +const startHeader = document.querySelector('.header'); +const startNav = document.querySelector('.menu'); +const resetBtn = document.querySelector('.reset-btn'); +const burgenBtn = document.querySelector('.burger'); +const burgenIcon = document.querySelector('.burger-icon'); +const footer = document.querySelector('.footer'); + + +const data = { + 'Sky Diving': { + img: 'img/sky_diving.jpg', + text: "

The sport traces its beginnings to the descents made from a hot-air balloon by the French aeronaut André-Jacques Garnerin in 1797, but modern skydiving is usually performed from a propeller-driven airplane. At events such as the annual World Free Fall Convention in Quincy, Illinois, however, parachutists are afforded the opportunity to jump from such diverse craft as hot-air balloons, helicopters, and a Boeing 727.

Typical jump altitudes in modern times for experienced skydivers range from 7,500 to 15,000 feet (2,300 to 4,600 metres) above ground level, yielding a freefall time of between 40 and 85 seconds.

", + }, + 'Wingsuit Flying': { + img: 'img/wingsuit_flying.jpg', + text: "

The sport of skydiving using a webbing-sleeved jumpsuit called a wingsuit to add wetted area to the diver's body and generate increased lift, which allows extended air time by gliding flight rather than just free falling. The modern wingsuit, first developed in the late 1990s, uses a pair of fabric membranes stretched flat between the arms and flanks/thighs to imitate an airfoil, and often also between the legs to function as a tail and allow some aerial steering.

Like all skydiving disciplines, a wingsuit flight almost always ends by deploying a parachute, and so a wingsuit can be flown from any point that provides sufficient altitude for flight and parachute deployment – a drop aircraft, or BASE-jump exit point such as a tall cliff or mountain top. The wingsuit flier wears parachuting equipment specially designed for skydiving or BASE jumping. While the parachute flight is normal, the canopy pilot must unzip arm wings (after deployment) to be able to reach the steering parachute toggles and control the descent path.

", + }, + 'Gliding': { + img: 'img/gliding.jpg', + text: "

Gliding is a recreational activity and competitive air sport in which pilots fly unpowered aircraft known as gliders or sailplanes using naturally occurring currents of rising air in the atmosphere to remain airborne. The word soaring is also used for the sport.

Gliding as a sport began in the 1920s. Initially the objective was to increase the duration of flights but soon pilots attempted cross-country flights away from the place of launch. Improvements in aerodynamics and in the understanding of weather phenomena have allowed greater distances at higher average speeds. Long distances are now flown using any of the main sources of rising air: ridge lift, thermals and lee waves. When conditions are favourable, experienced pilots can now fly hundreds of kilometres before returning to their home airfields; occasionally flights of more than 1,000 kilometres (621 mi) are achieved.

Some competitive pilots fly in races around pre-defined courses. These gliding competitions test pilots' abilities to make best use of local weather conditions as well as their flying skills. Local and national competitions are organized in many countries, and there are biennial World Gliding Championships. Techniques to maximize a glider's speed around the day's task in a competition have been developed, including the optimum speed to fly, navigation using GPS and the carrying of water ballast. If the weather deteriorates pilots are sometimes unable to complete a cross-country flight.

" + }, + 'Hang gliding': { + img: 'img/hang_gliding.jpg', + text: "

The air sport or recreational activity in which a pilot flies a light, non-motorised foot-launched heavier-than-air aircraft called a hang glider. Most modern hang gliders are made of an aluminium alloy or composite frame covered with synthetic sailcloth to form a wing. Typically the pilot is in a harness suspended from the airframe, and controls the aircraft by shifting body weight in opposition to a control frame.

Early hang gliders had a low lift-to-drag ratio, so pilots were restricted to gliding down small hills. By the 1980s this ratio significantly improved, and since then pilots have been able to soar for hours, gain thousands of feet of altitude in thermal updrafts, perform aerobatics, and glide cross-country for hundreds of kilometers. The Federation Aeronautique Internationale and national airspace governing organisations control some regulatory aspects of hang gliding. Obtaining the safety benefits of being instructed is highly recommended and indeed a mandatory requirement in many countries.

", + }, + 'Paragliding': { + img: 'img/paragliding.jpg', + text: "

The recreational and competitive adventure sport of flying paragliders: lightweight, free-flying, foot-launched glider aircraft with no rigid primary structure. The pilot sits in a harness or lies supine in a cocoon-like 'pod' suspended below a fabric wing. Wing shape is maintained by the suspension lines, the pressure of air entering vents in the front of the wing, and the aerodynamic forces of the air flowing over the outside.

Despite not using an engine, paraglider flights can last many hours and cover many hundreds of kilometres, though flights of one to two hours and covering some tens of kilometres are more the norm. By skillful exploitation of sources of lift, the pilot may gain height, often climbing to altitudes of a few thousand metres.

", + }, + 'Canopy Piloting': { + img: 'img/canopy_piloting.jpg', + text: "

Canopy Piloting is a high speed discipline involving small and very agile parachutes and highly trained pilots to fly them. The competitions are held over a stretch of water for safety reasons and can be watched from just a few meters away from the ground. The athletes accelerate their parachutes by flying one or more steep turns and then plain out over the surface of the water to enter the course. Three classic disciplines define the champion of canopy piloting, that is Accuracy, Speed and Distance.

", + }, +}; + +function createNavigation(item) { + for (item in data) { + let navItem = document.createElement('li'); + navItem.classList.add('cards__item'); + + let h3 = document.createElement('h3'); + h3.classList.add('cards__title'); + h3.textContent = item; + navItem.appendChild(h3); + + navigation.append(navItem); + } +} + +function createSideNavigation() { + startHeader.classList.remove('header-active'); + startNav.classList.remove('start-menu'); + startNav.classList.add('side-menu'); + resetBtn.classList.remove('non-active'); + mainContent.classList.remove('non-active'); + burgenBtn.classList.remove('non-active'); + + if (!mainContent.classList.contains('non-active')) { + footer.classList.add('footer--element-end'); + } +} + +function goToStartPage() { + startHeader.classList.add('header-active'); + startNav.classList.remove('side-menu'); + startNav.classList.add('start-menu'); + resetBtn.classList.add('non-active'); + mainContent.classList.add('non-active'); + burgenBtn.classList.add('non-active'); + startNav.classList.add('_start--marker'); + document.body.classList.remove('_scroll-lock'); + burgenIcon.classList.remove('burger-icon--active'); + footer.classList.remove('footer--element-end'); +} + +function burgerHandler() { + document.body.classList.toggle('_scroll-lock'); + startNav.classList.toggle('side-menu--active'); + burgenBtn.classList.toggle('burger--white'); + burgenIcon.classList.toggle('burger-icon--active'); +} + +function navigationHandler(event) { + if (startHeader.classList.contains('header-active') && startNav.classList.contains('start-menu')) { + createSideNavigation(); + createContent(event.target.textContent); + } + + if (startNav.classList.contains('_start--marker')) { + startNav.classList.remove('side-menu--active'); + startNav.classList.remove('_start--marker'); + burgenBtn.classList.remove('burger--white'); + burgenIcon.classList.remove('burger-icon--active'); + } + + if (startNav.classList.contains('side-menu--active')) { + startNav.classList.remove('side-menu--active'); + startNav.classList.remove('_start-marker'); + burgenBtn.classList.remove('burger--white'); + document.body.classList.remove('_scroll-lock'); + burgenIcon.classList.remove('burger-icon--active'); + } + + createContent(event.target.textContent); +} + +function createContent(item) { + mainContent.innerHTML = ''; + + const img = document.createElement('img'); + img.classList.add('content-img'); + img.setAttribute('src', data[item].img); + mainContent.append(img); + + const title = document.createElement('h2'); + title.classList.add('content-title'); + title.textContent = item; + mainContent.append(title); + + const text = document.createElement('div'); + text.classList.add('content-text'); + text.innerHTML = data[item].text; + mainContent.append(text); +} + +function main() { + createNavigation(); + navigation.addEventListener('click', navigationHandler); + resetBtn.addEventListener('click', goToStartPage); + burgenBtn.addEventListener('click', burgerHandler); +} + +main(); \ No newline at end of file diff --git a/submissions/franchukv/dom-api/style.css b/submissions/franchukv/dom-api/style.css new file mode 100644 index 0000000000..f580274e57 --- /dev/null +++ b/submissions/franchukv/dom-api/style.css @@ -0,0 +1,567 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&family=Playfair+Display&display=swap'); + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +* { + box-sizing: border-box; +} + +body { + font-family: 'Playfair Display', serif; + font-size: 16px; + line-height: 1; + height: 100vh; + color: #171617; +} + +.burger { + display: none; +} + +.wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + padding: 0 20px; + max-width: 100%; + min-width: 320px; +} + +.header { + padding: 20px 0; + display: none; +} + +.header-active { + display: block; +} + +.header__container { + display: flex; + flex-direction: column; + align-items: center; + background-image: url(../img/header_bg.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + padding: 120px 20px; + color: #fff; +} + +.header__title { + font-size: calc(30px + (100 * 0.7) * ((100vw - 320px) / 3540)); + display: block; + margin-bottom: 30px; +} + +.header__subtitle { + font-size: calc(16px + (20 * 0.7) * ((100vw - 320px) / 3540)); + letter-spacing: 1px; + text-align: center; +} + +.start-menu { + display: flex; + align-items: center; + justify-content: center; +} + +/* Start side menu */ +.side-menu { + position: fixed; + top: 0; + left: 0; + background-color: #7A624D; + height: 100%; + width: 240px; + z-index: 1; + overflow-x: hidden; + transition: left 0.1s ease 0s; +} + +.side-menu .cards-menu { + display: flex; + flex-direction: column; + justify-content: space-between; + flex-wrap: wrap; +} + +.side-menu .cards__item { + display: flex; + flex-direction: column; + flex-basis: 0; + padding: 30px 20px; + margin-bottom: 0; + cursor: pointer; + color: #fff; +} + +.side-menu .cards__item:hover { + color: #171617; + background-color: #f9f9f9; + +} + +.side-menu .cards__item:first-child .cards__title::after, +.side-menu .cards__item:last-child .cards__title::after { + display: none; +} + +.side-menu .cards__item:first-child:hover .cards__title, +.side-menu .cards__item:last-child:hover .cards__title { + text-decoration: underline; +} + +.side-menu .reset-btn { + padding: 40px 30px 40px; + margin-bottom: 0; + cursor: pointer; + color: #fff; + background-color: #647455; +} + +.side-menu .reset-btn:hover { + color: #171617; + background-color: #d1d1d1; + text-decoration: underline; +} + +/* End Side Menu */ + +/* Start Nav*/ +.cards-menu { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; +} + +.cards__item { + display: flex; + flex-direction: column; + flex-basis: 32%; + padding: 40px 50px 70px 50px; + margin-bottom: 30px; + background-color: #7A624D10; + cursor: pointer; + color: #171617; +} + +.cards__title { + font-size: 24px; + position: relative; +} + +.cards__item:first-child .cards__title::after, +.cards__item:last-child .cards__title::after { + position: absolute; + top: 40px; + left: 0; + text-decoration: underline; + opacity: 0.8; + font-family: 'Noto Serif', serif; + font-size: 16px; +} + +.cards__item:first-child .cards__title::after { + content: 'The sun melted the wax'; +} + +.cards__item:last-child .cards__title::after { + content: 'The sea wet the feathers'; +} + +.cards__item:hover .cards__title { + text-decoration: underline; +} + +.cards__item:first-child:hover .cards__title, +.cards__item:last-child:hover .cards__title { + text-decoration: none; +} + +.cards__item:hover .cards__title::after { + text-decoration: none; +} + +.footer { + display: flex; + align-items: center; + padding: 10px 0; +} + +.copyright { + display: flex; + align-items: center; +} + +.copyright__alt { + margin-right: 5px; +} + +.copyright__text { + text-decoration: underline; + color: #171617; +} + +.copyright__text:hover { + text-decoration: none; +} + +/*End Footer*/ + +@media (max-width: 1600px) { + .cards__item { + padding: 20px 30px 50px 20px; + margin-bottom: 20px; + } +} + +@media (max-width: 860px) { + .cards__item { + padding: 30px 20px 50px 20px; + margin-bottom: 20px; + } +} + +@media (max-width: 767px) { + .cards__item { + padding: 30px 0px 50px 30px; + margin-bottom: 15px; + flex-basis: 49%; + width: 49%; + } + + .footer { + padding: 20px; + } +} + +@media (max-width: 540px) { + + .wrapper { + padding: 0; + } + + .header { + padding-top: 0; + } + + .main { + padding: 0 20px; + } + + .cards__item { + padding: 20px; + } + + .cards__item:first-child, + .cards__item:last-child { + padding: 30px 0 60px 30px; + margin-bottom: 15px; + flex-basis: 100%; + } + + .cards__title { + font-size: 20px; + } + +} + +@media (max-width: 400px) { + + .cards__item:first-child, + .cards__item:last-child { + margin-bottom: 15px; + flex-basis: 100%; + } + +} + +/* Start Content */ + +.content { + max-width: 1015px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.content-img { + display: block; + width: 100%; + height: auto; +} + +.content-title { + font-size: calc(30px + (100 * 0.7) * ((100vw - 320px) / 3540)); + margin-bottom: 40px; + color: #A46753; +} + +.content-text__item { + font-family: 'Noto Serif', serif; + line-height: 22px; + font-size: 17px; + display: block; + margin-bottom: 15px; +} + +@media (min-width: 1024px) { + .content-img { + margin-top: 30px; + padding: 30px; + } + + .content-text__item { + padding-left: 20px; + } + + .footer--element-end { + justify-content: flex-end; + } +} + +@media (max-width: 1700px) { + .content { + margin: 0 auto 0 240px; + } +} + +@media (max-width: 1024px) { + + .content { + margin: 0; + } + + .content-title { + margin-top: 30px; + margin-bottom: 30px; + } + + .burger { + display: block; + position: relative; + background-color: #FFC0CB; + width: 50px; + height: 40px; + padding: 10px; + z-index: 5; + } + + .burger-icon { + display: block; + z-index: 5; + position: absolute; + width: 30px; + height: 18px; + cursor: pointer; + } + + .burger-icon .burger__span, + .burger-icon::before, + .burger-icon::after { + left: 0; + position: absolute; + height: 10%; + width: 100%; + transition: all 0.3s ease 0s; + background-color: #171617; + } + + .burger-icon::before, + .burger-icon::after { + content: ''; + } + + .burger-icon::before { + top: 0; + } + + .burger-icon::after { + bottom: 0; + } + + .burger-icon .burger__span { + top: 50%; + transform: scale(1) translate(0px, -50%); + } + + .side-menu { + width: 100%; + text-align: center; + overflow: auto; + z-index: 0; + left: -100%; + } + + .side-menu .cards__item { + display: flex; + flex-direction: column; + width: 100%; + padding: 30px 0; + cursor: pointer; + color: #fff; + } +} + +/* End Content */ + +.burger--white { + background-color: #fff; +} + +.side-menu--active { + left: 0; +} + +.burger-icon--active .burger__span { + transform: scale(0) translate(0, -50%); +} + +.burger-icon--active::before { + top: 50%; + transform: rotate(-45deg) translate(0px, -50%); +} + +.burger-icon--active::after { + top: 50%; + transform: rotate(45deg) translate(0px, -50%); +} + +.active { + display: block; +} + +.non-active { + display: none; +} + +._scroll-lock { + overflow: hidden; +} \ No newline at end of file From 51c99ae622daf2db05d69e9c3fffb0ad5b1728f4 Mon Sep 17 00:00:00 2001 From: Volodymyr Franchuk Date: Thu, 1 Sep 2022 15:13:22 +0300 Subject: [PATCH 2/4] Finished 'DOM practice' --- submissions/franchukv/dom-api/index.html | 11 +---------- submissions/franchukv/dom-api/script.js | 2 +- submissions/franchukv/dom-api/style.css | 12 +----------- 3 files changed, 3 insertions(+), 22 deletions(-) diff --git a/submissions/franchukv/dom-api/index.html b/submissions/franchukv/dom-api/index.html index ab0e265d9c..450d3b34ae 100644 --- a/submissions/franchukv/dom-api/index.html +++ b/submissions/franchukv/dom-api/index.html @@ -10,42 +10,33 @@ -
-

Hmm, was it a bird or a f*@king Icarus?

Just click on the card to read about air sport.
-
-
-
- -
- - - \ No newline at end of file + diff --git a/submissions/franchukv/dom-api/script.js b/submissions/franchukv/dom-api/script.js index 9753f0eade..181bdbcea9 100644 --- a/submissions/franchukv/dom-api/script.js +++ b/submissions/franchukv/dom-api/script.js @@ -132,4 +132,4 @@ function main() { burgenBtn.addEventListener('click', burgerHandler); } -main(); \ No newline at end of file +main(); diff --git a/submissions/franchukv/dom-api/style.css b/submissions/franchukv/dom-api/style.css index f580274e57..c9764dbe67 100644 --- a/submissions/franchukv/dom-api/style.css +++ b/submissions/franchukv/dom-api/style.css @@ -191,7 +191,6 @@ body { justify-content: center; } -/* Start side menu */ .side-menu { position: fixed; top: 0; @@ -251,9 +250,6 @@ body { text-decoration: underline; } -/* End Side Menu */ - -/* Start Nav*/ .cards-menu { display: flex; flex-direction: row; @@ -333,8 +329,6 @@ body { text-decoration: none; } -/*End Footer*/ - @media (max-width: 1600px) { .cards__item { padding: 20px 30px 50px 20px; @@ -403,8 +397,6 @@ body { } -/* Start Content */ - .content { max-width: 1015px; margin: 0 auto; @@ -530,8 +522,6 @@ body { } } -/* End Content */ - .burger--white { background-color: #fff; } @@ -564,4 +554,4 @@ body { ._scroll-lock { overflow: hidden; -} \ No newline at end of file +} From 491518fb4531291f408f7d63ee4e50bcadba4f5b Mon Sep 17 00:00:00 2001 From: Volodymyr Franchuk Date: Thu, 1 Sep 2022 18:44:24 +0300 Subject: [PATCH 3/4] Delete one unnecessary class and made code more readable --- submissions/franchukv/dom-api/index.html | 11 ++++- submissions/franchukv/dom-api/script.js | 56 ++++++++++++------------ submissions/franchukv/dom-api/style.css | 5 +-- 3 files changed, 40 insertions(+), 32 deletions(-) diff --git a/submissions/franchukv/dom-api/index.html b/submissions/franchukv/dom-api/index.html index 450d3b34ae..7f28dac468 100644 --- a/submissions/franchukv/dom-api/index.html +++ b/submissions/franchukv/dom-api/index.html @@ -10,33 +10,42 @@ +
-
+ +

Hmm, was it a bird or a f*@king Icarus?

Just click on the card to read about air sport.
+
+
+
+ +
+ + diff --git a/submissions/franchukv/dom-api/script.js b/submissions/franchukv/dom-api/script.js index 181bdbcea9..25c15d55a6 100644 --- a/submissions/franchukv/dom-api/script.js +++ b/submissions/franchukv/dom-api/script.js @@ -35,55 +35,43 @@ const data = { }, }; -function createNavigation(item) { - for (item in data) { - let navItem = document.createElement('li'); - navItem.classList.add('cards__item'); - - let h3 = document.createElement('h3'); - h3.classList.add('cards__title'); - h3.textContent = item; - navItem.appendChild(h3); - - navigation.append(navItem); +function createSideNavigation() { + if (!mainContent.classList.contains('non-active')) { + footer.classList.add('footer--element-end'); } -} -function createSideNavigation() { - startHeader.classList.remove('header-active'); - startNav.classList.remove('start-menu'); startNav.classList.add('side-menu'); + + startHeader.classList.remove('active'); + startNav.classList.remove('start-menu'); resetBtn.classList.remove('non-active'); - mainContent.classList.remove('non-active'); burgenBtn.classList.remove('non-active'); - - if (!mainContent.classList.contains('non-active')) { - footer.classList.add('footer--element-end'); - } + mainContent.classList.remove('non-active'); } function goToStartPage() { - startHeader.classList.add('header-active'); - startNav.classList.remove('side-menu'); + startHeader.classList.add('active'); + startNav.classList.add('_start--marker'); startNav.classList.add('start-menu'); resetBtn.classList.add('non-active'); - mainContent.classList.add('non-active'); burgenBtn.classList.add('non-active'); - startNav.classList.add('_start--marker'); - document.body.classList.remove('_scroll-lock'); + mainContent.classList.add('non-active'); + + startNav.classList.remove('side-menu'); burgenIcon.classList.remove('burger-icon--active'); + document.body.classList.remove('_scroll-lock'); footer.classList.remove('footer--element-end'); } function burgerHandler() { - document.body.classList.toggle('_scroll-lock'); startNav.classList.toggle('side-menu--active'); burgenBtn.classList.toggle('burger--white'); burgenIcon.classList.toggle('burger-icon--active'); + document.body.classList.toggle('_scroll-lock'); } function navigationHandler(event) { - if (startHeader.classList.contains('header-active') && startNav.classList.contains('start-menu')) { + if (startHeader.classList.contains('active') && startNav.classList.contains('start-menu')) { createSideNavigation(); createContent(event.target.textContent); } @@ -106,6 +94,20 @@ function navigationHandler(event) { createContent(event.target.textContent); } +function createNavigation(item) { + for (item in data) { + let navItem = document.createElement('li'); + navItem.classList.add('cards__item'); + + let h3 = document.createElement('h3'); + h3.classList.add('cards__title'); + h3.textContent = item; + navItem.appendChild(h3); + + navigation.append(navItem); + } +} + function createContent(item) { mainContent.innerHTML = ''; diff --git a/submissions/franchukv/dom-api/style.css b/submissions/franchukv/dom-api/style.css index c9764dbe67..637b773895 100644 --- a/submissions/franchukv/dom-api/style.css +++ b/submissions/franchukv/dom-api/style.css @@ -157,10 +157,6 @@ body { display: none; } -.header-active { - display: block; -} - .header__container { display: flex; flex-direction: column; @@ -176,6 +172,7 @@ body { .header__title { font-size: calc(30px + (100 * 0.7) * ((100vw - 320px) / 3540)); display: block; + line-height: 1.5; margin-bottom: 30px; } From 88d3fa11067b421835a9d7b9de4fdd28daf085e8 Mon Sep 17 00:00:00 2001 From: Volodymyr Franchuk Date: Tue, 13 Sep 2022 10:42:20 +0300 Subject: [PATCH 4/4] Fixed a lot of things from PR Replaced not-interactive HTML tags to interactives. Rewrote a "createContent" function using template string. Rewrote a "createNavigation" function to avoid reflow and repaint for every element of navigation. Added possibility to user to visually track current page in side-menu. Rewrote a lot of css styles for correct responsive view and user experience. --- submissions/franchukv/dom-api/index.html | 11 +- submissions/franchukv/dom-api/script.js | 64 +++---- submissions/franchukv/dom-api/style.css | 203 +++++++++++++---------- 3 files changed, 147 insertions(+), 131 deletions(-) diff --git a/submissions/franchukv/dom-api/index.html b/submissions/franchukv/dom-api/index.html index 7f28dac468..5fa6b61e08 100644 --- a/submissions/franchukv/dom-api/index.html +++ b/submissions/franchukv/dom-api/index.html @@ -10,7 +10,6 @@ -
@@ -22,14 +21,12 @@

Hmm, was it a bird or a f*@king Icarus?

-
+
-
+
@@ -43,9 +40,7 @@

Hmm, was it a bird or a f*@king Icarus?

- - diff --git a/submissions/franchukv/dom-api/script.js b/submissions/franchukv/dom-api/script.js index 25c15d55a6..f65411d74b 100644 --- a/submissions/franchukv/dom-api/script.js +++ b/submissions/franchukv/dom-api/script.js @@ -1,5 +1,4 @@ const mainContent = document.querySelector('.content'); -const navigation = document.querySelector('.cards'); const startHeader = document.querySelector('.header'); const startNav = document.querySelector('.menu'); const resetBtn = document.querySelector('.reset-btn'); @@ -7,7 +6,6 @@ const burgenBtn = document.querySelector('.burger'); const burgenIcon = document.querySelector('.burger-icon'); const footer = document.querySelector('.footer'); - const data = { 'Sky Diving': { img: 'img/sky_diving.jpg', @@ -41,19 +39,18 @@ function createSideNavigation() { } startNav.classList.add('side-menu'); + resetBtn.classList.add('active'); startHeader.classList.remove('active'); startNav.classList.remove('start-menu'); - resetBtn.classList.remove('non-active'); burgenBtn.classList.remove('non-active'); mainContent.classList.remove('non-active'); } function goToStartPage() { startHeader.classList.add('active'); - startNav.classList.add('_start--marker'); - startNav.classList.add('start-menu'); - resetBtn.classList.add('non-active'); + startNav.classList.add('_start--marker', 'start-menu'); + resetBtn.classList.remove('active'); burgenBtn.classList.add('non-active'); mainContent.classList.add('non-active'); @@ -61,6 +58,7 @@ function goToStartPage() { burgenIcon.classList.remove('burger-icon--active'); document.body.classList.remove('_scroll-lock'); footer.classList.remove('footer--element-end'); + unsetCurrentNavItem(); } function burgerHandler() { @@ -70,22 +68,31 @@ function burgerHandler() { document.body.classList.toggle('_scroll-lock'); } +function unsetCurrentNavItem() { + let navItems = document.getElementsByClassName('cards__title'); + + for (var i = 0; i < navItems.length; i++) { + navItems[i].classList.remove('cards__item--current'); + } +} + function navigationHandler(event) { + unsetCurrentNavItem(); + event.target.classList.add('cards__item--current'); + if (startHeader.classList.contains('active') && startNav.classList.contains('start-menu')) { createSideNavigation(); createContent(event.target.textContent); } if (startNav.classList.contains('_start--marker')) { - startNav.classList.remove('side-menu--active'); - startNav.classList.remove('_start--marker'); + startNav.classList.remove('side-menu--active', '_start--marker'); burgenBtn.classList.remove('burger--white'); burgenIcon.classList.remove('burger-icon--active'); } if (startNav.classList.contains('side-menu--active')) { - startNav.classList.remove('side-menu--active'); - startNav.classList.remove('_start-marker'); + startNav.classList.remove('side-menu--active', '_start-marker'); burgenBtn.classList.remove('burger--white'); document.body.classList.remove('_scroll-lock'); burgenIcon.classList.remove('burger-icon--active'); @@ -95,40 +102,35 @@ function navigationHandler(event) { } function createNavigation(item) { + + let temporaryContainer = document.createElement('ul'); + temporaryContainer.classList.add('cards', 'cards-menu'); + for (item in data) { let navItem = document.createElement('li'); navItem.classList.add('cards__item'); - let h3 = document.createElement('h3'); - h3.classList.add('cards__title'); - h3.textContent = item; - navItem.appendChild(h3); + let link = document.createElement('a'); + link.classList.add('cards__title'); + link.textContent = item; + navItem.appendChild(link); - navigation.append(navItem); + temporaryContainer.append(navItem); } + + startNav.append(temporaryContainer); } function createContent(item) { - mainContent.innerHTML = ''; - - const img = document.createElement('img'); - img.classList.add('content-img'); - img.setAttribute('src', data[item].img); - mainContent.append(img); - - const title = document.createElement('h2'); - title.classList.add('content-title'); - title.textContent = item; - mainContent.append(title); - - const text = document.createElement('div'); - text.classList.add('content-text'); - text.innerHTML = data[item].text; - mainContent.append(text); + mainContent.innerHTML = ` + +

${item}

+
${data[item].text}
`; } function main() { createNavigation(); + const navigation = document.querySelector('.cards'); navigation.addEventListener('click', navigationHandler); resetBtn.addEventListener('click', goToStartPage); burgenBtn.addEventListener('click', burgerHandler); diff --git a/submissions/franchukv/dom-api/style.css b/submissions/franchukv/dom-api/style.css index 637b773895..7d55c0c3bf 100644 --- a/submissions/franchukv/dom-api/style.css +++ b/submissions/franchukv/dom-api/style.css @@ -197,7 +197,7 @@ body { width: 240px; z-index: 1; overflow-x: hidden; - transition: left 0.1s ease 0s; + transition: left 0.3s ease; } .side-menu .cards-menu { @@ -211,16 +211,25 @@ body { display: flex; flex-direction: column; flex-basis: 0; - padding: 30px 20px; margin-bottom: 0; +} + +.side-menu .cards__item .cards__title { cursor: pointer; color: #fff; } -.side-menu .cards__item:hover { +.cards__title { + line-height: 28px; +} + +.side-menu .cards__item .cards__title { + padding: 30px 20px; +} + +.side-menu .cards__item .cards__title:not(.cards__item--current):hover { color: #171617; background-color: #f9f9f9; - } .side-menu .cards__item:first-child .cards__title::after, @@ -228,20 +237,16 @@ body { display: none; } -.side-menu .cards__item:first-child:hover .cards__title, -.side-menu .cards__item:last-child:hover .cards__title { - text-decoration: underline; -} - -.side-menu .reset-btn { +.reset-btn { + display: none; padding: 40px 30px 40px; margin-bottom: 0; cursor: pointer; color: #fff; - background-color: #647455; + background-color: #8B2F2980; } -.side-menu .reset-btn:hover { +.reset-btn:hover { color: #171617; background-color: #d1d1d1; text-decoration: underline; @@ -258,8 +263,11 @@ body { display: flex; flex-direction: column; flex-basis: 32%; - padding: 40px 50px 70px 50px; margin-bottom: 30px; +} + +.cards__title { + padding: 40px 50px 70px 50px; background-color: #7A624D10; cursor: pointer; color: #171617; @@ -272,10 +280,10 @@ body { .cards__item:first-child .cards__title::after, .cards__item:last-child .cards__title::after { + z-index: 0; position: absolute; - top: 40px; - left: 0; - text-decoration: underline; + top: 80px; + left: 50px; opacity: 0.8; font-family: 'Noto Serif', serif; font-size: 16px; @@ -289,19 +297,10 @@ body { content: 'The sea wet the feathers'; } -.cards__item:hover .cards__title { +.cards__item .cards__title:not(.cards__item--current):hover { text-decoration: underline; } -.cards__item:first-child:hover .cards__title, -.cards__item:last-child:hover .cards__title { - text-decoration: none; -} - -.cards__item:hover .cards__title::after { - text-decoration: none; -} - .footer { display: flex; align-items: center; @@ -326,28 +325,61 @@ body { text-decoration: none; } -@media (max-width: 1600px) { - .cards__item { - padding: 20px 30px 50px 20px; - margin-bottom: 20px; - } +.content { + max-width: 1015px; + margin: 0 auto; + display: flex; + flex-direction: column; } -@media (max-width: 860px) { - .cards__item { - padding: 30px 20px 50px 20px; - margin-bottom: 20px; +.content-img { + display: block; + width: 100%; + height: auto; +} + +.content-title { + font-size: calc(30px + (100 * 0.7) * ((100vw - 320px) / 3540)); + margin-bottom: 40px; + color: #A46753; +} + +.content-text__item { + font-family: 'Noto Serif', serif; + line-height: 22px; + font-size: 17px; + display: block; + margin-bottom: 15px; +} + +@media (max-width: 900px) { + .cards__title { + padding: 30px 20px 60px 20px; + } + + .cards__item:first-child .cards__title::after, + .cards__item:last-child .cards__title::after { + left: 20px; + top: 70px; } } @media (max-width: 767px) { .cards__item { - padding: 30px 0px 50px 30px; margin-bottom: 15px; flex-basis: 49%; width: 49%; } + .cards__title { + padding: 30px 0px 50px 30px; + } + + .cards__item:first-child .cards__title::after, + .cards__item:last-child .cards__title::after { + left: 30px; + } + .footer { padding: 20px; } @@ -367,58 +399,30 @@ body { padding: 0 20px; } - .cards__item { - padding: 20px; - } - .cards__item:first-child, .cards__item:last-child { - padding: 30px 0 60px 30px; margin-bottom: 15px; flex-basis: 100%; } + .cards__item:first-child .cards__title, + .cards__item:last-child .cards__title { + padding: 30px 0 60px 30px; + flex-basis: 100%; + } + .cards__title { font-size: 20px; } } -@media (max-width: 400px) { - - .cards__item:first-child, - .cards__item:last-child { - margin-bottom: 15px; - flex-basis: 100%; +@media (max-width: 420px) { + .cards__title { + font-size: 20px; + padding: 30px 20px; + height: 100%; } - -} - -.content { - max-width: 1015px; - margin: 0 auto; - display: flex; - flex-direction: column; -} - -.content-img { - display: block; - width: 100%; - height: auto; -} - -.content-title { - font-size: calc(30px + (100 * 0.7) * ((100vw - 320px) / 3540)); - margin-bottom: 40px; - color: #A46753; -} - -.content-text__item { - font-family: 'Noto Serif', serif; - line-height: 22px; - font-size: 17px; - display: block; - margin-bottom: 15px; } @media (min-width: 1024px) { @@ -501,7 +505,24 @@ body { transform: scale(1) translate(0px, -50%); } + .burger-icon.burger-icon--active .burger__span { + top: 50%; + transform: scale(0) translate(0px, -50%); + } + + .burger-icon--active::before { + top: 50%; + transform: rotate(-45deg) translate(0px, -50%); + } + + .burger-icon--active::after { + top: 50%; + transform: rotate(45deg) translate(0px, -50%); + } + .side-menu { + opacity: 0; + visibility: hidden; width: 100%; text-align: center; overflow: auto; @@ -509,36 +530,34 @@ body { left: -100%; } - .side-menu .cards__item { - display: flex; - flex-direction: column; + .side-menu .cards__item .cards__title { width: 100%; padding: 30px 0; - cursor: pointer; - color: #fff; } } -.burger--white { - background-color: #fff; +.side-menu .cards__item .cards__title.cards__item--current { + background-color: #64745590; + color: #fff; + cursor: auto; } -.side-menu--active { - left: 0; +.side-menu .cards__item .cards__title.cards__item--current { + text-align: right; } -.burger-icon--active .burger__span { - transform: scale(0) translate(0, -50%); +.side-menu.side-menu--active .cards__item .cards__title.cards__item--current { + text-align: center; } -.burger-icon--active::before { - top: 50%; - transform: rotate(-45deg) translate(0px, -50%); +.burger--white { + background-color: #fff; } -.burger-icon--active::after { - top: 50%; - transform: rotate(45deg) translate(0px, -50%); +.side-menu--active { + left: 0; + opacity: 1; + visibility: visible; } .active {