I create a navbar for filter the themes

.gitignore

@@ -0,0 +1 @@
+.vscode

README.md

@@ -0,0 +1,3 @@
+Contribution for  the *teffCode* page.
+
+Y create a navbar for render the diferent quizzes and search more easily by theme 

index.html

@@ -12,6 +12,8 @@
       <img src="https://i.ibb.co/GR3QNyt/Header.png" alt="Personas resolviendo un quíz">
       <h1>Teffcode's Quizzes</h1>
     </header>
+    <!-- add nav -->
+    <nav class="nav"></nav>
     <main class="quizzes-main"></main>
     <footer class="quizzes-footer">
       <p>If you like my work,</p>

quizzes.js

@@ -1,65 +1,110 @@
-import { quizzes, images, color } from "./utils.js"
+import { quizzes, images, color } from "./utils.js";
 
 class Quizzes {
   constructor() {
-    this.cardsContainer = document.querySelector(".quizzes-main")
-    this.card = document.createElement("a")
-    this.image = document.createElement("img")
-    this.label = document.createElement("p")
-    this.title = document.createElement("h2")
-    this.date = document.createElement("span")
-
-    this.javascript = "JavaScript"
-    this.css = "CSS"
+    this.cardsContainer = document.querySelector(".quizzes-main");
+    this.navContainer = document.querySelector(".nav");
+    this.card = document.createElement("a");
+    this.image = document.createElement("img");
+    this.label = document.createElement("p");
+    this.title = document.createElement("h2");
+    this.date = document.createElement("span");
+    this.nav = document.createElement("nav");
+    this.li = document.createElement("li");
 
-    this.createCards()
+    this.filter = [];
+
+    this.javascript = "JavaScript";
+    this.css = "CSS";
   }
-  
+
   setAttributes(el, attrs) {
-    for(var key in attrs) {
+    for (var key in attrs) {
       el.setAttribute(key, attrs[key]);
     }
   }
 
-  getImageByCard(quizTechnology){
-    const packageImages = images.filter(image => {
-
-      if(image.categories.includes(quizTechnology)){
+  getImageByCard(quizTechnology) {
+    const packageImages = images.filter((image) => {
+      if (image.categories.includes(quizTechnology)) {
         return image;
       }
     });
 
-    return packageImages
+    return packageImages;
   }
-  
-  setColorByQuizzTechnology(quizTechnology){
+
+  setColorByQuizzTechnology(quizTechnology) {
     switch (quizTechnology) {
       case this.javascript:
-        this.cardContainer.getElementsByTagName("p")[0].style.backgroundColor = color.SHALIMARA;
+        this.cardContainer.getElementsByTagName("p")[0].style.backgroundColor =
+          color.SHALIMARA;
         break;
       case this.css:
-        this.cardContainer.getElementsByTagName("p")[0].style.backgroundColor = color.CARNATION_PINK;
+        this.cardContainer.getElementsByTagName("p")[0].style.backgroundColor =
+          color.CARNATION_PINK;
         break;
       default:
-        this.cardContainer.getElementsByTagName("p")[0].style.backgroundColor = color.AQUAMARINE;
+        this.cardContainer.getElementsByTagName("p")[0].style.backgroundColor =
+          color.AQUAMARINE;
         break;
     }
   }
 
   createCards() {
-    quizzes.forEach(quiz => {
+    this.filter.forEach((quiz) => {
       const imagesByCategoryQuiz = this.getImageByCard(quiz.technology);
-      const randomImage = Math.floor(Math.random() * imagesByCategoryQuiz.length);
-      this.cardContainer = this.cardsContainer.appendChild(this.card.cloneNode(true))
-      this.cardContainer.setAttribute("href", quiz.url)
-      this.cardContainer.setAttribute("target", "_blank")
-      this.setAttributes(this.cardContainer.appendChild(this.image.cloneNode(true)), {"src": imagesByCategoryQuiz[randomImage].src, "alt": imagesByCategoryQuiz[randomImage].alt})
-      this.cardContainer.appendChild(this.label.cloneNode(true)).innerHTML = quiz.technology
-      this.cardContainer.appendChild(this.title.cloneNode(true)).innerHTML = quiz.name
-      this.cardContainer.appendChild(this.date.cloneNode(true)).innerHTML = quiz.date
+      const randomImage = Math.floor(
+        Math.random() * imagesByCategoryQuiz.length
+      );
+      this.cardContainer = this.cardsContainer.appendChild(
+        this.card.cloneNode(true)
+      );
+      this.cardContainer.setAttribute("href", quiz.url);
+      this.cardContainer.setAttribute("target", "_blank");
+      this.setAttributes(
+        this.cardContainer.appendChild(this.image.cloneNode(true)),
+        {
+          src: imagesByCategoryQuiz[randomImage].src,
+          alt: imagesByCategoryQuiz[randomImage].alt,
+        }
+      );
+      this.cardContainer.appendChild(this.label.cloneNode(true)).innerHTML =
+        quiz.technology;
+      this.cardContainer.appendChild(this.title.cloneNode(true)).innerHTML =
+        quiz.name;
+      this.cardContainer.appendChild(this.date.cloneNode(true)).innerHTML =
+        quiz.date;
       this.setColorByQuizzTechnology(quiz.technology);
-    })
+    });
+  }
+
+  //generate the 'li elements inside nav
+  createnav(type) {
+    this.navContainer.appendChild(this.li.cloneNode(true)).innerHTML = type;
+  }
+  //remove the childs for actualizate the cards
+  removeCards() {
+    while (this.cardsContainer.firstChild) {
+      this.cardsContainer.removeChild(this.cardsContainer.firstChild);
+    }
   }
 }
+const input = new Quizzes();
+
+//generate the diferents 'li' inside 'nav'
+input.createnav("CSS");
+input.createnav("JavaScript");
+input.createnav("UI");
+
+//get the 'li' elements for create event listener
+const liSelect = document.getElementsByTagName("li");
+liSelect.item(addEventListener("click", create));
+//funtion call when you click in the 'li'
+function create(e) {
+  input.filter = quizzes.filter((el) => el.technology == e.target.innerHTML);
+  input.removeCards();
+  input.createCards();
+}
 
-new Quizzes()
+export default quizzes;

styles.css

@@ -61,6 +61,24 @@ html {
   font-size: 62.5%;
 }
 
+.nav{
+  display: flex;
+  width: 100%;
+  font-size: 2rem;
+  list-style: none;
+  justify-content: space-around;
+  box-shadow: 0 0 11px rgba(33,33,33,.2);
+}
+li{
+  padding: 1rem;
+}
+li:hover{
+  cursor: pointer;
+  background-color: var(--black);
+  color: var(--light-gray);
+  border-radius: var(--r-md);
+}
+
 .quizzes-container {
   background-attachment: fixed;
   background-image: url(https://images.unsplash.com/photo-1601662528567-526cd06f6582?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=716&q=80);