Activity: Jiggle Into JavaScript

In this assignment, you will be using JavaScript to change the CSS properties of a box upon button clicks.

Before You Begin

You may want to spend a little time reading through each of the below resources to familiarize yourself with some basics.

Instructions

1. Create two files in VS Code. Name one file index.html and the otherjavascript.js. These should be in the same directory.

2. Copy and save the code below in your HTML file. This is your starting HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Jiggle Into JavaScript</title>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>
<body>

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button id="button1">Grow</button>
    <button id="button2">Blue</button>
    <button id="button3">Fade</button>
    <button id="button4">Reset</button>

    <script type="text/javascript" src="javascript.js"></script>

</body>
</html>

3. Write your JavaScript in the Javascript.js file such that clicking the buttons re-styles the box appropriately. (When a user hits Grow, the box should increase in size; when a user hits Fade, the box should change opacity; and so on.)

4. When you're finished, copy both your HTML file and JavaScript file to the Module-6 subfolder in your prework folder.

Bonus

Try adding a few buttons of your own, with different CSS effects. You can do a lot more than box-changing with JavaScript, but it's a fun start!

Hints

Push yourself here. Be resourceful and use Google searches if you get stuck. There's plenty of material to learn from.
If you don't quite get it to work, submit what you have! No shame in not knowing just yet. You've got the whole course to figure this stuff out.