js-dom (#295)

* js-dom * fix some code * fix js * add render function,change showPopup() * fixed js
kottans · Sep 14, 2022 · 920a95d · 920a95d
1 parent 2c4257c
commit 920a95d
Show file tree

Hide file tree

Showing 3 changed files with 358 additions and 0 deletions.
diff --git a/submissions/Yasya23/js-dom/index.html b/submissions/Yasya23/js-dom/index.html
@@ -0,0 +1,38 @@
+<!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>Animal photos</title>
+    <link rel="stylesheet" href="src/style.css" />
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="popup">
+        <div class="popup__box" id="popup">
+          <div class="popup__line"></div>
+          <div class="popup__line"></div>
+          <div class="popup__line"></div>
+        </div>
+        <nav>
+          <ul class="navigation" id="navigation">
+            <li class="navigation__item" data-id="cat">
+              <a href="#" data-id="cat">Cats</a>
+            </li>
+            <li class="navigation__item" data-id="dog">
+              <a href="#" data-id="dog">Dogs</a>
+            </li>
+            <li class="navigation__item" data-id="horses">
+              <a href="#" data-id="horses">Horses</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <main>
+        <div class="img"></div>
+      </main>
+    </div>
+    <script src="src/script.js"></script>
+  </body>
+</html>
diff --git a/submissions/Yasya23/js-dom/script.js b/submissions/Yasya23/js-dom/script.js
@@ -0,0 +1,180 @@
+"use strict";
+
+const animalList = [
+  {
+    species: "cat",
+    src: "img/Cats/1.jpg",
+    alt: "The man strokes the cat.",
+  },
+  {
+    species: "cat",
+    src: "img/Cats/2.jpg",
+    alt: "Ginger cat is stretching.",
+  },
+  {
+    species: "cat",
+    src: "img/Cats/3.jpg",
+    alt: "The cat is sitting on the table.",
+  },
+  {
+    species: "cat",
+    src: "img/Cats/4.jpg",
+    alt: "Ginger cat looks up.",
+  },
+  {
+    species: "cat",
+    src: "img/Cats/5.jpg",
+    alt: "Four cats on the kitchen surface.",
+  },
+  {
+    species: "cat",
+    src: "img/Cats/6.jpg",
+    alt: "The cat sleeps in the bed.",
+  },
+  {
+    species: "cat",
+    src: "img/Cats/7.jpg",
+    alt: "The face of a red fluffy cat.",
+  },
+  {
+    species: "cat",
+    src: "img/Cats/8.jpg",
+    alt: "Two cats are lying.",
+  },
+  {
+    species: "cat",
+    src: "img/Cats/9.jpg",
+    alt: "Three kittens.",
+  },
+  {
+    species: "dog",
+    src: "img/Dogs/1.jpg",
+    alt: "A white puppy runs across the grass.",
+  },
+  {
+    species: "dog",
+    src: "img/Dogs/2.jpg",
+    alt: "Nine dogs against a pink wall.",
+  },
+  {
+    species: "dog",
+    src: "img/Dogs/3.jpg",
+    alt: "Dog with one drooping ear.",
+  },
+  {
+    species: "dog",
+    src: "img/Dogs/4.jpg",
+    alt: "Two dogs run along the path.",
+  },
+  {
+    species: "dog",
+    src: "img/Dogs/5.jpg",
+    alt: "A woman holds a dog in her arms.",
+  },
+  {
+    species: "dog",
+    src: "img/Dogs/6.jpg",
+    alt: "Two white and brown dogs.",
+  },
+  {
+    species: "dog",
+    src: "img/Dogs/7.jpg",
+    alt: "Two dogs white and black.",
+  },
+  {
+    species: "dog",
+    src: "img/Dogs/8.jpg",
+    alt: "Two dogs run along the path.",
+  },
+  {
+    species: "dog",
+    src: "img/Dogs/9.jpg",
+    alt: "Red dog.",
+  },
+  {
+    species: "horses",
+    src: "img/Horses/1.jpg",
+    alt: "The white horse is running.",
+  },
+  {
+    species: "horses",
+    src: "img/Horses/2.jpg",
+    alt: "The horse's head lies on the back of another.",
+  },
+  {
+    species: "horses",
+    src: "img/Horses/3.jpg",
+    alt: "Two horses in the meadow.",
+  },
+  {
+    species: "horses",
+    src: "img/Horses/4.jpg",
+    alt: "Brown horse.",
+  },
+  {
+    species: "horses",
+    src: "img/Horses/5.jpg",
+    alt: "Three horses.",
+  },
+  {
+    species: "horses",
+    src: "img/Horses/6.jpg",
+    alt: "White horse in the field.",
+  },
+  {
+    species: "horses",
+    src: "img/Horses/7.jpg",
+    alt: "Two horses white and brown are grazing.",
+  },
+  {
+    species: "horses",
+    src: "img/Horses/8.jpg",
+    alt: "Four brown horses are running.",
+  },
+  {
+    species: "horses",
+    src: "img/Horses/9.jpg",
+    alt: "Brown horse.",
+  },
+];
+
+const popupIcon = document.querySelector("#popup");
+const menuList = document.querySelector(".navigation");
+const mainContent = document.querySelector('.img');
+
+const getRandomSpecies = (speciesList) => speciesList.sort(() => 0.5 - Math.random());
+const initValueList = getRandomSpecies(animalList).slice(0, 9);
+
+
+function changeImagesByClick({ target }){
+  if(target.dataset.id) {
+    const targetSpecies = animalList.filter(animal => animal.species == target.dataset.id);
+    render(targetSpecies);
+  }
+}
+
+function showPopup() {
+  menuList.classList.toggle("navigation__none");
+}
+
+function render(speciesList) {
+  const template = speciesList.reduce((gap, species, key) => {
+    if(key === 0 || key % 3) {
+      gap += `<img class="img__js" src="${species.src}" alt="${species.alt}"></img>`;
+    } else {
+      gap += `</div><div class='img__column'><img class="img__js" src="${species.src}" alt="${species.alt}"></img>`;
+    }
+    return gap;
+  }, "<div class='img__column'>");
+
+  mainContent.innerHTML = template + "</div>";
+}
+
+function init() {
+  popupIcon.addEventListener("click", showPopup);
+  menuList.addEventListener("click", changeImagesByClick);
+
+  render(initValueList)
+}
+
+window.addEventListener('DOMContentLoaded', init);
diff --git a/submissions/Yasya23/js-dom/style.css b/submissions/Yasya23/js-dom/style.css
@@ -0,0 +1,140 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+ul {
+  list-style: none;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.wrapper {
+  max-width: 1024px;
+  margin: 4% auto;
+}
+
+.navigation {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin-bottom: 1.5rem;
+}
+
+.navigation__item a {
+  text-decoration: none;
+  font-size: 1.2rem;
+  color: rgb(61, 61, 61);
+}
+
+.navigation__item a:focus,
+.navigation__item a:focus-visible {
+  outline: none;
+}
+
+.navigation__item {
+  padding: 0.6rem 1.8rem;
+  border: 1px solid #bdbdbd;
+  border-radius: 5px;
+}
+
+.navigation__item:hover,
+.navigation__item:focus-within,
+.navigation__item:active {
+  border: 1px solid #000000;
+}
+
+.navigation__item a:active {
+  color: #000000;
+}
+
+.img {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 0.3rem;
+}
+
+.img__column {
+  flex: 25%;
+  max-width: 100%;
+  padding: 0 0.5rem;
+}
+
+.img__column img {
+  margin-top: 0.5rem;
+  width: 100%;
+  height: auto;
+}
+
+@media screen and (max-width: 600px) {
+  .img__column {
+    flex: 100%;
+    max-width: 100%;
+  }
+
+  .popup {
+    position: fixed;
+    display: block;
+    top: 0;
+    width: 100vw;
+    height: 2.7rem;
+    background-color: #ffffff;
+  }
+
+  .popup__box {
+    position: absolute;
+    top: 0.6rem;
+    right: 1.25rem;
+    width: 1.25rem;
+  }
+
+  .popup__line {
+    border-bottom: 2px solid #bdbdbd;
+    padding-bottom: 0.3rem;
+  }
+
+  .popup__box:hover > .popup__line,
+  .popup__box:focus > .popup__line {
+    border-bottom: 2px solid rgb(0, 0, 0);
+  }
+
+  .navigation {
+    position: absolute;
+    top: 1rem;
+    width: 100%;
+    margin-top: 1.6rem;
+    background-color: #ffffffc9;
+  }
+
+  .navigation__item {
+    flex: 100%;
+    border: none;
+    border-radius: 0;
+    border-bottom: 1px solid #ffffff;
+    text-align: center;
+  }
+
+  .navigation__item:hover {
+    border: none;
+    background-color: #ffffff;
+  }
+
+  .navigation__item:focus-within,
+  .navigation__item:active {
+    border: none;
+    border-bottom: 1px solid #ffffff;
+  }
+
+  .navigation__item a:active,
+  .navigation__item a:focus,
+  .navigation__item a:hover {
+    color: #000000;
+    font-weight: 600;
+  }
+
+  .navigation__none {
+    display: none;
+  }
+}