Feat: Adiciona lógica para ter mais de uma linguagem

assets/data/tags.json

@@ -0,0 +1,52 @@
+{
+  "tags": {
+    "All": {
+      "en": "All",
+      "pt-BR": "Todos"
+    },
+    "Favorites": {
+      "en": "Favorites",
+      "pt-BR": "Favoritos"
+    },
+    "Back-end": {
+      "en": "Back-end",
+      "pt-BR": "Back-end"
+    },
+    "Library": {
+      "en": "Library",
+      "pt-BR": "Biblioteca"
+    },
+    "Concept": {
+      "en": "Concept",
+      "pt-BR": "Conceito"
+    },
+    "Design": {
+      "en": "Design",
+      "pt-BR": "Design"
+    },
+    "Tool": {
+      "en": "Tool",
+      "pt-BR": "Ferramenta"
+    },
+    "Framework": {
+      "en": "Framework",
+      "pt-BR": "Framework"
+    },
+    "Front-end": {
+      "en": "Front-end",
+      "pt-BR": "Front-end"
+    },
+    "Mobile": {
+      "en": "Mobile",
+      "pt-BR": "Mobile"
+    },
+    "Paradigm": {
+      "en": "Paradigm",
+      "pt-BR": "Paradigma"
+    },
+    "Versioning": {
+      "en": "Versioning",
+      "pt-BR": "Versionamento"
+    }
+  }
+}

assets/js/script.js

@@ -1,47 +1,38 @@
 import "./dark_mode.js";
+import { getCards, getTags } from "./translate.js";
 
 const searchInput = document.querySelector("#search-input");
 const cardsSection = document.querySelector("#cards");
 const filterSelect = document.querySelector("#tags-filter");
+const languageSelect = document.querySelector("#language-select");
+
 let listOfCardsFiltered = [];
 let favoriteCards = [];
 const starIcon = "https://img.icons8.com/ios/50/star--v1.png";
 const starIconFilled =
     "https://img.icons8.com/ios-glyphs/30/ffe100/star--v1.png";
 
 function insertTagsIntoSelect(tags) {
-    tags.sort();
+    while (filterSelect.firstChild) {
+        filterSelect.removeChild(filterSelect.firstChild);
+    }
+
+    tags.sort(tag => tag.text);
     for (const tag of tags) {
         const newOption = document.createElement("option");
-        newOption.value = tag;
-        newOption.text = tag;
+        newOption.value = tag.value;
+        newOption.text = tag.text;
         filterSelect.appendChild(newOption);
     }
 }
 
-function getTagsFromCards(data) {
-    const tags = ["Favoritos"];
-    data.map((objeto) => {
-        if (objeto.tags) {
-            objeto.tags.map((tag) => {
-                if (!tags.includes(tag)) {
-                    tags.push(tag);
-                }
-            });
-        } else {
-            objeto.tags = [];
-        }
-    });
-    insertTagsIntoSelect(tags);
-}
-
 function filterCards() {
     listOfCardsFiltered = [];
     const listOfCards = document.querySelectorAll(".card");
     listOfCards.forEach((element) => {
         if (
             element.getAttribute("tags").includes(filterSelect.value) ||
-            filterSelect.value == "Todos"
+            filterSelect.value == "All"
         ) {
             element.style.display = "";
             listOfCardsFiltered.push(element);
@@ -97,7 +88,7 @@ function insertCardsIntoHtml(data) {
         const formatedTitle = formatCardTitle(card.title);
         cards += `
         <section class="card" tags="${
-            card.tags ? card.tags : "Todos"
+            card.tags ? card.tags : "All"
         }" id="${formatedTitle}">
             <div class="card__header">
                 <h3 class="card__title">${card.title}</h3>
@@ -106,7 +97,7 @@ function insertCardsIntoHtml(data) {
                     unique-title="${formatedTitle}"
                     id="fav_${formatedTitle}"
                     src="${
-                        card.tags.includes("Favoritos")
+                        card.tags.includes("Favorites")
                             ? starIconFilled
                             : starIcon
                     }"
@@ -140,10 +131,10 @@ function addFavoriteTagToCard(cardId) {
     const card = document.querySelector(`#${cardId}`);
     const tags = card.getAttribute("tags").split(",");
 
-    if (tags.includes("Favoritos")) {
-        tags.splice(tags.indexOf("Favoritos"), 1);
+    if (tags.includes("Favorites")) {
+        tags.splice(tags.indexOf("Favorites"), 1);
     } else {
-        tags.push("Favoritos");
+        tags.push("Favorites");
     }
 
     card.setAttribute("tags", tags);
@@ -179,7 +170,7 @@ async function addFavoriteTag(cards) {
             if (!card.tags) {
                 card.tags = [];
             }
-            card.tags.push("Favoritos");
+            card.tags.push("Favorites");
         }
     });
     return cards;
@@ -191,12 +182,13 @@ async function sortCardsByTitle(data) {
 
 async function getCardsFromJson() {
     try {
-        const res = await fetch("./assets/data/cards_pt-br.json");
-        const data = await res.json();
+        const language = languageSelect.value || "pt-BR";
+        const data = await getCards(language);
         const sortedCards = await sortCardsByTitle(data);
+        const tags = await getTags(language);
         await loadFavoriteCardsId();
         await addFavoriteTag(sortedCards);
-        getTagsFromCards(sortedCards);
+        insertTagsIntoSelect(tags);
         insertCardsIntoHtml(sortedCards);
     } catch (error) {
         console.error("An error occurred while fetching card data.", error);
@@ -205,4 +197,5 @@ async function getCardsFromJson() {
 
 searchInput.addEventListener("input", searchCards);
 filterSelect.addEventListener("change", filterCards);
+languageSelect.addEventListener("change", getCardsFromJson);
 getCardsFromJson();

assets/js/translate.js

@@ -0,0 +1,25 @@
+
+const CARD_PATHS = {
+    "pt-BR": "./assets/data/cards_pt-br.json",
+    "en": "./assets/data/cards_en.json",
+}
+
+const TAG_PATH = "./assets/data/tags.json";
+
+export const getCards = async(language) => {
+    const res = await fetch(CARD_PATHS[language] || CARD_PATHS["pt-BR"]);
+    return await res.json();
+};
+
+export const getTags = async (language) => {
+    const res = await fetch(TAG_PATH);
+    const data = await res.json();
+    const languageSelect = language || "pt-BR";
+    const tags = Object.keys(data.tags).map((tag) => (
+        {
+            text: data.tags[tag][languageSelect],
+            value: tag,
+        }
+    ))
+    return [...tags]
+}

index.html

@@ -39,6 +39,10 @@ <h2 class="header__subtitle">
       técnicos dentro da tecnologia 📖
     </h2>
 
+    <select id="language-select" class="language-select">
+      <option value="pt-BR">Português (Brasil)</option>
+      <option value="en">English</option>
+    </select>
     <button id="dark-mode-toggle" class="button-dark-mode">
       <i class="ph ph-moon"></i>
       <i class="ph ph-sun"></i>
@@ -55,9 +59,7 @@ <h2 class="header__subtitle">
       </div>
       <div class="filter">
         <label for="tags-filter" class="filter_label">Filtrar por categoria:</label>
-        <select id="tags-filter">
-          <option value="Todos" selected>Todos</option>
-        </select>
+        <select id="tags-filter"></select>
       </div>
     </div>
     <section class="cards" id="cards"></section>