cdv-poznan · MiloszStochaj · Mar 24, 2022 · Mar 27, 2022 · Apr 15, 2022 · May 5, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/Dumbledore.png b/Dumbledore.png
diff --git a/background__front.mp4 b/background__front.mp4
diff --git a/index.html b/index.html
@@ -0,0 +1,124 @@
+<!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>Wizarding Cards</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <script
+      src="https://kit.fontawesome.com/098c030963.js"
+      crossorigin="anonymous"
+    ></script>
+  </head>
+  <body>
+    <div id="container">
+      <header id="top" class="header">
+        <video
+          class="background__front"
+          src="/background__front.mp4"
+          autoplay
+          loop
+          muted
+        >
+          <p>Sorry, no video</p>
+        </video>
+
+        <div class="header__description nav">
+          <h1>
+            Explore <br />
+            Wizarding <br />
+            World!
+          </h1>
+          <div class="links">
+            <ul class="nav__links">
+              <li class="nav__item">
+                <a class="nav__link check__character" href="#section--1"
+                  >Check Character</a
+                >
+              </li>
+              <li class="nav__item">
+                <a class="nav__link book__of__spells" href="#section--2"
+                  >Book of Spells</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </header>
+
+      <section class="section" id="section--1">
+        <div class="section__container">
+          <div class="section__title">Check Character</div>
+          <form action="#" class="search__container">
+            <input
+              type="search"
+              id="site-search"
+              class="input__form"
+              name="q"
+              placeholder="Enter name of character.."
+            />
+            <button type="submit" id="btn__form">
+              <i class="fa-solid fa-magnifying-glass fa-2xl"></i>
+            </button>
+          </form>
+
+          <div class="character__data"></div>
+        </div>
+      </section>
+
+      <section class="section" id="section--2">
+        <div class="section__title">Book Of Spells</div>
+
+        <div class="spells__container--1"></div>
+        <div class="spells__container--2 hidden"></div>
+
+        <button class="show__btn show__more">Show more</button>
+
+        <button class="show__btn show__less hidden">Show less</button>
+      </section>
+
+      <footer class="footer">
+        <div class="footer__img">
+          <img src="/Dumbledore.png" alt="Dumbledore_IMG" />
+          <img src="/stars_gold.png" alt="Gold_stars_IMG" />
+        </div>
+
+        <p class="footer__copyright">
+          &copy; Copyright by
+          <a target="_blank" href="https://github.com/MiloszStochaj"
+            >Miłosz Stochaj</a
+          >
+        </p>
+
+        <div class="links__icons">
+          <a href="https://twitter.com/mi_stochaj"
+            ><i class="fa-brands fa-twitter"></i
+          ></a>
+          <a href="https://github.com/MiloszStochaj"
+            ><i class="fa-brands fa-github"></i
+          ></a>
+          <a href="https://www.linkedin.com/in/mi%C5%82osz-stochaj-931296125/"
+            ><i class="fa-brands fa-linkedin"></i
+          ></a>
+        </div>
+      </footer>
+
+      <div class="return__button nav__links">
+        <a href="#top"><i class="fa-solid fa-chevron-up nav__link"></i></a>
+      </div>
+    </div>
+
+    <div class="modal hidden">
+      <button class="btn--close-modal">&times;</button>
+      <h2>Oops, invalid name. Try one of the following:</h2>
+      <div class="nick__name"></div>
+    </div>
+    <div class="overlay hidden"></div>
+
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,181 @@
+const firstSpellsInformationContainer = document.querySelector(
+  ".spells__container--1"
+);
+const secondSpellsInformationContainer = document.querySelector(
+  ".spells__container--2"
+);
+const characterInformationContainer =
+  document.querySelector(".character__data");
+const nickNameInformationContainer = document.querySelector(".nick__name");
+const searchContainer = document.querySelector(".search__container");
+const showMoreBtn = document.querySelector(".show__more");
+const showLessBtn = document.querySelector(".show__less");
+const modal = document.querySelector(".modal");
+const overlay = document.querySelector(".overlay");
+const btnCloseModal = document.querySelector(".btn--close-modal");
+
+// Page navigation
+
+document.querySelector(".nav__links").addEventListener("click", function (e) {
+  e.preventDefault();
+
+  // Matching strategy
+
+  if (e.target.classList.contains("nav__link")) {
+    const id = e.target.getAttribute("href");
+    document.querySelector(id).scrollIntoView({ behavior: "smooth" });
+  }
+});
+
+// Get information about spells
+
+window.addEventListener("DOMContentLoaded", (event) => {
+  //   fetch(`https://fedeperin-harry-potter-api-en.herokuapp.com/spells`)
+  fetch(`https://harry-potter-api-english-production.up.railway.app/spells`)
+    .then((response) => response.json())
+    .then((data) => {
+      for (let i = 0; i < 72; i++) {
+        const spellDataResult = data[i];
+
+        if (i < 12) {
+          const firstHtmlSpells = `
+        <div class='spells__information'>
+  <p>${spellDataResult.spell}</p>
+  <p class="use">${spellDataResult.use}</p>
+
+</div>`;
+
+          firstSpellsInformationContainer.insertAdjacentHTML(
+            "beforeend",
+            firstHtmlSpells
+          );
+        } else if (i >= 12) {
+          const secondHtmlSpells = `
+        <div class='spells__information'>
+  <p>${spellDataResult.spell}</p>
+  <p class="use">${spellDataResult.use}</p>
+
+</div>`;
+
+          secondSpellsInformationContainer.insertAdjacentHTML(
+            "beforeend",
+            secondHtmlSpells
+          );
+        }
+      }
+    });
+});
+
+// Show more spells button
+
+const showMore = function () {
+  secondSpellsInformationContainer.classList.remove("hidden");
+  showMoreBtn.classList.add("hidden");
+  showLessBtn.classList.remove("hidden");
+};
+
+const showLess = function () {
+  secondSpellsInformationContainer.classList.add("hidden");
+  showMoreBtn.classList.remove("hidden");
+  showLessBtn.classList.add("hidden");
+};
+
+showMoreBtn.addEventListener("click", showMore);
+showLessBtn.addEventListener("click", showLess);
+
+// Modal Window
+
+const closeModal = function () {
+  modal.classList.add("hidden");
+  overlay.classList.add("hidden");
+  nickNameInformationContainer.textContent = "";
+};
+
+btnCloseModal.addEventListener("click", closeModal);
+overlay.addEventListener("click", closeModal);
+
+document.addEventListener("keydown", function (e) {
+  if (e.key && !modal.classList.contains("hidden")) {
+    closeModal();
+  }
+});
+
+// Modal Window - nick character help
+const nickCharacterHelp = function () {
+  modal.classList.remove("hidden");
+  overlay.classList.remove("hidden");
+
+  // fetch(`https://fedeperin-harry-potter-api-en.herokuapp.com/characters`)
+  fetch(`https://harry-potter-api-english-production.up.railway.app/characters`)
+    .then((response) => response.json())
+    .then((data) => {
+      for (let i = 0; i < 23; i++) {
+        const nickCharacterHelpData = data[i];
+        const nickHtml = `
+        <p>${nickCharacterHelpData.nickname},</p>
+        `;
+
+        nickNameInformationContainer.insertAdjacentHTML("beforeend", nickHtml);
+      }
+    });
+};
+
+// Get information about Character
+
+const getInformationNick = function (characterNick) {
+  //   fetch(`https://fedeperin-harry-potter-api-en.herokuapp.com/characters`)
+  fetch(`https://harry-potter-api-english-production.up.railway.app/characters`)
+    .then((response) => response.json())
+    .then((data) => {
+      const nickDataResult = data.find(
+        ({ nickname }) => nickname === `${characterNick}`
+      );
+
+      if (nickDataResult === undefined) {
+        // alert("blad");
+        nickCharacterHelp();
+      } else {
+        if (nickDataResult.child.length === 0) {
+          nickDataResult.child = "NO DATA";
+        }
+
+        const html = `
+        <img class="character__image" src="${nickDataResult.image}" alt="No_data">
+        <div class="character__information">
+        <h1>Character information:</h1>
+        <p title="Name">Name: ${nickDataResult.character}</p>
+        <p title="House">House: ${nickDataResult.hogwartsHouse}</p>
+        <p class="Child" title="Child">Child: ${nickDataResult.child}</p>
+        <p title="Actor">Actor: ${nickDataResult.interpretedBy}</p>
+
+        </div>
+        `;
+
+        characterInformationContainer.insertAdjacentHTML("beforeend", html);
+      }
+    });
+};
+
+getInformationNick("Harry");
+
+// Capitalize The First Letter Of Each Word in input__form
+
+function capitalizeTheFirstLetterOfEachWord(word) {
+  const separateWord = word.toLowerCase().split(" ");
+  for (let i = 0; i < separateWord.length; i++) {
+    separateWord[i] =
+      separateWord[i].charAt(0).toUpperCase() + separateWord[i].substring(1);
+  }
+  return separateWord.join(" ");
+}
+
+// Action on click
+
+searchContainer.addEventListener("submit", function (e) {
+  characterInformationContainer.innerHTML = "";
+  e.preventDefault();
+  const characterNameFromUser = capitalizeTheFirstLetterOfEachWord(
+    document.querySelector(".input__form").value
+  );
+  getInformationNick(characterNameFromUser);
+});
diff --git a/stars_gold.png b/stars_gold.png