Assignment #13: Jiggle into JavaScript

Overview

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 references. Just skim enough to get the high-points.

Instructions

  1. Create two files on your computer using Sublime Text. One should be called index.html, and the other should be called javascript.js. These should be in the same directory.

  2. Then copy (and save) the code below into 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. Now write your Javascript in the Javascript.js file such that clicking the buttons
       re-styles the box appropriately (i.e. When a user hits "Grow" the box should increase in
       size, when a user hits "Fade" the box should change opacity, etc.).

   4. After you finish, include both your HTML file and CSS file in your Pre-Work Submission
       folder.

   5. After you finish, upload your code to (however they are going to upload it).

Bonus

Try adding a few buttons of your own, with different CSS effects. There's a LOT more than box-changing that you can do 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 six months to figure this stuff out.

Coding Boot Camp © 2016. All Rights Reserved.

results matching ""

    No results matching ""