Getting the Cloud

Lesson 7 of 18 in Coddy's Moving Clouds - HTML/CSS/JS Project course.

Let's have a short reminder on how to manipulate DOM elements using JS.

To get elements by class name, use document.getElementsByClassName:

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

The above will get an array of all the elements in the document with a class name of "someName".

To modify the style of an element, use the style property:

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

The above will set the background color of the first element with a class name of "someName" to "red".

Note: if elements is an empty array, the program will fail.

Challenge

Easy

In the JS file:

Get the elements of the class name "cloud"
Get the first element in the elements (our only cloud) and set:
1. top style to something greater than "0px"
2. left style to something greater than "0px"

Try it yourself

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