From 625b16cbbbc762c5f5571efd31c374355ec088ea Mon Sep 17 00:00:00 2001
From: Dmytro Chernetskyi <78321800+chernetskyi8704@users.noreply.github.com>
Date: Sun, 4 Sep 2022 08:03:44 +0300
Subject: [PATCH] Added files (#309)
* 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
---
.../Interactive Side-menu/index.html | 59 ++++
.../Interactive Side-menu/script.js | 98 ++++++
.../Interactive Side-menu/style.css | 303 ++++++++++++++++++
3 files changed, 460 insertions(+)
create mode 100644 submissions/chernetskyi8704/Interactive Side-menu/index.html
create mode 100644 submissions/chernetskyi8704/Interactive Side-menu/script.js
create mode 100644 submissions/chernetskyi8704/Interactive Side-menu/style.css
diff --git a/submissions/chernetskyi8704/Interactive Side-menu/index.html b/submissions/chernetskyi8704/Interactive Side-menu/index.html
new file mode 100644
index 0000000000..3a92b211c7
--- /dev/null
+++ b/submissions/chernetskyi8704/Interactive Side-menu/index.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+ Interactive Side-menu
+
+
+
+
+
+
+
+
+
+
Fusilli
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
diff --git a/submissions/chernetskyi8704/Interactive Side-menu/script.js b/submissions/chernetskyi8704/Interactive Side-menu/script.js
new file mode 100644
index 0000000000..c653bca76c
--- /dev/null
+++ b/submissions/chernetskyi8704/Interactive Side-menu/script.js
@@ -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 = `
+
+ 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.
+
+