kottans · A-Ostrovnyy · Aug 10, 2022 · Jul 29, 2022 · Jul 31, 2022 · Jul 31, 2022
diff --git a/submissions/Eugene-CG/DOM/index.html b/submissions/Eugene-CG/DOM/index.html
@@ -0,0 +1,28 @@
+<!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" />
+    <title>Action Menu</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="index.js" defer></script>
+  </head>
+  <body>
+    <div class="wrapper">
+      <header class="header" id="home">
+        <div class="logo"><a href="#home" class="logo-link">Logo</a></div>
+        <nav class="menu">
+          <div class="menu__popup-icon">
+            <img src="./img/popup-button.png" />
+          </div>
+          <ul class="menu__list"></ul>
+        </nav>
+      </header>
+      <main class="main">
+        <div class="main__content"></div>
+      </main>
+      <footer class="footer">Footer</footer>
+    </div>
+  </body>
+</html>
diff --git a/submissions/Eugene-CG/DOM/index.js b/submissions/Eugene-CG/DOM/index.js
@@ -0,0 +1,136 @@
+const texts = [
+  {
+    identifier: "HahahaOne",
+    text: `Lorem One one One one One one One one One One one One one One one One one One One one One one One
+    one One one One One one One one One one One one Oneoneipsum dolor 
+    sit amet consectetur adipisicing elit. 
+    Ad, qui
+    laboriosam? Est, et ex? Fugit, 
+    quidem aliquid cumque porro rerum
+    maiores voluptate cupiditate deserunt tenetur distinctio mollitia
+    inventore quo! Nostrum.`,
+  },
+  {
+    identifier: "HahahaTwo",
+    text: `Two Two Two Two Two Two Two Two Two Two Two
+    ipsum dolor sit amet consectetur adipisicing elit. Ad, qui
+    laboriosam? Est, et ex? Fugit, 
+    quidem aliquid cumque porro rerum
+    maiores voluptate cupiditate deserunt tenetur distinctio mollitia
+    inventore quo! Nostrum.`,
+  },
+  {
+    identifier: "HahahaThree",
+    text: `Lorem Three Three Three Three Three Three Three Three Three Three Thr ipsum dolor sit amet consectetur adipisicing elit. Ad, qui
+    laboriosam? Est, et ex? Fugit, quidem aliquid
+     cumque porro rerum
+    maiores voluptate cupiditate deserunt tenetur distinctio mollitia
+    inventore quo! Nostrum.`,
+  },
+  {
+    identifier: "HahahaFour",
+    text: `Lorem Four Four Four Four Four Four Four Four Four Four Four Four Fo
+    ipsum dolor sit amet consectetur adipisicing elit. Ad, qui
+    laboriosam? Est, et ex? Fugit, quidem aliquid cumque porro rerum
+    maiores voluptate cupiditate deserunt tenetur distinctio mollitia
+    inventore quo! Nostrum.`,
+  },
+  {
+    identifier: "HahahaFive",
+    text: `Lorem Five Five Five Five Five Five Five Five Five Five Five Five Fi
+    ipsum dolor sit amet consectetur adipisicing elit. Ad, qui
+    laboriosam? Est, et ex? Fugit, quidem aliquid cumque porro rerum
+    maiores voluptate cupiditate deserunt tenetur distinctio mollitia
+    inventore quo! Nostrum.`,
+  },
+  {
+    identifier: "Something",
+    text: `Lorem Something Something ipsum dolor sit amet consectetur adipisicing elit. Ad, qui
+    laboriosam? Est, et ex? Fugit, quidem aliquid cumque porro rerum
+    maiores voluptate cupiditate deserunt tenetur distinctio mollitia
+    inventore quo! Nostrum.`,
+  },
+];
+const wrapper = document.querySelector(".wrapper");
+const mainContent = document.querySelector(".main__content");
+const menuList = document.querySelector(".menu__list");
+
+const fillMenuList = (event) => {
+  texts.reduceRight((accumulatorObj, currObj) => {
+    const li = document.createElement("LI");
+    menuList.appendChild(li);
+
+    const a = document.createElement("A");
+    a.setAttribute("href", "#");
+    a.classList.add("menu__link");
+    a.innerText = currObj.identifier;
+    li.appendChild(a);
+  }, "Hello Alexandr :D");
+};
+
+const delegateEvents = (event) => {
+  const { target } = event;
+  if (target.closest(".menu__list")) handleList(target);
+  if (target.closest(".logo")) backToDefaultContent();
+  if (target.closest(".menu__popup-icon")) switchMenuPopup(target);
+};
+
+const handleList = (target) => {
+  console.log(target);
+  if (target.closest("LI") || target.closest("A")) {
+    clearMainContent();
+    createMainContent(target);
+    switchMenuPopup(target);
+  }
+};
+const backToDefaultContent = () => (mainContent.innerHTML = defaultContent);
+const switchMenuPopup = (target) => menuList.classList.toggle("hide");
+
+const defaultContent = mainContent.innerHTML;
+const clearMainContent = () => (mainContent.innerHTML = "");
+
+const createMainContent = (target) => {
+  createTitleH(target);
+  createParagraph(target, 5);
+};
+const createTitleH = (target) => {
+  const h = document.createElement("H1");
+  h.innerText = target.innerText;
+  mainContent.prepend(h);
+};
+const createParagraph = (target, howMuchTimes) => {
+  if (!howMuchTimes) return;
+
+  const { innerText } = target;
+  const paragraph = document.createElement("P");
+  const textArr = texts
+    .find((obj) => {
+      return obj.identifier === innerText;
+    })
+    .text.split("");
+  typeEffect(paragraph, textArr);
+
+  setTimeout(() => {
+    mainContent.appendChild(paragraph);
+    return createParagraph(target, howMuchTimes - 1);
+  }, 45);
+};
+const typeEffect = (paragraph, textArray) => {
+  let i = 0;
+  function recursive() {
+    if (i >= textArray.length) return;
+    paragraph.innerHTML += textArray[i];
+    i++;
+    setTimeout(recursive, 15);
+  }
+  recursive();
+};
+const generateStartContent = () => {
+  const something = menuList.firstChild;
+  handleList(something);
+};
+window.addEventListener("load", (event) => {
+  fillMenuList(event);
+  generateStartContent(event);
+});
+wrapper.addEventListener("click", delegateEvents);
diff --git a/submissions/Eugene-CG/DOM/style.css b/submissions/Eugene-CG/DOM/style.css
@@ -0,0 +1,137 @@
+:root {
+  --icon-size: 61px;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.wrapper {
+  height: 200vh;
+  display: grid;
+  grid-template: auto 1fr auto / 1fr 1fr 8fr 1fr 1fr;
+  grid-template-areas:
+    ". header header header ."
+    ". main main main ."
+    ". footer footer footer .";
+  background: linear-gradient(
+    -45deg,
+    #616fbd 0%,
+    #353170 13%,
+    #4369af 25%,
+    #331fa5 38%,
+    #00369b 50%,
+    #57fff1 62%,
+    #4ceaff 75%,
+    #0098ac 87%,
+    #006b7e 100%
+  );
+  background-size: 400% 400%;
+  animation: animate 7.5s ease-in-out infinite;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  grid-area: header;
+}
+a {
+  color: black;
+  text-decoration: none;
+}
+.menu__popup-icon {
+  display: none;
+}
+.menu__popup-icon img {
+  height: var(--icon-size);
+  width: var(--icon-size);
+}
+.menu__list {
+  display: flex;
+  justify-content: space-around;
+  list-style: none;
+}
+.menu__list > li,
+.logo {
+  margin-right: 1em;
+  line-height: 3em;
+}
+.main {
+  grid-area: main;
+}
+.main__content {
+  margin-top: 3em;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.main__content > p {
+  margin: 2em 0;
+  border-bottom: 3px solid blue;
+  font-size: 1.2em;
+  transition: 0.2s all ease-in-out;
+}
+.footer {
+  grid-area: footer;
+}
+.menu__link,
+.logo-link {
+  font-size: 1.5em;
+  font-weight: 700;
+}
+.menu__list > li:hover,
+.logo-link:hover {
+  text-decoration: underline;
+}
+* {
+  scrollbar-width: auto;
+  scrollbar-color: #00c3ff #ffffff;
+}
+*::-webkit-scrollbar {
+  width: 10px;
+}
+*::-webkit-scrollbar-track {
+  background: #ffffff;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: #00e1ff;
+  border-radius: 10px;
+  border: 3px solid #ffffff;
+}
+@media (max-width: 954px) {
+  .menu__popup-icon {
+    display: block;
+  }
+  .menu__list {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: var(--icon-size);
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: none;
+    flex-direction: column;
+    background-color: rgb(161, 255, 247);
+  }
+  .menu__list > li {
+    width: 100vw;
+    height: 10vh;
+    margin: 1.5em auto;
+    text-align: center;
+    background-color: rgba(255, 255, 255, 0.7);
+  }
+  .hide {
+    display: block;
+  }
+}
+@keyframes animate {
+  0% {
+    background-position: 0 25%;
+  }
+  50% {
+    background-position: 50% 50%;
+  }
+  100% {
+    background-position: 0 25%;
+  }
+}