From b6b24157350bef98b29014959f8df6ce68462296 Mon Sep 17 00:00:00 2001
From: kellysalas <ksalas039@gmail.com>
Date: Thu, 31 Oct 2024 09:47:34 -0300
Subject: [PATCH] componetizacion del footer

---
 cart.html         | 14 +++++---------
 categories.html   | 13 +++++--------
 index.html        | 13 +++++--------
 js/footer.js      | 14 ++++++++++++++
 my-profile.html   | 17 ++++-------------
 product-info.html | 13 ++++---------
 products.html     | 13 ++++---------
 sell.html         | 25 +++++++++++--------------
 8 files changed, 52 insertions(+), 70 deletions(-)
 create mode 100644 js/footer.js

diff --git a/cart.html b/cart.html
index c943c68..4132d74 100644
--- a/cart.html
+++ b/cart.html
@@ -81,15 +81,10 @@
     </section>
 
   </main>
-  <footer class="text-muted">
-    <div class="container">
-      <p class="float-end">
-        <a href="#">Volver arriba</a>
-      </p>
-      <p>Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">Jovenes a Programar</a>
-      </p>
-    </div>
-  </footer>
+
+  <!-- Contenedor para el FOOTER en footer.js -->
+  <div class="footer-container"></div>
+
   <div id="spinner-wrapper">
     <div class="lds-ring">
       <div></div>
@@ -101,6 +96,7 @@
   <script src="js/bootstrap.bundle.min.js"></script>
   <script src="js/init.js"></script>
   <script src="js/navbar.js"></script>
+  <script src="js/footer.js"></script>
   <script src="js/cartService.js" defer></script>
   <script src="js/cart.js" defer></script>
   <script src="js/products.js"></script>
diff --git a/categories.html b/categories.html
index 514d6aa..c5440bb 100644
--- a/categories.html
+++ b/categories.html
@@ -62,14 +62,10 @@ <h2>Categorías</h2>
       </div>
     </div>
   </main>
-  <footer class="text-muted">
-    <div class="container">
-      <p class="float-end">
-        <a href="#">Volver arriba</a>
-      </p>
-      <p>Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">Jovenes a Programar</a></p>
-    </div>
-  </footer>
+
+  <!-- Contenedor para el FOOTER en footer.js -->
+  <div class="footer-container"></div>
+
   <div id="spinner-wrapper">
     <div class="lds-ring">
       <div></div>
@@ -81,6 +77,7 @@ <h2>Categorías</h2>
   <script src="js/bootstrap.bundle.min.js"></script>
   <script src="js/init.js"></script>
   <script src="js/navbar.js"></script>
+  <script src="js/footer.js"></script>
   <script src="js/categories.js"></script>
   <script src="js/logout.js"></script>
 </body>
diff --git a/index.html b/index.html
index 25e01c3..b9249eb 100644
--- a/index.html
+++ b/index.html
@@ -58,18 +58,15 @@ <h3 class="m-3">Muebles</h3>
       </div>
     </div>
   </main>
-  <footer class="text-muted">
-    <div class="container">
-      <p class="float-end">
-        <a href="#">Volver arriba</a>
-      </p>
-      <p>Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">Jovenes a Programar</a></p>
-    </div>
-  </footer>
+  
+  <!-- Contenedor para el FOOTER en footer.js -->
+  <div class="footer-container"></div>
+
   <script src="js/bootstrap.bundle.min.js"></script>
   <script src="js/index.js"></script>
   <script src="js/init.js"></script>
   <script src="js/navbar.js"></script>
+  <script src="js/footer.js"></script>
   <script src="js/logout.js"></script>
 </body>
 
diff --git a/js/footer.js b/js/footer.js
new file mode 100644
index 0000000..1ce1ab9
--- /dev/null
+++ b/js/footer.js
@@ -0,0 +1,14 @@
+document.addEventListener("DOMContentLoaded", function(){
+    const footerHTML = `
+      <footer class="text-muted">
+    <div class="container">
+      <p class="float-end">
+        <a href="#">Volver arriba</a>
+      </p>
+      <p>Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">Jovenes a Programar</a></p>
+    </div>
+  </footer>
+    `
+
+    document.querySelectorAll(".footer-container").forEach((container) => (container.innerHTML = footerHTML))
+})
\ No newline at end of file
diff --git a/my-profile.html b/my-profile.html
index 4b686da..cdcf99c 100644
--- a/my-profile.html
+++ b/my-profile.html
@@ -97,22 +97,13 @@ <h2 class="mt-5">Perfil de usuario</h2>
       </div>
     </main>
 
-    <footer class="text-muted">
-      <div class="container">
-        <p class="float-end">
-          <a href="#">Volver arriba</a>
-        </p>
-        <p>
-          Este sitio forma parte de
-          <a href="https://jovenesaprogramar.edu.uy/" target="_blank">
-            Jovenes a Programar
-          </a>
-        </p>
-      </div>
-    </footer>
+  <!-- Contenedor para el FOOTER en footer.js -->
+  <div class="footer-container"></div>
+
     <script src="js/bootstrap.bundle.min.js"></script>
     <script src="js/init.js"></script>
     <script src="js/navbar.js"></script>
