Novice Level

Getting Stylish with JavaScript

Pricing
30 minutes
  • 2 Learning Objectives

About this Hands-on Lab

In this hands on lab we will be working with the Document Object Model to use JavaScript to set properties on elements of an HTML page. This will require the knowledge of `ssh` and an available editor or knowldge of `scp` to copy the index file to and from the server. The server will be running NGINX with the default settings.

Learning Objectives

Successfully complete this lab by achieving the following learning objectives:

Log into the Server and Locate the Index Page (/usr/share/nginx/html), and Load the Page in a Browser So You Can View Your Changes

You will need to access the server on its public IP via SSH using the credentials supplied in the lab.

Once there, navigate to the root of the webserver at /usr/share/nginx/html and locate the index.html page.

Open a browser to the public IP address of the lab server.

Create the Four Buttons in the Index Page to Set the Colors

Open the index page in a text editor, and remember that you might have to use sudo.

Inside of the content div:

Create the buttons and set the property of the body’s background color to the required color for each button, then label the button with the color, hint: document.body.style.backgroundColor

Test the page in the browser to ensure that it is working as intended.

Contact SalesSee Pricing

Additional Resources

The company you are working for has a potential client that has asked to see some different looks applied to their web page. They have the basic template in place, but you have been asked to help them decide on the background color for the main section of the site.

Your task is to create four buttons that will set the background color property of the page body to each of these colors: green, blue, yellow, and purple. The client should be able to cycle through the colors without reloading the page. The buttons should be located near the bottom of the page so that they do not interfere with the text that is already present.

What are Hands-on Labs

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Sign In
Welcome Back!

Psst…this one if you’ve been moved to ACG!

Don't have an account?

Get Started
Who’s going to be learning?
MyselfMy Organization