Refatorando functions

ek1l · May 10, 2023 · 8ea49bc · 8ea49bc
1 parent 2f6b95e
commit 8ea49bc
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 30 deletions.
diff --git a/02-functions/00-galeria-fotos/assets/main.js b/02-functions/00-galeria-fotos/assets/main.js
@@ -50,12 +50,7 @@ const data = {
 };
 
 let posicao = 0;
-let total = data.pictures.length
-
-
-renderImage(data.pictures[posicao]);
-renderThumbnail(templateThumbnailList(data.pictures))
-
+let total = data.pictures.length;
 
 function renderThumbnail(htmlThumbnails) {
   document.getElementById("container-fotos-lista").innerHTML = htmlThumbnails;
@@ -84,22 +79,13 @@ function renderImage(photoName) {
   document.getElementById("img-principal").src = `fotos/${photoName}`;
 }
 
-
-
 function handleThumbnailClick(event) {
   event.preventDefault();
 
   posicao = parseInt(event.currentTarget.getAttribute("data-posicao"), 10);
-
-  renderImage(data.pictures[posicao]);
-  markArrows();
-  markThumbnail();
+  renderGallery()
 }
 
-
-
-
-
 function prevPosition(position) {
   return position <= 0 ? 0 : position - 1;
 }
@@ -116,22 +102,21 @@ function handleArrowsClick(event) {
       ? prevPosition(posicao)
       : nextPosition(posicao, total);
 
-  renderImage(data.pictures[posicao]);
-
-  markArrows();
-  markThumbnail();
+      renderGallery()
 }
 
-const todasFotos = document.querySelectorAll(".foto-item");
+function bindEvent() {
+  const todasFotos = document.querySelectorAll(".foto-item");
 
-for (let i = 0; i < todasFotos.length; i++) {
-  todasFotos[i].addEventListener("click", handleThumbnailClick);
-}
+  for (let i = 0; i < todasFotos.length; i++) {
+    todasFotos[i].addEventListener("click", handleThumbnailClick);
+  }
 
-const botoes = document.querySelectorAll(".btn");
+  const botoes = document.querySelectorAll(".btn");
 
-for (let i = 0; i < botoes.length; i++) {
-  botoes[i].addEventListener("click", handleArrowsClick);
+  for (let i = 0; i < botoes.length; i++) {
+    botoes[i].addEventListener("click", handleArrowsClick);
+  }
 }
 
 function markArrows() {
@@ -158,5 +143,17 @@ function markThumbnail() {
 
   items[posicao].classList.add("border-primary");
 }
-markArrows();
-markThumbnail();
+
+const renderGallery = () => {
+  renderImage(data.pictures[posicao]);
+  markArrows();
+  markThumbnail();
+};
+
+function init() {
+  renderThumbnail(templateThumbnailList(data.pictures));
+  renderGallery();
+  bindEvent();
+}
+
+init();
diff --git a/02-functions/00-galeria-fotos/index.html b/02-functions/00-galeria-fotos/index.html
@@ -16,7 +16,7 @@
         <img id="img-principal" class="img-fluid" />
       </div>
     </div>
-    
+
     <div id="fotos-lista" class="d-flex flex-nowrap align-items-center mt-5">
       <button id="btn-anterior" class="btn btn-link disabled">
         <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-arrow-left-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">