Skip to content

Commit

Permalink
Added files (#309)
Browse files Browse the repository at this point in the history 
* Added files

* Chandge link to css file

* Added cursor on menu link

* Added the event listener on the menu container to use the event delegation.

* Fixed a bug when we can click on whole menu.

* Has made refactoring my code and added 3 separate function: toggleActiveMenuItem, renderData, cleanContent, getSelectData
  • Loading branch information
@chernetskyi8704
chernetskyi8704 authored Sep 4, 2022
1 parent 8fd86b1 commit 625b16c
Show file tree
Hide file tree
Showing 3 changed files with 460 additions and 0 deletions.
59 changes: 59 additions & 0 deletions submissions/chernetskyi8704/Interactive Side-menu/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!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="style.css" />
<title>Interactive Side-menu</title>
</head>
<body>
<div class="wrapper">
<main class="main">
<div class="menu__icon-burger">
<span class="burger_span"></span>
</div>
<aside class="main__menu">
<ul class="menu__list">
<li class="menu__item">
<a class="menu__link _activeBtn" id="0">Fusilli</a>
</li>
<li class="menu__item">
<a class="menu__link" id="1">Casarecce</a>
</li>
<li class="menu__item">
<a class="menu__link" id="2">Malloredus</a>
</li>
<li class="menu__item">
<a class="menu__link" id="3">Macaroni</a>
</li>
<li class="menu__item">
<a class="menu__link" id="4">Riccioli</a>
</li>
</ul>
</aside>
<div class="main__content">
<h2 class="content__name">Fusilli</h2>
<div class="content__section">
<div class="section__img-container">
<img
class="section__img"
id="section__img"
src="img/Fusilli.jpg"
alt=""
/>
<span class="section__description">
Fusilli are a variety of pasta that are formed into corkscrew or
helical shapes. The word fusilli presumably comes from fuso
("spindle"), as traditionally it is "spun" by pressing and
rolling a small rod over the thin strips of pasta to wind them
around it in a corkscrew shape.
</span>
</div>
</div>
</div>
</main>
</div>
<script src="script.js"></script>
</body>
</html>
98 changes: 98 additions & 0 deletions submissions/chernetskyi8704/Interactive Side-menu/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
"use strict";

const mainContent = document.querySelector(".main__content");
const menuItem = document.querySelectorAll(".menu__link");
const menuList = document.querySelector(".menu__list");
const iconBurger = document.querySelector(".menu__icon-burger");
const menuBody = document.querySelector(".main__menu");

const contentData = [
{
name: "Fusilli",
image: "img/Fusilli.jpg",
alt: "",
description:
"Fusilli are a variety of pasta that are formed into corkscrew or helical shapes. The word fusilli presumably comes from fuso ('spindle'), as traditionally it is 'spun' by pressing androlling a small rod over the thin strips of pasta to wind them around it in a corkscrew shape.",
},
{
name: "Casarecce",
image: "img/Casarecce.jpg",
alt: "",
description:
"Originating in Sicily, casarecce is a traditional short pasta, loosely rolled lengthways and slightly twisted. Their twisted shape makes them perfect for holding sauces, whether it’s simple pesto or chunky sauces made from eggplant, ricotta and basil.",
},
{
name: "Malloreddus",
image: "img/Malloreddus.jpg",
alt: "",
description:
"Malloreddus, also called gnocchetti sardi or ‘little Sardinian gnocchi’ is a typical pasta from Sardinia. Many Italians call it Sardinian gnocchi because of the shape. It really looks like tiny potato gnocchi. But it is actually a pasta made of durum wheat semolina flour, water and salt. However, the same technique to make it is the same as gnocchi.",
},
{
name: "Macaroni",
image: "img/Macaroni.jpg",
alt: "",
description:
"One of the earliest forms of pasta, macaroni is made from durum wheat and is shaped in short tubes with holes down the middle. Although artisanal brands may be made by hand using traditional methods, commercial varieties are produced using state-of-the-art pasta machines. Other varieties of macaroni include elbow macaroni (short and curved) and macaronicini (small shapes).",
},
{
name: "Riccioli",
image: "img/Riccioli.jpg",
alt: "",
description:
"A variety of fresh egg pasta that is often associated with pasta makers in the Piemont region of Italy. Very similar in shape to fusilloni, rotini spiral, and rotelle pasta, the Riccioli Pasta is formed into many layers of ridges, spaced closely together that spiral upward. Because of its unique shape, it is good pasta for holding a variety of different pasta sauces.",
},
];

iconBurger.addEventListener("click", (e) => {
document.body.classList.toggle("_lock");
iconBurger.classList.toggle("_active");
menuBody.classList.toggle("_active");
});

const getSelectData = (target) => {
const { name, image, alt, description } = contentData[target.id];

const template = `<h2 class="content__name" >${name}</h2>
<div class="content__section">
<div class="section__img-container">
<img
class="section__img"
src="${image}"
alt="${alt}"
/>
<span class="section__description">
${description}
</span>
</div>
</div>`;

return template;
};

const cleanContent = (area) => (area.innerHTML = "");

const renderData = function (area, target) {
return area.insertAdjacentHTML("beforeend", getSelectData(target));
};

const toggleActiveMenuItem = (listOfMenuItems, target) => {
listOfMenuItems.forEach((item) => {
item.classList.remove("_activeBtn");
});
target.classList.add("_activeBtn");
};

menuList.addEventListener("click", (event) => {
const target = event.target;

if (iconBurger.classList.contains("_active")) {
document.body.classList.remove("_lock");
iconBurger.classList.remove("_active");
menuBody.classList.remove("_active");
}

toggleActiveMenuItem(menuItem, target);
cleanContent(mainContent);
renderData(mainContent, target);
});
Loading

0 comments on commit 625b16c

Please # to comment.