kottans · bordun2022 · Oct 25, 2022
diff --git a/submissions/bordun2022/DOM TASK/README.md b/submissions/bordun2022/DOM TASK/README.md
@@ -0,0 +1,6 @@
+# dom-task
+Working with this app, helps me to learn DOM methods as well
+
+
+[Demo](https://bordun2022.github.io/dom-task/) |
+[Code base](https://github.com/bordun2022/dom-task.git)
diff --git a/submissions/bordun2022/DOM TASK/img/adidas.png b/submissions/bordun2022/DOM TASK/img/adidas.png
diff --git a/submissions/bordun2022/DOM TASK/img/brands.jpeg b/submissions/bordun2022/DOM TASK/img/brands.jpeg
diff --git a/submissions/bordun2022/DOM TASK/img/columbia.png b/submissions/bordun2022/DOM TASK/img/columbia.png
diff --git a/submissions/bordun2022/DOM TASK/img/nike.jpeg b/submissions/bordun2022/DOM TASK/img/nike.jpeg
diff --git a/submissions/bordun2022/DOM TASK/img/puma.jpeg b/submissions/bordun2022/DOM TASK/img/puma.jpeg
diff --git a/submissions/bordun2022/DOM TASK/img/reebok.png b/submissions/bordun2022/DOM TASK/img/reebok.png
diff --git a/submissions/bordun2022/DOM TASK/img/run.jpeg b/submissions/bordun2022/DOM TASK/img/run.jpeg
diff --git a/submissions/bordun2022/DOM TASK/index.html b/submissions/bordun2022/DOM TASK/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <title>Side-menu</title>
+        <link rel="stylesheet" href="style.css"> 
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+    <header><p><i>Sport<br>brands</i></p></header>
+    <nav>
+        <ul class="sidenav">
+        <li class="menu_btn" id="1"><a href="#">Puma</a></li>
+        <li class="menu_btn" id="2"><a href="#">Nike</a></li>
+        <li class="menu_btn" id="3"><a href="#">Adidas</a></li>
+        <li class="menu_btn" id="4"><a href="#">Reebok</a></li>
+        <li class="menu_btn" id="5"><a href="#">Columbia</a></li>
+        <li class="menu_btn" id="6"><a href="#">Інші</a></li>
+    </ul>
+</nav>
+    <div class="content">
+
+    <p class="text-content" id="text-content">Пу́ма (нім. Puma) — німецька компанія — один із світових лідерів виробництва спортивних товарів. Заснована в 1924 році братами Дасслерами як «Dassler». Сучасна назва з'явилася 1948 року, після того, як брати Дасслер розірвали відносини і утворили власні компанії. Рудольф спочатку назвав свою фірму Руда (від перших літер і'мя та прізвища Рудольф Дасслер), але вже за декілька місяців переіменував її в Пума (Puma).</p>
+    <img class="image" src="./img/puma.jpeg" alt="img">
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
+
diff --git a/submissions/bordun2022/DOM TASK/script.js b/submissions/bordun2022/DOM TASK/script.js
@@ -0,0 +1,46 @@
+const sportBrands = [
+    {   
+    id: 1,
+    textContent: "Пу́ма (нім. Puma) — німецька компанія — один із світових лідерів виробництва спортивних товарів. Заснована в 1924 році братами Дасслерами як «Dassler». Сучасна назва з'явилася 1948 року, після того, як брати Дасслер розірвали відносини і утворили власні компанії. Рудольф спочатку назвав свою фірму Руда (від перших літер і'мя та прізвища Рудольф Дасслер), але вже за декілька місяців переіменував її в Пума (Puma).",
+    image: "./img/puma.jpeg",
+},
+{   id: 2,
+    textContent: "Nike — американська компанія, виробник спортивних товарів. Засновано в 1964 студентом Філом Найтом, бігуном на середні дистанції в команді Університету Орегону, та його тренером Біллом Боуерманом у Юджині. Спочатку компанія носила назву «Blue Ribbon Sports» й спеціалізувалась на замовленнях кросівок в азійських країнах й наступному продажу їх на американському ринку. Nike — один з найбільших виробників спортивних товарів у світі.",
+    image: "./img/nike.jpeg",
+
+},
+{   id: 3,
+    textContent: "Адідас (нім. Adidas) — німецька компанія, один зі світових лідерів виробництва спортивних товарів. Заснована в 1924 році братами Дасслерами як «Dassler». Сучасна назва з'явилася 1948 року, після того, як брати Дасслер розірвали відносини і утворили власні компанії. Adidas походить від перших трьох літер прізвиська молодшого брата Адольфа «Adi» і трьох перших літер прізвища (Das) засновника фірми Адольфа Дасслера, (Adolf Dassler).",
+    image: "./img/adidas.png",
+
+}, 
+{    id: 4,
+    textContent: "Reebok — американська компанія з виробництва спортивного одягу, взуття та аксесуарів. Штаб-квартира розташована в Бостоні (штат Массачусетс ). З 2005 року є дочірнім підрозділом компанії Adidas. Reebok виробляє та поширює спортивний одяг для фітнесу, бігу та кросфіту, включаючи аксесуари та взуття. У 2006 році відбулося злиття з Adidas.",
+    image: "./img/reebok.png",
+
+},
+{   id: 5,
+    textContent: "Columbia Sportswear, Коламбія спортсвер — американський виробник й продавець верхнього та спортивного одягу із головним офісом у Бівертоні, Орегон. Виробами Колумбії також є взуття, капелюхи, туристичні товари, лижній одяг (на 2001 рік Коламбія була найбільшим американським виробником)та верхнього одягу акксесуари.Коламбія продає свої вироби у 13 тисячах магазинах у 72 країнах світу.",
+    image: "./img/columbia.png",
+
+},
+{   id: 6,
+    textContent: "Існують також інші бренди спортивного одягу такі як: New Balance, Converse, Asics, Vans та інші. Дані бренди також користуються популярністю серед споживачів. Асортимент товарів даних брендів вельми різноманітний та прийдеться до смаку навіть найвибагливішим покупцям. Стиль та якість товару дійсно перебуває на високому рівні.",
+    image: "./img/brands.jpeg",
+
+}
+];
+
+const buttonActive = document.querySelector('.sidenav');
+const content = document.querySelector('.content');
+
+
+buttonActive.addEventListener("click", ({ target }) => {
+    const idx = target.parentElement.id;
+    const brand = sportBrands.filter(({ id }) => id == idx);
+    const [ { image, textContent } ] = brand;
+    content.innerHTML = `
+            <p class="text-content" id="text-content">${textContent}</p>
+            <img class="image" src="${image}" alt="img">
+            `;
+});
diff --git a/submissions/bordun2022/DOM TASK/style.css b/submissions/bordun2022/DOM TASK/style.css
@@ -0,0 +1,280 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    text-decoration: none;
+    list-style-type: none;
+    font-family: "Loto", sans-serif;
+  }
+
+  html {
+    height: 100%;
+  }
+
+  body {
+    background-image: url(img/run.jpeg);
+    background-size:cover;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    height: 100%;
+    display: flex;
+    margin: 0px;
+    overflow: hidden;
+  }
+
+  header {
+    display: flex;
+    justify-content: flex-start;
+    padding: 10px 10px;
+    text-align: center;
+    align-items: center;
+    font-size: 20px;
+    cursor: pointer;
+    color: darkslategrey;
+    overflow: hidden;
+    transition: 0.5s;
+    opacity: 0.7;
+    border: 1px solid white;
+    width: 95px;
+    height: 75px;
+    margin: 10px 10px;
+  }
+
+  header:hover {
+    background-color: transparent;
+    color:aliceblue;
+  }
+
+  nav {
+    align-self: flex-start;
+  }
+
+  .image {
+   max-height: 350px;
+   padding: 0px 20px;
+   max-width: 400px;
+  }
+
+.sidenav  {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  align-self: center;
+  padding: 30px 40px;
+  color: black;
+  width: 300px;
+  height: 520px;
+  }
+
+  .content {
+    display: flex;
+    height: 400px;
+    background-color: aliceblue;
+    width: 1100px;
+    opacity: 0.7;
+    color: black;
+    padding: 20px 20px;
+    text-align: justify;
+    margin: 100px 10px;
+  }
+
+  .menu_btn{
+    border: 1px solid transparent;
+    width: 180px;
+    height: 100px;
+    padding: 30px 30px;
+    text-align: center;
+    line-height: 10px;
+    font-size: 25px;
+    text-decoration: none;
+    list-style-type: none;
+    color: black;
+    gap: 10px;
+  }
+
+.text-content {
+    font-size: 25px;
+}
+
+  a {
+    color: black;
+  }
+
+  a:hover {
+    color: aliceblue;
+    background-color: transparent;
+    border: 1px solid grey; 
+    padding: 15px;
+    border-radius: 15px;
+   }
+
+   a:focus {
+    outline: 2px lightgreen solid;
+
+}
+
+   @media screen and (max-width: 375px) {
+    body {
+      overflow: auto;
+     }
+    header {
+        display: none;
+    }
+
+    .sidenav{
+      align-self: center;
+    }
+    .content{
+        flex-direction: column;
+        height: 700px;
+        text-align: justify;
+    }
+    .image {
+        flex-direction: column;
+    }
+    .menu_btn{
+      font-size: 18px;
+     }
+  }
+
+   @media screen and (max-width: 600px) {
+   body {
+    overflow: auto;
+   }
+    header {
+        display: none;
+    }
+    .sidenav {
+        align-self: center;
+        width: 250px;
+        height: 400px;
+    }
+    .content{
+        flex-direction: column;
+
+    }
+    .image {
+        flex-direction: column;
+    }
+    .text-content {
+      font-size: 5px;
+     }
+     .menu_btn{
+      font-size: 20px;
+     }
+  }
+
+  @media screen and (max-width: 768px) {
+    body {
+     overflow: auto;
+    }
+     header {
+         display: none;
+     }
+     .sidenav {
+         align-self: center;
+         width: 250px;
+         height: 400px;
+     }
+     .content{
+         flex-direction: column;
+     }
+     .text-content {
+      font-size: 15px;
+     }
+     .menu_btn{
+      font-size: 18px;
+     }
+   }
+
+  @media screen and (max-width: 850px) {
+
+    header {
+        display: none;
+    }
+    .sidenav {
+        align-self: center;
+        width: 250px;
+        height: 400px;
+    }
+    .content{
+        flex-direction: column;
+        height: 500px;
+    }
+    .image {
+        flex-direction: column;
+    }
+    .text-content {
+      font-size: 20px;
+     }
+     .menu_btn{
+      font-size: 20px;
+     }
+  } 
+
+  @media (max-width: 1154px) {
+    body {
+     overflow: scroll;
+    }
+     header {
+         display: none;
+     }
+     .sidenav {
+         align-self: center;
+     }
+     .content {
+      flex-direction: column;
+      height: 700px;
+      width: 700px;
+
+     }
+     .image {
+      overflow: scroll;
+     }
+     .text-content {
+      font-size: 23px;
+     }
+    }
+
+  @media (max-width: 1194px) {
+    body {
+     overflow: auto;
+    }
+     header {
+         display: none;
+     }
+     .sidenav {
+         align-self: center;
+     }
+     .content {
+      flex-direction: column;
+      height: 650px;
+
+     }
+     .image {
+         flex-direction: column;
+         align-self: center;
+     }
+   } 
+
+
+  @media (max-width: 1299px) {
+   body {
+    overflow: auto;
+   }
+    header {
+        display: none;
+    }
+    .sidenav {
+        align-self: center;
+    }
+    .image {
+        flex-direction: column;
+    }
+  } 
+
+
+
+
+
+