You will turn your "pesé" into a chaos-spreading electro-wand on a page provided within the repository.
As you move the mouse and click on things, changes will occur along the way.
-
HTML
-
CSS
-
Javascript
-
DOM API
In this repository, you have downloaded and "lightened" a post from the well-known blog "Coding Horror".
Everything is set up so you can write in the scripts.js
file.
Everything must be done through Javascript.
-
Prevent default behavior when clicking. For example, if I click on a link, it won't take me to another page.
-
When clicking on an element, several things will happen. It all depends on the type of element:
2.1 Images: Change the image to one of the GIFs you have in the assets folder with the name magic-*.
2.2 Paragraphs: Change the text color and background color to any random one.
2.3 Blocks of
article
orsection
: Change the background color. -
When the cursor is over any of the following elements, follow the instructions below, and return the element to its original state when the cursor leaves.
3.1 Images: Change the image to the
abracadabra.gif
GIF.3.2 Paragraphs: Change the text color and background color to any random one.
3.3 Blocks of
article
orsection
: Background color different from that of the paragraph.
Premium
-
Create a function named
getRandom
that accepts an array with values and returns one of them randomly.const colors = ['red', 'blue', 'green'] const getRandom = (array) => { /* mysterious code */ } console.log(getRandom(colors)) // prints 'red', 'blue', or 'green'
-
Use the created
getRandom
function to use random colors from a palette you have chosen from coolors.co in the previous sections. -
Use the created
getRandom
function to use random GIFs in the previous sections.
Convertirás tu "pesé" en una electro-varita sembradora del caos en una página que te proveemos dentro del repositorio.
Mientras mueves el ratón y haces click sobre las cosas, irá haciendo cambios a su paso.
-
HTML
-
CSS
-
Javascript
-
DOM API
En este repositorio tienes descargada y "aligerada" un post del conocido blog "Coding Horror".
Todo está preparado para que puedas escribir en el archivo scripts.js
Todo ha de hacerse mediante Javascript.
-
Evita el comportamiento por defecto al hacer click. Por ejemplo, si hago click sobre un enlace, este no me llevará a otra página.
-
Al hacer click sobre un elemento van a ocurrir varias cosas. Todo depende del tipo de elemento:
2.1 Imágenes: Cambia la imagen por uno de los
gif
que tienes en la carpeta assets con el nombre magic-*.2.2 Párrafos: Cambia el color del texto y el de fondo por uno cualquiera.
2.3 Bloques de
article
osection
: Cambia el color de fondo. -
Cuando el cursor esté sobre alguno de los siguientes elementos, seguir las instrucciones siguientes, y devolver dicho elemento a su estado original cuando salga el cursor.
3.1 Imágenes: Cambia la imagen por el gif
abracadabra.gif
.3.2 Párrafos: Cambia el color del texto y el de fondo por uno cualquiera.
3.3 Bloques de
article
osection
: Color de fondo distinto al de párrafo.
Premium
-
Crea una función de nombre
getRandom
que acepte un array con valores y devuelva uno de ellos de manera aleatoria.const colors = ['red', 'blue', 'green'] const getRandom = (array) => { /* código misterioso */ } console.log(getRandom(colors)) // imprime 'red', 'blue' o 'green'
-
Utiliza la función creada
getRandom
para utilizar colores aleatorios de una paleta que hayas escogido de coolors.co en los apartados anteriores. -
Utiliza la función creada
getRandom
para utilizar gifs aleatorios en los apartados anteriores.