refactor: converte o código CSS do PR 28 para SASS e cria um arquivo …

…JS para o dark mode
levxyca · Sep 26, 2023 · 7cd1449 · 7cd1449
2 parents c6bf548 + b42d7ca
commit 7cd1449
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 80 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/css/style.css.map b/assets/css/style.css.map
diff --git a/assets/js/dark_mode.js b/assets/js/dark_mode.js
@@ -0,0 +1,18 @@
+const body = document.body;
+const darkModeToggle = document.querySelector("#dark-mode-toggle");
+const headerSubtitle = document.querySelector(".header__subtitle");
+const moonIcon = document.querySelector(".ph-moon");
+const sunIcon = document.querySelector(".ph-sun");
+
+darkModeToggle.addEventListener("click", () => {
+    body.classList.toggle("body-dark-mode");
+    headerSubtitle.classList.toggle("text-dark-mode");
+
+    if (body.classList.contains("body-dark-mode")) {
+        moonIcon.style.display = "none";
+        sunIcon.style.display = "inline";
+    } else {
+        sunIcon.style.display = "none";
+        moonIcon.style.display = "inline";
+    }
+});
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -1,49 +1,51 @@
+import "./dark_mode.js";
+
 const searchInput = document.querySelector("#search-input");
 const cardsSection = document.querySelector("#cards");
 
 function searchCards() {
-  const inputValue = searchInput.value.toLowerCase();
-  const listOfCards = document.querySelectorAll(".card");
+    const inputValue = searchInput.value.toLowerCase();
+    const listOfCards = document.querySelectorAll(".card");
 
-  for (const card of listOfCards) {
-    const cardContent = card.textContent.toLowerCase();
-    card.style.display = cardContent.includes(inputValue) ? "" : "none";
-  }
+    for (const card of listOfCards) {
+        const cardContent = card.textContent.toLowerCase();
+        card.style.display = cardContent.includes(inputValue) ? "" : "none";
+    }
 }
 
 function insertCardsIntoHtml(data) {
-  let cards = "";
-  data.forEach((card) => {
-    cards += `
+    let cards = "";
+    data.forEach((card) => {
+        cards += `
         <section class="card">
             <h3 class="card__title">${card.title}</h3>
             <p class="card__description">${card.description}</p>
         `;
-    if (card.content && card.content.code) {
-      cards += `
+        if (card.content && card.content.code) {
+            cards += `
             <div class="card__content">
                 <code class="card__code">${card.content.code}</code>
             </div>
             `;
-    }
-    cards += "</section>";
-  });
-  cardsSection.innerHTML = cards;
+        }
+        cards += "</section>";
+    });
+    cardsSection.innerHTML = cards;
 }
 
 async function sortCardsByTitle(data) {
-  return data.cards.sort((a, b) => a.title.localeCompare(b.title));
+    return data.cards.sort((a, b) => a.title.localeCompare(b.title));
 }
 
 async function getCardsFromJson() {
-  try {
-    const res = await fetch("./assets/data/cards_pt-br.json");
-    const data = await res.json();
-    const sortedCards = await sortCardsByTitle(data);
-    insertCardsIntoHtml(sortedCards);
-  } catch (error) {
-    console.error("An error occurred while fetching card data.", error);
-  }
+    try {
+        const res = await fetch("./assets/data/cards_pt-br.json");
+        const data = await res.json();
+        const sortedCards = await sortCardsByTitle(data);
+        insertCardsIntoHtml(sortedCards);
+    } catch (error) {
+        console.error("An error occurred while fetching card data.", error);
+    }
 }
 
 searchInput.addEventListener("input", searchCards);

diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass
@@ -7,3 +7,11 @@ $purple-500: #6e6197
 $gray-500: #9698a0
 $gray-300: #cccccc
 $gray-100: #f2f2f2
+
+// Light Mode
+$light-background-color: #ffffff
+$light-text-color: #333333
+
+// Dark Mode
+$dark-background-color: #333333
+$dark-text-color: #ffffff
diff --git a/assets/sass/style.sass b/assets/sass/style.sass
@@ -8,9 +8,11 @@
 
 body
     background-color: $white
+    color: $light-text-color
     font-family: "Roboto", sans-serif
     -webkit-font-smoothing: antialiased
     padding: 40px 24px
+    transition: background-color 0.5s ease-in-out
 
 ::-webkit-scrollbar
     width: 8px
