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,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Boletín Estudiantil</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="script.js"></script>
+</head>
+<body onload="listarNotas()">
+    <div class="logo">
+        <img src="colegio.webp">
+        <h2>¡Bienvenido estudiante a tu boletín estudiantil!</h2>
+    </div>
+
+    <div class="estudiante">
+        <h3>Alumno: Cristian Cruz</h3>
+    </div>
+
+    <div class="notas">
+        <h4>Notas:</h4>
+        <ul id="listaNotas"></ul>   
+    </div>
+
+    <div class="info">
+        <h4>Promedio: <span id="promedio"></span></h4>
+        <button onclick="calcularPromedio()">Calcular promedio:</button>
+
+        <h4>Nota más alta: <span id="nota"></span></h4>
+        <button onclick="notaMasAlta()">Calcular promedio:</button>
+
+        <h4>¿Hubo algún aplazo? <span id="aplazo"></span></h4>
+        <button onclick="hayAplazo()">Calcular promedio:</button>
+    </div>
+</body>
+</html>
@@ -0,0 +1,56 @@
+let array = [1.7, 3, 2.5, 4.8, 3.6];
+
+function listarNotas() {
+    let lista = document.getElementById("listaNotas");
+    lista.innerHTML = ""; // limpia la lista
+
+    for (let nota of array) {
+        let item = document.createElement("li");
+        item.innerText = nota;
+
+        if (nota < 3.0) {
+            item.classList.add("nota-mala");
+        } else {
+            item.classList.add("nota-buena");
+        }
+
+        lista.appendChild(item);
+    }
+}
+
+function calcularPromedio() {
+    let suma = 0;
+
+    for (i=0; i < 5; i++) {
+        suma += array[i];
+    }
+
+    let promedio = (suma / 5);
+    document.getElementById("promedio").textContent = promedio
+}
+
+function notaMasAlta() {
+    let notaAlta = 0;
+    let i = 0;
+    while (i < 5) {
+        if (array[i] > notaAlta) {
+            notaAlta = array[i]
+        }
+        i++;
+    }
+    document.getElementById("nota").textContent = notaAlta
+}
+
+function hayAplazo() {
+    let aplazo = "No";
+    let i = 0;
+
+    do {
+        if (array[i] < 3) {
+            aplazo = "Sí";
+            break;
+        }
+        i++;
+    } while (i < 5);
+    document.getElementById("aplazo").textContent = aplazo;
+}
@@ -0,0 +1,122 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #f5f7fa, #e4ecf5);
+    margin: 0;
+    padding: 0;
+}
+
+h2 {
+    color: #1e3a8a;
+    margin-top: 10px;
+}
+
+h3 {
+    color: #1f2937;
+}
+
+h4 {
+    color: #374151;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+}
+
+li {
+    font-weight: 600;
+    color: #2563eb;
+    padding: 6px 0;
+}
+
+button {
+    height: 36px;
+    width: 180px;
+    background: linear-gradient(135deg, #2563eb, #1e40af);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    font-weight: 600;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+button:hover {
+    cursor: pointer;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
+}
+
+.logo {
+    text-align: center;
+    background-color: white;
+    padding: 25px;
+    border-bottom: 4px solid #2563eb;
+}
+
+.logo img {
+    height: 200px;
+    width: auto;
+}
+
+.estudiante {
+    background-color: white;
+    max-width: 600px;
+    margin: 30px auto 15px;
+    padding: 15px 25px;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+.notas {
+    background-color: white;
+    max-width: 600px;
+    margin: 20px auto;
+    padding: 20px 25px;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+.nota-mala {
+    color: #dc2626; /* rojo */
+    font-weight: bold;
+}
+
+.nota-buena {
+    color: #1e40af; /* verde */
+    font-weight: bold;
+}
+
+.notas ul {
+    margin: 0;
+}
+
+.notas li {
+    font-size: 1rem;
+    border-bottom: 1px solid #e5e7eb;
+    padding: 8px 0;
+}
+
+.notas li:last-child {
+    border-bottom: none;
+}
+
+
+.info {
+    background-color: white;
+    max-width: 600px;
+    margin: 0 auto 40px;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+.info h4 {
+    margin-bottom: 5px;
+}
+
+.info span {
+    font-weight: bold;
+    font-size: 1.1rem;
+    color: #1e40af;
+}