API reloj 'World Time API'

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;

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 ------>

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();