Proyectos (DIA 1 - 13)

Realizados gracias al curso "JAVASCRIPT TOTAL"
2026-08-15 02:50:10 +00:00 · 2026-01-30 19:16:11 -05:00
commit 03a7ef3253
67 changed files with 2204 additions and 0 deletions
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cotizaciones Online</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="script.js"></script>
+</head>
+<body onload="cargarContenido()">
+    <div class="logo">
+        <img id="imgLogo">
+        <h1 id="titulo"></h1>
+    </div>
+    <hr>
+    <div class="cuadro">
+        <div id="UsdEur"></div>
+        <div id="UsdCop"></div>
+        <div id="btc"></div>
+    </div>
+    <div class="espera">
+        <img id="imgEspera">
+    </div>
+</body>
+</html>
@@ -0,0 +1,71 @@
+function cargarContenido() {
+    // Función que cargue las cotizaciones
+    cargarCotizaciones(mostrarCotizacion);
+
+    // Funcion que cargue los elementos
+    cargarElementos();
+
+    // Función que cargue los textos
+    cargarTextos();
+}
+
+async function cargarCotizaciones(callback) {
+
+    await delay(2500);
+
+    let promesa1 = await fetch('https://blockchain.info/ticker')
+    callback(await promesa1.json());
+
+    let promesa2 = await fetch('https://open.er-api.com/v6/latest/USD');
+    let datos2 = await promesa2.json();
+    document.getElementById('UsdEur').textContent =
+    "EUR a USD: " + datos2.rates.EUR;
+
+    let datos3 = await crearPedido('https://open.er-api.com/v6/latest/COP');
+    document.getElementById('UsdCop').textContent =
+    "COL a USD: " + datos3.rates.USD;
+    document.getElementById('imgEspera').style.visibility = 'hidden';
+}
+
+function mostrarCotizacion(datos) {
+    document.getElementById('btc').textContent =
+        "Bitcoin a USD: " + datos.USD.last.toLocaleString();
+}
+
+async function crearPedido(url) {
+    return new Promise(function (resolve, reject) {
+        let xhr = new XMLHttpRequest();
+        xhr.open('GET', url);
+        xhr.onload = function () {
+            if(xhr.status === 200) {
+                resolve(JSON.parse(xhr.responseText));
+            } else {
+                reject(xhr.statusText);
+            }
+        }
+        xhr.send();
+    })
+}
+
+function cargarElementos() {
+    document.getElementById('imgLogo').setAttribute('src', 'logo.png');
+    document.getElementById('titulo').textContent = "Cotizaciones Online";
+    document.getElementById('imgEspera').setAttribute('src', 'loading.gif');
+    document.getElementById('imgEspera').style.visibility = 'visible';
+}
+
+function cargarTextos() {
+    document.getElementById('UsdEur').textContent = "EUR a USD: ";
+    document.getElementById('UsdCop').textContent = "COL a USD: ";
+    document.getElementById('btc').textContent = "Bitcoin a USD: ";
+}
+
+function delay(ms) {
+    return new Promise(function(res) {
+        setTimeout(res, ms);
+    })
+}
+
+setInterval(() => {
+    cargarCotizaciones(mostrarCotizacion);
+}, 30000);
@@ -0,0 +1,142 @@
+body {
+    text-align: center;
+    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
+    max-width: 420px;
+    margin: 0 auto;
+    padding: 40px 20px;
+    background: linear-gradient(180deg, #0f172a, #020617);
+    color: #e5e7eb;
+    animation: fadeIn 0.8s ease-out;
+}
+
+/* Título */
+h1 {
+    color: #38bdf8;
+    font-weight: 500;
+    letter-spacing: 1px;
+    margin-bottom: 25px;
+    animation: slideDown 0.8s ease-out;
+}
+
+/* Logo */
+.logo img {
+    height: 160px;
+    width: 160px;
+    border-radius: 50%;
+    margin-bottom: 20px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
+    animation: popIn 0.7s ease-out;
+}
+
+/* Loader */
+.espera img {
+    height: 28px;
+    width: 28px;
+    visibility: hidden;
+    margin-top: 20px;
+    animation: spin 1.2s linear infinite;
+}
+
+
+/* Tarjeta de cotizaciones */
+.cuadro {
+    background: rgba(15, 23, 42, 0.85);
+    border-radius: 14px;
+    padding: 20px 10px;
+    margin: 20px 0;
+    box-shadow:
+        0 15px 30px rgba(0,0,0,0.6),
+        inset 0 1px 0 rgba(255,255,255,0.04);
+    animation: riseUp 0.9s ease-out;
+    transition:
+        transform 0.25s ease,
+        box-shadow 0.25s ease;
+}
+
+.cuadro:hover {
+    transform: translateY(-4px);
+    box-shadow:
+        0 20px 40px rgba(0,0,0,0.7),
+        inset 0 1px 0 rgba(255,255,255,0.06);
+}
+
+/* Cada fila */
+.cuadro div {
+    margin: 16px 0;
+    font-size: 1rem;
+    letter-spacing: 0.3px;
+    transition: color 0.25s ease, transform 0.25s ease;
+}
+
+.cuadro div:hover {
+    color: #e0f2fe;
+    transform: translateX(4px);
+}
+
+/* BTC destacado */
+#btc {
+    color: #facc15;
+    font-weight: 600;
+}
+
+/* USD / EUR */
+#UsdEur,
+#UsdCop {
+    color: #a5f3fc;
+}
+
+/* Separador elegante */
+.cuadro div:not(:last-child) {
+    border-bottom: 1px solid rgba(255,255,255,0.08);
+    padding-bottom: 10px;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-15px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes popIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.85);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes riseUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}