JavaScript-stuff/parrafo.html at main · asarsu/JavaScript-stuff · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rellenar Párrafo</title>
</head>
<body>
    <header>
        <h1>3. Rellenar párrafo</h1>
        <p>Elabora un programa que vaya rellenando un párrafo de forma dinámica con todas las letras que vaya pulsando el usuario sobre cualquier elemento de la página. Al final del párrafo debes incluir un botón para limpiar el contenido del párrafo.</p>
        <p><a href="index.html">volver atrás</a></p>
    </header>

    <main>
        <h2>Parrafo</h2>
        <p id="parrafoVacio"></p>
        <button  id="finalizar">Finalizar</button>
        <button id="borrar">Borrar</button>

    </main>

    <script>

        //crear el parrafo vacio
        let parrafoVacio = document.getElementById('parrafoVacio')

        //crear la funcion para agregar letra
        function teclear(event){
            parrafoVacio.textContent += event.key;
        }
        //agregar eventlistener para la tecla pulsada y añadir al parrafo
        document.addEventListener('keydown', teclear)

        //dar funcionalidad al boton de borrar
        let botonBorrar = document.getElementById('borrar')
        botonBorrar.addEventListener('click', ()=>{
            parrafoVacio.textContent = ''
        })

        //dar funcionalidad al boton finalizar
        let botonFinalizar = document.getElementById('finalizar')

        //funcion para finalizar el tecleado
        function finalizar(){
            document.removeEventListener('keydown', teclear)
            console.log('entrada finalizada')
        }

        botonFinalizar.addEventListener('click', finalizar)

    </script>

</body>
</html>