+    <script src="js/footer.js"></script>
     <script src="js/my-profile.js"></script>
     <script src="js/logout.js"></script>
   </body>
diff --git a/product-info.html b/product-info.html
index e0d0be1..248eef6 100644
--- a/product-info.html
+++ b/product-info.html
@@ -90,15 +90,9 @@ <h2>Calificaciones</h2>
     </section>
   </main>
 
-  <footer class="text-muted">
-    <div class="container">
-      <p class="float-end">
-        <a href="#">Volver arriba</a>
-      </p>
-      <p>Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">Jovenes a Programar</a>
-      </p>
-    </div>
-  </footer>
+    <!-- Contenedor para el FOOTER en footer.js -->
+    <div class="footer-container"></div>
+
   <div id="spinner-wrapper">
     <div class="lds-ring">
       <div></div>
@@ -110,6 +104,7 @@ <h2>Calificaciones</h2>
   <script src="js/bootstrap.bundle.min.js"></script>
   <script src="js/init.js"></script>
   <script src="js/navbar.js"></script>
+  <script src="js/footer.js"></script>
   <script src="js/product-info.js"></script>
   <script src="js/logout.js"></script>
   <script src="js/cart.js" defer></script>
diff --git a/products.html b/products.html
index 562f7fe..ccf05b2 100644
--- a/products.html
+++ b/products.html
@@ -72,15 +72,9 @@ <h1 id="categoryTitle" class="px-6 h1-font-size py-4 category-title"></h1>
     <div id="productsContainer" class="row"></div>
   </main>
 
-  <footer class="text-muted">
-    <div class="container">
-      <p class="float-end">
-        <a href="#">Volver arriba</a>
-      </p>
-      <p>Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">Jovenes a Programar</a>
-      </p>
-    </div>
-  </footer>
+  <!-- Contenedor para el FOOTER en footer.js -->
+  <div class="footer-container"></div>
+
   <div id="spinner-wrapper">
     <div class="lds-ring">
       <div></div>
@@ -92,6 +86,7 @@ <h1 id="categoryTitle" class="px-6 h1-font-size py-4 category-title"></h1>
   <script src="js/bootstrap.bundle.min.js"></script>
   <script src="js/init.js"></script>
   <script src="js/navbar.js"></script>
+  <script src="js/footer.js"></script>
   <script src="js/products.js"></script>
   <script src="js/logout.js"></script>
 </body>
diff --git a/sell.html b/sell.html
index da930f9..0ca47ff 100644
--- a/sell.html
+++ b/sell.html
@@ -14,7 +14,7 @@
 <body>
   <!-- Contenedor para la NAVBAR en navbar.js -->
   <div class="navbar-container"></div>
-  
+
   <div class="container">
     <div class="text-center p-4">
       <h2>Vender</h2>
@@ -52,15 +52,16 @@ <h4 class="mb-3">Información del producto</h4>
           <div class="row">
             <div class="col-md-3 mb-3">
               <label for="productCostInput">Costo</label>
-              <input type="number" name="productCostInput" class="form-control" id="productCostInput" placeholder="" required="" value="0"
-                min="0">
+              <input type="number" name="productCostInput" class="form-control" id="productCostInput" placeholder=""
+                required="" value="0" min="0">
               <div class="invalid-feedback">
                 El costo debe ser mayor que 0.
               </div>
             </div>
             <div class="col-md-4 mb-3">
               <label for="productCurrency">Moneda</label>
-              <select name="productCurrency" class="form-select custom-select d-block w-100" id="productCurrency" required>
+              <select name="productCurrency" class="form-select custom-select d-block w-100" id="productCurrency"
+                required>
                 <option value="" hidden selected>Seleccionar moneda</option>
                 <option>Pesos Uruguayos (UYU)</option>
                 <option>Dólares (USD)</option>
@@ -90,8 +91,8 @@ <h4 class="mb-3">Información del producto</h4>
           <div class="row">
             <div class="col-md-3 mb-3">
               <label for="productCountInput">Cantidad en stock</label>
-              <input type="number" name="productCountInput" class="form-control" id="productCountInput"  required value="1"
-                min="0">
+              <input type="number" name="productCountInput" class="form-control" id="productCountInput" required
+                value="1" min="0">
               <div class="invalid-feedback">
                 La cantidad es requerida.
               </div>
@@ -147,14 +148,9 @@ <h6 class="my-0">Porcentaje</h6>
       </div>
     </div>
   </div>
-  <footer class="text-muted">
-    <div class="container">
-      <p class="float-end">
-        <a href="#">Volver arriba</a>
-      </p>
-      <p>Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">Jovenes a Programar</a></p>
-    </div>
-  </footer>
+
+  <!-- Contenedor para el FOOTER en footer.js -->
+  <div class="footer-container"></div>
 
   <div class="alert alert-primary-dismissible fade" id="alertResult" role="alert">
     <span id="resultSpan"></span>
@@ -205,6 +201,7 @@ <h5 class="text-secondary">Estándar (3%)</h5>
   <script src="js/dropzone.js"></script>
   <script src="js/init.js"></script>
   <script src="js/navbar.js"></script>
+  <script src="js/footer.js"></script>
   <script src="js/sell.js"></script>
   <script src="js/logout.js"></script>
 </body>