Download and unzip the Chapter 1 file.

In a text editor, open lab1.html. Enter your name and todays date where indicated in the comment section in the document header.

Scroll down to the bottom of the file and locate the input element for the Submit button.

Add an onclick event handler to the tag that changes the innerHTML value of the page element with the id submitMsg to the text message Thank you for your order.

Note: The entire JavaScript expression should be enclosed within a set of double quotation marks, but the id and the text message should be enclosed within single quotes.

Open lab1.html in your web browser. Click the Submit button and verify that the text Thank you for your order appears on the bottom of the page

Then take screen capture of output to show program execution.

/* JavaScript 7th Edition

Chapter 1

Hands-on Project 1-3

Filename: styles.css

*/

/* apply a natural box layout model to all elements */

* {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

/* reset rules */

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

max-width: 960px;

background: white;

margin: 0 auto;

font-family: Arial, Helvetica, sans-serif;

}

ol, ul {

list-style: none;

}

/* page header */

header {

background: #93AD78;

width: 100%;

color: black;

font-size: 48px;

text-align: center;

line-height: 1.5em;

border-bottom: 1px solid black;

border-left: 1px solid black;

border-right: 1px solid black;

}

/* main content */

article {

width: 960px;

text-align: center;

background: white;

padding-bottom: 20px;

border-bottom: 1px solid black;

border-left: 1px solid black;

border-right: 1px solid black;

}

article h2 {

font-weight: bold;

font-size: 24px;

padding: 10px;

}

/* form */

legend, #submitbutton input {

font-family: georgia, "times new roman", times, serif;

}

fieldset {

margin-bottom: 10px;

position: relative;

padding: 2.5em 1em 0.5em 1em;

background: #93AD78;

text-align: left;

}

fieldset fieldset {

padding-top: 5px;

border: 2px solid #082008;

}

form {

background: #082008;

padding: 10px 5px 7px 5px;

margin: 0 auto;

width: 750px;

}

input, textarea {

font-size: 1em;

}

input:focus, textarea:focus {

background: #e3d5ba;

}

legend span {

position: absolute;

left: 0;

top: 0;

font-size: 1.25em;

margin-top: 0.5em;

margin-left: 0.5em;

}

textarea {

display: block;

}

#checkin {

float: left;

width: 45%;

}

#checkout {

float: right;

width: 45%;

}

#contactinfo, #reserveinfo, #submitbutton {

border: none;

}

#contactinfo label {

display: block;

position: relative;

margin: 12px 0;

}

#contactinfo input {

position: absolute;

left: 100px;

}

#nameinput, #emailinput {

width: 30em;

}

#phoneinput {

width: 12em;

}

#submitbutton {

border: none;

background: #93AD78;

padding: 0.5em 0;

margin-bottom: 0;

text-align: center;

}

div#submitMsg {

height: 30px;

color: yellow;

line-height: 30px;

font-size: 20px;

}