@@ -45,6 +47,7 @@ input
         text-align: center
         color: $black
         font-weight: 400
+        transition: color 0.5s ease-in-out
 
 .main
     display: flex
@@ -111,7 +114,7 @@ input
         font-size: 2.4rem
 
     &__description
-        color: $black
+        color: #232226
         line-height: 160%
         font-size: 1.8rem
 
@@ -123,7 +126,36 @@ input
         border-radius: 4px
         color: $white
         background-color: $purple-500
-        font-size: 1.4rem // para caber no card e não quebrar linha
+        font-size: 1.4rem
+
+.body-dark-mode
+    background-color: $dark-background-color
+    color: $dark-text-color
+
+.text-dark-mode
+    color: $dark-text-color
+
+.button-dark-mode
+    background-color: $purple-500
+    color: $white
+    border: none
+    border-radius: 5px
+    padding: 10px 20px
+    cursor: pointer
+    position: absolute
+    top: 20px
+    right: 20px
+
+    & i
+        font-size: 1.4rem
+
+.body-dark-mode .ph-sun,
+:not(.body-dark-mode) .ph-moon
+    display: none
+
+.body-dark-mode .ph-moon,
+:not(.body-dark-mode) .ph-sun
+    display: inline
 
 @media screen and (max-width: 1200px)
     .card

diff --git a/index.html b/index.html
@@ -1,14 +1,13 @@
 <!DOCTYPE html>
 <html lang="pt-BR">
-  <head>
-    <!-- Meta settings -->
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
-      name="description"
-      content="Um dicionário tech para pessoas que querem aprender mais sobre termos técnicos dentro da tecnologia!"
-    />
+
+<head>
+  <!-- Meta settings -->
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description"
+    content="Um dicionário tech para pessoas que querem aprender mais sobre termos técnicos dentro da tecnologia!" />
 
     <!-- Favicon -->
     <link
@@ -17,48 +16,43 @@
       type="image/x-icon"
     />
 
-    <!-- CSS Imports -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet" href="assets/css/style.css" />
-    <title>Diciotech</title>
-  </head>
-  <body>
-    <header class="header">
-      <h1 class="header__title">
-        <img
-          src="/assets/img/brand/logo/colored.png"
-          width="480"
-          height="148"
-          alt="Diciotech"
-        />
-      </h1>
-      <h2 class="header__subtitle">
-        Um dicionário tech para pessoas que querem aprender mais sobre termos
-        técnicos dentro da tecnologia 📖
-      </h2>
-    </header>
-    <main class="main">
-      <div class="searchbar">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="searchbar__icon"
-          viewBox="0 0 16 16"
-        >
-          <path
-            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
-          />
-        </svg>
-        <input
-          id="search-input"
-          type="text"
-          name="search-input"
-          placeholder="Pesquisar..."
-          class="searchbar__input"
-        />
-      </div>
-      <section class="cards" id="cards"></section>
-    </main>
-    <script src="assets/js/script.js" type="module"></script>
-  </body>
+  <!-- CSS Imports -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="assets/css/style.css" />
+
+  <!-- Phosphor Icons -->
+  <script src="https://unpkg.com/@phosphor-icons/web"></script>
+
+  <title>Diciotech</title>
+</head>
+
+<body>
+  <header class="header">
+    <h1 class="header__title">
+      <img src="/assets/img/brand/logo/colored.png" width="480" height="148" alt="Diciotech" />
+    </h1>
+    <h2 class="header__subtitle">
+      Um dicionário tech para pessoas que querem aprender mais sobre termos
+      técnicos dentro da tecnologia 📖
+    </h2>
+
+    <button id="dark-mode-toggle" class="button-dark-mode">
+      <i class="ph ph-moon"></i>
+      <i class="ph ph-sun"></i>
+    </button>
+  </header>
+  <main class="main">
+    <div class="searchbar">
+      <svg xmlns="http://www.w3.org/2000/svg" class="searchbar__icon" viewBox="0 0 16 16">
+        <path
+          d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
+      </svg>
+      <input id="search-input" type="text" name="search-input" placeholder="Pesquisar..." class="searchbar__input" />
+    </div>
+    <section class="cards" id="cards"></section>
+  </main>
+  <script src="assets/js/script.js" type="module"></script>
+</body>
+
 </html>