Obteniendo la nube

Lección 7 de 18 del curso Nubes en movimiento - Proyecto de HTML/CSS/JS de Coddy.

Hagamos un breve recordatorio sobre cómo manipular elementos del DOM usando JS.

Para obtener elementos por nombre de clase, utiliza document.getElementsByClassName:

const elements = document.getElementsByClassName("someName");

Lo anterior obtendrá un array de todos los elementos en el documento con un nombre de clase de "someName".

Para modificar el estilo de un elemento, utiliza la propiedad style:

const elements = document.getElementsByClassName("someName");
const element = elements[0];
element.style.background = "red";

Lo anterior establecerá el color de fondo del primer elemento con un nombre de clase de "someName" a "red".

Nota: si elements es un array vacío, el programa fallará.

Desafío

Fácil

En el archivo JS:

Obtén los elementos del nombre de clase "cloud"
Obtén el primer elemento de los elementos (nuestra única nube) y establece:
1. El estilo top a algo mayor que "0px"
2. El estilo left a algo mayor que "0px"

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>