Js code cleared

contact.html

@@ -12,7 +12,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;800;900&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="./css/contact.css" />
-    <script src="./js/contact.js" defer></script>
+    <script src="./js/index.js" defer></script>
     <link rel="icon" type="image/x-icon" href="./assets/homepage/favicon-vincentvangogh.webp" />
     <title>Discover Van Gogh - Contact</title>
   </head>

discover.html

@@ -12,7 +12,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;800;900&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="./css/discover.css" media="screen" />
-    <script src="./js/discover.js" defer async></script>
+    <script src="./js/index.js" defer async></script>
     <link rel="icon" type="image/x-icon" href="./assets/homepage/favicon-vincentvangogh.webp" media="screen" />
     <title>Discover Van Gogh - Discover</title>
   </head>

immersive.html

@@ -12,7 +12,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;800;900&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="./css/immersive.css" media="screen" />
-    <script src="./js/immersive.js" defer async></script>
+    <script src="./js/index.js" defer async></script>
     <link rel="icon" type="image/x-icon" href="./assets/homepage/favicon-vincentvangogh.webp" media="screen" />
     <title>Discover Van Gogh - Immersive Experience</title>
   </head>

js/arles.js

@@ -1,4 +1,3 @@
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y asignándolos a variables. */
 const hamburger = document.querySelector(".Hamburger");
 const headerUl = document.querySelector(".Header-ul");
 const circle = document.querySelector(".Circle");
@@ -9,38 +8,12 @@ const navLink = document.querySelectorAll(".Nav-link");
 //se le AÑADE a .Hamburger la clase .isActive
 //se le AÑADE a .Circle la clase .isActive
 
-/* Agrego un addEventListener al elemento con la clase "hamburger". Cuando lo clickeo, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
 hamburger.addEventListener("click", () => {
   headerUl.classList.toggle("isActive");
   hamburger.classList.toggle("isActive");
   circle.classList.toggle("isActive");
 });
 
-//Cuando hago MOUSEOVER sobre .navLink,
-//a TODOS .Header-li les AÑADO la clase .isInactive,
-
-//Cuando hago MOUSEOUT sobre .navLink,
-//a TODOS .Header-li les QUITO la clase .isInactive,
-
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Nav-link". */ 
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("isInactive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("isInactive");
-    });
-  });
-});
-
-// MAIN - Images
-/* Este código es para crear y manejar la funcionalidad de una galería de imágenes. */
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase o IDs y los asigno a variables. */
 const leftContainer = document.querySelector(".Left-container");
 const upContainer = document.querySelector(".Up-container");
 const downContainer = document.querySelector(".Down-container");
@@ -57,8 +30,6 @@ const cafe = document.getElementById("Cafe");
 //a portrait se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-
-/* Agrego un addEventListener al elemento con el nombre de clase "Left-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 leftContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   portrait.classList.remove("isHidden");
@@ -73,7 +44,6 @@ leftContainer.addEventListener("click", () => {
 //a rhone se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Up-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 upContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   rhone.classList.remove("isHidden");
@@ -88,7 +58,6 @@ upContainer.addEventListener("click", () => {
 //a cafe se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Down-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 downContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   cafe.classList.remove("isHidden");
@@ -102,7 +71,6 @@ downContainer.addEventListener("click", () => {
 //a portrait se le AÑADE la clase .isHidden,
 //a .Grid-container se le QUITA la clase .isHidden,
 
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Close-container". Cuando cualquiera de estos elementos es clickeado, el código ejecutará las siguientes acciones: */
 closeContainer.forEach((eachClose, i) => {
   closeContainer[i].addEventListener("click", () => {
     portrait.classList.add("isHidden");

js/auvers.js

@@ -1,4 +1,3 @@
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y asignándolos a variables. */
 const hamburger = document.querySelector(".Hamburger");
 const headerUl = document.querySelector(".Header-ul");
 const circle = document.querySelector(".Circle");
@@ -9,38 +8,13 @@ const navLink = document.querySelectorAll(".Nav-link");
 //se le AÑADE a .Hamburger la clase .isActive
 //se le AÑADE a .Circle la clase .isActive
 
-/* Agrego un addEventListener al elemento con la clase "hamburger". Cuando lo clickeo, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
 hamburger.addEventListener("click", () => {
   headerUl.classList.toggle("isActive");
   hamburger.classList.toggle("isActive");
   circle.classList.toggle("isActive");
 });
 
-//Cuando hago MOUSEOVER sobre .navLink,
-//a TODOS .Header-li les AÑADO la clase .isInactive,
-
-//Cuando hago MOUSEOUT sobre .navLink,
-//a TODOS .Header-li les QUITO la clase .isInactive,
-
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Nav-link". */ 
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("isInactive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("isInactive");
-    });
-  });
-});
-
 // MAIN - Images
