Pegando a Nuvem

Lição 7 de 18 do curso Nuvens em Movimento - Projeto HTML/CSS/JS da Coddy.

Vamos fazer um breve lembrete sobre como manipular elementos DOM usando JS.

Para obter elementos pelo nome da classe, use document.getElementsByClassName:

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

O código acima obterá um array de todos os elementos no documento com o nome de classe "someName".

Para modificar o estilo de um elemento, use a propriedade style:

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

O código acima definirá a cor de fundo do primeiro elemento com o nome de classe "someName" como "red".

Nota: se elements for um array vazio, o programa falhará.

Desafio

Fácil

No arquivo JS:

Obtenha os elementos do nome de classe "cloud"
Obtenha o primeiro elemento nos elementos (nossa única nuvem) e defina:
1. O estilo top para algo maior que "0px"
2. O estilo left para algo maior que "0px"

Experimente você mesmo

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