JavaScript is the programming language that web browsers use to create interactivity. Normally HTML is a static presentation of information. JavaScript allows us to add programmability to our web pages and to create entire interactive applications within a web browser.

Things to learn:

• How to include JavaScript in an HTML page
• How to change an HTML page from JavaScript
• How to handle input events like clicking and typing so that your JavaScript gets called and does something for you.
• How to handle :hover and :active classes in CSS so that your HTML will respond to the mouse.
• The various events for which you can provide JavaScript code to perform some function. In particular the onclick() event.

> JavaScript Intro > JavaScript Examples > JavaScript Capabilities > Where to place JavaScript code > Output from JavaScript > JavaScript Syntax > JavaScript Statements > JavaScript Data Types > CSS :hover and :active > JavaScript Events

Your assignment is demonstrated in this video.

Use the alert(string) function to pop up a dialog box that contains the string. This is an easy way to test to see if your functions are getting called correctly when you are trying to debug your code.

Use only function calls in your onclick attributes. Put the rest of the code in functions. It will clean up your code a lot and simplify debugging.

All of the buttons are <div>s with the same class so that they can be easily styled the same in CSS.

Because the color and the font are changed independently you might consider making each of them a variable with a single setText() function that uses the current settings of those variable to change the text.

To center the text in the buttons use the CSS attribute "text-align:center".

To hide the drop shadow, make it the same color as the background

To make the button drop down when pressed, change its top and left margin slightly.

To make your buttons line up horizontally use the following styling:

• display:block;
• float:left;

To separate the buttons from the <div> that contains the text to be changed, use a <p> tag.

Submission instructions