array-playground-javascript/ex8.html at master · omiras/array-playground-javascript · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'Rocher';
            src: url(https://assets.codepen.io/9632/RocherColorGX.woff2);
        }

        .fancy {
            font-family: 'Rocher';

        }
    </style>

</head>

<body>
    <h1>El usuario ha seleccionado el estilo <strong>fancy<strong></strong> para su Web</h1>
    <p class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis deleniti, dolorem molestiae iusto
        exercitationem amet quibusdam sunt. Similique minus molestias accusamus, perferendis molestiae libero. Aliquam
        minima quo corrupti quis totam.</p>
    <script>
        let textoSpan = document.querySelector(".lorem");
        const estilosDisponibles = ["default", "fancy", "dark"]


        // Resultado esperado: https://oscarm.tinytake.com/msc/ODgwNjcxNl8yMjIzNDgzMQ
        let seleccion = "default";

            // MODIFICAR A PARTIR DE AQUÍ
        // En este punto del programa, hemos detectado que el usuario ha seleccionado el estilo "fancy". Actualiza la variable "seleccion" con el valor adecuado del array "estilosDisponibles". Es obligatorio usar dicho array para obtener el nombre del estilo, porque nos han comentado que puede cambiar en el futuro.


        // No modificar a partir de aquí
        document.querySelector(".lorem").classList.add(seleccion);

    </script>
</body>

</html>