From 64e05bc248cf826c44855b32e26efa5b0cd72dcf Mon Sep 17 00:00:00 2001
From: MartinXCVI <mdzg96@gmail.com>
Date: Thu, 30 May 2024 16:22:24 -0300
Subject: [PATCH] API reloj 'World Time API'

---
 css/styles.css   | 15 +++++++++++++++
 index.html       |  8 ++++++++
 js/apis/reloj.js | 19 +++++++++++++++++++
 3 files changed, 42 insertions(+)
 create mode 100644 js/apis/reloj.js

diff --git a/css/styles.css b/css/styles.css
index d844728..008b5e3 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -54,6 +54,21 @@ nav ul li {
   margin-right: 20px;
 }
 
+.reloj-div a {
+  color: white;
+  text-decoration: none;
+  transition: 0.3s;
+  padding: 1rem;
+}
+
+.reloj-div a:hover {
+  color: #ff4081;
+  cursor: pointer;
+  
+  border-radius: 2rem;
+  background-color: white;
+}
+
 .search-span {
   display: flex;
   justify-content: center;
diff --git a/index.html b/index.html
index 6e11e5c..eb91117 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,12 @@
       <div class="logo">
         <h1 class="hero-titulo" data-aos="fade-right"><a href="index.html"><i class="fa-solid fa-film"></i> PelículasCAC</a></h1>
       </div>
+      <div class="reloj-div">
+        <a href="http://worldtimeapi.org/" target="_blank">
+        <i class="fa-regular fa-hourglass-half"></i>
+        <span id="reloj"> Cargando...</span>
+        </a>
+      </div>
       <div class="search">
         <span class="search-span">
           <input type="search" placeholder="Buscar...">
@@ -270,6 +276,8 @@ <h4>SEGUINOS</h4>
   </footer>
 
   <!----------- SCRIPTS ------------>
+  <!---- JavaScript ---->
+  <script src="js/apis/reloj.js"></script>
   <!---- Bootstrap scripts ---->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   <!----- AOS scripts ------>
diff --git a/js/apis/reloj.js b/js/apis/reloj.js
new file mode 100644
index 0000000..3c9cca7
--- /dev/null
+++ b/js/apis/reloj.js
@@ -0,0 +1,19 @@
+async function obtenerHoraDelServidor() {
+  try {
+      const respuesta = await fetch('http://worldtimeapi.org/api/timezone/America/Argentina/Buenos_Aires');
+      const datos = await respuesta.json();
+      return datos.datetime.slice(11, 19); // Extraer solo la hora (HH:MM:SS)
+  } catch (error) {
+      console.error('Error al obtener la hora del servidor:', error);
+      return 'Error';
+  }
+}
+
+async function actualizarReloj() {
+  const hora = await obtenerHoraDelServidor();
+  const reloj = document.getElementById('reloj');
+  reloj.textContent = hora;
+}
+
+setInterval(actualizarReloj, 1000);
+actualizarReloj();
\ No newline at end of file