-/* Este código es para crear y manejar la funcionalidad de una galería de imágenes. */
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase o IDs y los asigno a variables. */
 const leftContainer = document.querySelector(".Left-container");
 const upContainer = document.querySelector(".Up-container");
 const downContainer = document.querySelector(".Down-container");
@@ -58,7 +32,6 @@ const gachet = document.getElementById("Gachet");
 //a church se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Left-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 leftContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   church.classList.remove("isHidden");
@@ -73,7 +46,6 @@ leftContainer.addEventListener("click", () => {
 //a crows se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Up-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 upContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   crows.classList.remove("isHidden");
@@ -88,7 +60,6 @@ upContainer.addEventListener("click", () => {
 //a gachet se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Down-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 downContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   gachet.classList.remove("isHidden");
@@ -102,7 +73,6 @@ downContainer.addEventListener("click", () => {
 //a portrait se le AÑADE la clase .isHidden,
 //a .Grid-container se le QUITA la clase .isHidden,
 
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Close-container". Cuando cualquiera de estos elementos es clickeado, el código ejecutará las siguientes acciones: */
 closeContainer.forEach((eachClose, i) => {
   closeContainer[i].addEventListener("click", () => {
     church.classList.add("isHidden");

js/index.js

@@ -1,39 +1,28 @@
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y asignándolos a variables. */
+//index.js se ha vinculado a las siguientes páginas ya que compartían exactamente el mismo código y he decidido hacerlo así para optimizar muchas líneas de código: vincent's art, discover (loving e immersive), contact
+
+//Primero de todo selecciono los elementos del documento HTML utilizando sus nombres de clase y los asigno a las siguiente variables variables. */
+//Selecciono el elemento hamburger (será el menú de la página web)
 const hamburger = document.querySelector(".Hamburger");
+//Selecciono el elemento headerUl (será el fondo que aparecerá cuando esté activo)
 const headerUl = document.querySelector(".Header-ul");
+//Selecciono el elemento circle (será el círculo de alrededor del las tres barras que formarán el menú hamburguesa)
 const circle = document.querySelector(".Circle");
+//Selecciono el elemento navLink (es la lista de items de dentro de mi ul)
 const navLink = document.querySelectorAll(".Nav-link");
 
+//Mi intención es que pase lo siguiente cuando hago click en el menú hamburguesa en cualquier página de la web
 //Cuando hago CLICK en .Hamburger
 //se le AÑADE a .Header-ul la clase .isActive
 //se le AÑADE a .Hamburger la clase .isActive
 //se le AÑADE a .Circle la clase .isActive
 
-/* Agrego un addEventListener al elemento con la clase "hamburger". Cuando lo clickeo, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
+/* Para ello agrego un addEventListener al elemento con la clase "hamburger". 
+Cuando le hago click, como el evento está escuchando, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
 hamburger.addEventListener("click", () => {
+  //Cuando el evento esucha el 'click, esta línea de código agrega/quita la clase "isActive" del elemento con la clase "Header-ul". Si tiene la clase "isActive", la clase será removida; si no la tiene, la clase será añadida.
   headerUl.classList.toggle("isActive");
+  //Agrega o quita la clase "isActive" del propio elemento "hamburger". Si el elemento tiene la clase "isActive", la clase será removida; si no la tiene, la clase será añadida.
   hamburger.classList.toggle("isActive");
+  //Como ha pasado en las dos veces anteriores si el elemento tiene la clase "isActive", la clase será removida; si no la tiene, la clase será añadida.
   circle.classList.toggle("isActive");
-});
-
-//Cuando hago MOUSEOVER sobre .navLink,
-//a TODOS .Header-li les AÑADO la clase .isInactive,
-
-//Cuando hago MOUSEOUT sobre .navLink,
-//a TODOS .Header-li les QUITO la clase .isInactive,
-
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Nav-link". */ 
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("isInactive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("isInactive");
-    });
-  });
 });