<button id="toggle">Mostrar / Ocultar</button>
<p id="texto" style="display:none;">Este es un texto oculto.</p>

<script>
    const btn = document.getElementById("toggle");
    const texto = document.getElementById("texto");

    btn.addEventListener("click", () => {
        texto.style.display = texto.style.display === "none" ? "block" : "none";
    });
</script>


----------------------------------------------------------
<input id="nombre" placeholder="Escribe algo">
<p id="salida"></p>

<script>
    document.getElementById("nombre").addEventListener("input", (e) => {
        document.getElementById("salida").textContent = e.target.value;
    });
</script>

----------------------------------------------------------
<input id="teclas" placeholder="Escribe 'JavaScript'">
<p id="mensaje"></p>

<script>
    document.getElementById("teclas").addEventListener("keyup", (e) => {
        if (e.target.value === "JavaScript") {
            document.getElementById("mensaje").textContent = "¡Correcto! 🎉";
        } else {
            document.getElementById("mensaje").textContent = "";
        }
    });
</script>
----------------------------------------------------------

<div id="caja" style="
    width:150px;
    height:150px;
    background:#ccc;
    transition:0.3s;
"></div>

<script>
    const caja = document.getElementById("caja");

    caja.addEventListener("mouseover", () => {
        caja.style.background = "lightblue";
    });

    caja.addEventListener("mouseout", () => {
        caja.style.background = "#ccc";
    });

    caja.addEventListener("dblclick", () => {
        caja.style.background = "yellow";
    });
</script>


----------------------------------------------------------