Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DOM task #388

Merged
merged 4 commits into from
Sep 13, 2022
Merged

DOM task #388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
46e3ec4
Finished DOM practice
franchukv Sep 1, 2022
51c99ae
Finished 'DOM practice'
franchukv Sep 1, 2022
491518f
Delete one unnecessary class and made code more readable
franchukv Sep 1, 2022
88d3fa1
Fixed a lot of things from PR
franchukv Sep 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions submissions/franchukv/dom-api/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Franchukv - DOM practice</title>
</head>

<body>
<div class="wrapper">

<header class="header active">
<div class="header__container">
<h1 class="header__title">Hmm, was it a bird or a f*@king Icarus?</h1>
<span class="header__subtitle">Just click on the card to read about air sport.</span>
</div>
</header>

<main class="main">
<nav class="menu start-menu">
<a class="reset-btn">Go back to start screen</a>
</nav>

<a class="burger non-active">
<div class="burger-icon"><span class="burger__span"></span></div>
</a>

<section class="content">
</section>
</main>

<footer class="footer">
<div class="copyright">
<span class="copyright__alt">&copy;</span>
<a class="copyright__text" href="https://github.com/franchukv">Franchukv</a>
</div>
</footer>

</div>
<script src="js/script.js"></script>
</body>

</html>
139 changes: 139 additions & 0 deletions submissions/franchukv/dom-api/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
const mainContent = document.querySelector('.content');
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: "<p class='content-text__item'>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.</p><p class='content-text__item'>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.</p>",
},
'Wingsuit Flying': {
img: 'img/wingsuit_flying.jpg',
text: "<p class='content-text__item'>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.</p><p class='content-text__item'>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.</p>",
},
'Gliding': {
img: 'img/gliding.jpg',
text: "<p class='content-text__item'>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.</p><p class='content-text__item'>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.</p><p class='content-text__item'>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.</p>"
},
'Hang gliding': {
img: 'img/hang_gliding.jpg',
text: "<p class='content-text__item'>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.</p><p class='content-text__item'>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.</p>",
},
'Paragliding': {
img: 'img/paragliding.jpg',
text: "<p class='content-text__item'>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.</p><p class='content-text__item'>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.</p>",
},
'Canopy Piloting': {
img: 'img/canopy_piloting.jpg',
text: "<p class='content-text__item'>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.</p>",
},
};

function createSideNavigation() {
if (!mainContent.classList.contains('non-active')) {
footer.classList.add('footer--element-end');
}

startNav.classList.add('side-menu');
resetBtn.classList.add('active');

startHeader.classList.remove('active');
startNav.classList.remove('start-menu');
burgenBtn.classList.remove('non-active');
mainContent.classList.remove('non-active');
}

function goToStartPage() {
startHeader.classList.add('active');
startNav.classList.add('_start--marker', 'start-menu');
resetBtn.classList.remove('active');
burgenBtn.classList.add('non-active');
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');
unsetCurrentNavItem();
}

function burgerHandler() {
startNav.classList.toggle('side-menu--active');
burgenBtn.classList.toggle('burger--white');
burgenIcon.classList.toggle('burger-icon--active');
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', '_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', '_start-marker');
burgenBtn.classList.remove('burger--white');
document.body.classList.remove('_scroll-lock');
burgenIcon.classList.remove('burger-icon--active');
}

createContent(event.target.textContent);
}

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 link = document.createElement('a');
link.classList.add('cards__title');
link.textContent = item;
navItem.appendChild(link);

temporaryContainer.append(navItem);
}

startNav.append(temporaryContainer);
}

function createContent(item) {
mainContent.innerHTML = `
<img class="content-img" src="${data[item].img}">
<h2 class="content-title">${item}</h2>
<div class="content-text">${data[item].text}</div>`;
}

function main() {
createNavigation();
const navigation = document.querySelector('.cards');
navigation.addEventListener('click', navigationHandler);
resetBtn.addEventListener('click', goToStartPage);
burgenBtn.addEventListener('click', burgerHandler);
}

main();
Loading