Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Condicionales en JS — Ejemplo 2</title>
    <style>
        body  { font-family: Arial, sans-serif; padding: 20px; background: #fff; max-width: 600px; }
        h3    { margin: 20px 0 8px; font-size: 15px; color: #333; }
        table { border-collapse: collapse; width: 100%; margin-bottom: 16px; }
        th    { background: #F7DF1E; color: #333; padding: 8px 12px; text-align: left; font-size: 13px; }
        td    { padding: 8px 12px; border-bottom: 1px solid #eee; font-size: 13px; font-family: monospace; }
        .sb   { color: #059669; font-weight: bold; }
        .no   { color: #dc2626; font-weight: bold; }
        .md   { color: #d97706; font-weight: bold; }
        .bloque { border-left: 4px solid #F7DF1E; padding: 8px 14px; margin: 6px 0; border-radius: 0 6px 6px 0; background: #fffde7; font-size: 14px; }
    </style>
</head>
<body>

<h2>Condicionales — else if y else</h2>

<h3>Sistema de calificaciones</h3>
  <table id="tabla-notas"></table>

<h3>Saludo según la hora</h3>
  <div id="saludo"></div>

<h3>Clasificación de temperatura</h3>
  <table id="tabla-temp"></table>

// ── Sistema de calificaciones ─────────────────────────────────────────
    function calificar(nota) {
        let texto, clase;
        if (nota >= 90) {
            texto = "Sobresaliente ⭐"; clase = "sb";
        } else if (nota >= 80) {
            texto = "Notable 👍";       clase = "sb";
        } else if (nota >= 70) {
            texto = "Bien ✅";          clase = "sb";
        } else if (nota >= 60) {
            texto = "Aprobado";        clase = "md";
        } else {
            texto = "Desaprobado ❌";  clase = "no";
        }
        return { texto, clase };
    }

// ── Saludo según la hora ──────────────────────────────────────────────
    const hora = new Date().getHours();
    let saludo;

if (hora >= 6 && hora < 12) {
        saludo = "☀️ Buenos días";
    } else if (hora >= 12 && hora < 20) {
        saludo = "🌤️ Buenas tardes";
    } else {
        saludo = "🌙 Buenas noches";
    }

document.getElementById("saludo").innerHTML =
        `<div class="bloque"><strong>${saludo}</strong> — son las ${hora}:00 hs</div>`;

// ── Clasificación de temperatura ──────────────────────────────────────
    function clasificarTemp(t) {
        if      (t <= 0)  return { texto: "Bajo cero 🥶",       clase: "no" };
        else if (t <= 10) return { texto: "Muy frío 🧥",         clase: "no" };
        else if (t <= 18) return { texto: "Fresco 🌬️",          clase: "md" };
        else if (t <= 26) return { texto: "Agradable 😊",        clase: "sb" };
        else if (t <= 35) return { texto: "Caluroso ☀️",         clase: "md" };
        else              return { texto: "Muy caluroso 🔥",     clase: "no" };
    }

</body>
</html>