Merge pull request #30 from thiagofqs/implementacao-sass

refactor: conversão de CSS para SASS

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";
+    }
+});

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);

assets/sass/_variables.sass

@@ -0,0 +1,17 @@
+$light-green: #5e9188
+$dark-green: #3e5954
+$dark-blue: #253342
+$black: #232226
+$white: #ffffff
+$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