From cc28d8547bbd140e66f292f07b322129040aa97d Mon Sep 17 00:00:00 2001
From: av952 <av952@github.com>
Date: Wed, 21 Sep 2022 16:36:18 -0500
Subject: [PATCH 1/3] Create navbar for easy navigation

---
 .vscode/settings.json |   3 ++
 index.html            |   2 +
 quizzes.js            | 113 +++++++++++++++++++++++++++++-------------
 styles.css            |  18 +++++++
 4 files changed, 102 insertions(+), 34 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index ed353e3..41e28a2 100644
--- a/index.html
+++ b/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>
diff --git a/quizzes.js b/quizzes.js
index 4d3ac79..676da07 100644
--- a/quizzes.js
+++ b/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;
diff --git a/styles.css b/styles.css
index 12b7267..1d51514 100644
--- a/styles.css
+++ b/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);

From 4fe51bffb8e7375218d297d2eae01367e5093bf3 Mon Sep 17 00:00:00 2001
From: av952 <av952@github.com>
Date: Wed, 21 Sep 2022 16:36:18 -0500
Subject: [PATCH 2/3] Create navbar for easy navigation

---
 .vscode/settings.json |   3 ++
 README.md             |   3 ++
 index.html            |   2 +
 quizzes.js            | 113 +++++++++++++++++++++++++++++-------------
 styles.css            |  18 +++++++
 5 files changed, 105 insertions(+), 34 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 README.md

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8083324
--- /dev/null
+++ b/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 
\ No newline at end of file
diff --git a/index.html b/index.html
index ed353e3..41e28a2 100644
--- a/index.html
+++ b/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>
diff --git a/quizzes.js b/quizzes.js
index 4d3ac79..676da07 100644
--- a/quizzes.js
+++ b/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;
diff --git a/styles.css b/styles.css
index 12b7267..1d51514 100644
--- a/styles.css
+++ b/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);

From f6a135681bc2ee4f6bb16ddf82bb70a9580f5efb Mon Sep 17 00:00:00 2001
From: av952 <alejandrov952@hotmail.com>
Date: Wed, 21 Sep 2022 16:45:52 -0500
Subject: [PATCH 3/3] delete dir

---
 .vscode/settings.json | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 6f3a291..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "liveServer.settings.port": 5501
-}
\ No newline at end of file