Saltar al contenido principal

Ejericios - Manejo del DOM

En todos los ejercicios deberás usar todo lo visto hasta ahora. Al final de cada enunciado hay una pequeña "pista" sobre la clave del ejercicio, pero no olvides todo lo que hemos visto.

Nivel inicial​

Ejercicio 1​

Dado el siguiente HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Cambiar color</title>
</head>
<body>

    <h1 id="texto">Este texto cambiará de color</h1>

    <button id="rojo">Rojo</button>
    <button id="verde">Verde</button>
    <button id="azul">Azul</button>

</body>
</html>

Crea el código JavaScript que al pulsar los botones Rojo, Verde o Azul, el texto del <h1> cambiará a dicho color.

PISTA: style

Ejericio 2​

Dado el siguiente HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mostrar y ocultar</title>

    <style>
        .oculto {
            display: none;
        }
    </style>
</head>
<body>

    <h1>Mostrar y ocultar</h1>

    <p id="mensaje">
        Este texto puede desaparecer y volver a aparecer.
    </p>

    <button id="ocultar">
        Ocultar
    </button>

    <button id="mostrar">
        Mostrar
    </button>

</body>
</html>

Crea el código JavaScript que al pulsar los botones Ocultar o Mostrar desaparezca o aparezca al párrafo.

PISTA: display:none;

Ejercicio 3​

Dado el siguiente HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Saludo personalizado</title>
</head>
<body>

    <h1>Saludo personalizado</h1>

    <label for="nombre">
        Nombre
    </label>

    <input
        type="text"
        id="nombre"
        placeholder="Escribe tu nombre"
    >

    <button id="boton">
        Saludar
    </button>

    <p id="resultado"></p>

</body>
</html>

Crea el código JavaScript que al pulsar el botón Saludar y escribir un nombre en el <input>, apareza en el párrafo el mensaje "Hola + nombre".

PISTA: .value; + .textContent;

Nivel medio​

Ejercicio 4​

Dado el siguiente HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Conversor de temperatura</title>
</head>
<body>

    <h1>Conversor de temperatura</h1>

    <label for="temperatura">
        Temperatura
    </label>

    <input
        type="number"
        id="temperatura"
        placeholder="Introduce una temperatura"
    >

    <br><br>

    <button id="celsiusFahrenheit">
        Celsius → Fahrenheit
    </button>

    <button id="fahrenheitCelsius">
        Fahrenheit → Celsius
    </button>

    <h2>
        Resultado:
    </h2>

    <p id="resultado"></p>

</body>
</html>

Crea el código JavaScript que al escribir una temperatura en el <input> y pulsar el botón Celsius → Fahrenheit o Fahrenheit → Celsius se muestre en el párrafo la solución.

PISTA: puedes consultar en internet la fórmula de conversiones entre Celsius y Farenheit.

Ejercicio 5​

Dado el siguiente HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Calculadora</title>
</head>
<body>

    <p id="contador">0</p>
    <button id="sumar">Sumar</button>
    <button id="restar">Restar</button>

</body>
</html>

Crea el código JavaScript que al pulsar los botones Sumar o Restar se sume o reste 1 al número. Es decir, por cada vez que pulsas el botón Sumar por ejemplo, el número mostrado debe incrementar de 1 en 1.

PISTA: contador++ + parseFloat

Nivel avanzado​

Ejercicio 6​

Dado el siguiente HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Resgitro de usuarios</title>
</head>
<body>

    <input type="text" id="nombre" placeholder="Nombre">
    <input type="number" id="edad" placeholder="Edad">
    <button id="registrar">Registrar</button>

    <h3>Usuarios registrados</h3>
    <ul id="lista"></ul>

</body>
</html>

Crea el código JavaScript que al escribir un nombre y una edad en los <input> y pulsar el botón Registrar, aparezca en el listado dicho usuario como se muestra a continuación:

PISTA: appendChild