Activity: Watch That Box

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>Watch That Box</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.

Prework Support

Looking for prework support? Our team of tutors are eager to help! Request a tutor session with the following steps:

1. If not already logged in to BCS, login using your credentials (supplied 24 hours after enrollment).

2. Click Support in the top right.

3. Complete the form fields to submit your request:

  • Under Question Category, select "Tutor Request.”

  • Under Question Category, select "Request a Tutor.”

  • Under Currently, Which Sessions Would You Like to Discuss?, select “Prework assignment”.

4. Complete the additional fields and submit your request.