ZuoTi.Pro
Question

New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3.

Complete the following: 1. Use your editor to open the mas_register_txt.html, mas_register_txt.js, mas_reg2_txt.html, and mase. The user can opt to purchase a media pack for $115 containing gifts from the conference. If the user has clicked the media

mas_register.js

"use strict";
/*
New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
Tutorial 13
Case Problem 3


Filename: mas_register.js

Author:
Date:

Function List
=============

formTest()
Performs a validation test on the selection of the conference
session package and the conference discount number

calcCart()
Calculates the cost of the registration and saves data
in session storage
  
writeSessionValues()
Writes data values from session storage in to the
registration summary form


*/

mas_register.html

<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
Tutorial 13
Case Problem 3

Media Arts Society Registration Form
Author:
Date:   

Filename: mas_register.html

-->

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MAS Registration Form</title>
<link href="mas_base.css" rel="stylesheet" />
<link href="mas_styles.css" rel="stylesheet" />

</head>

<body>
<header>
<img src="mas_logo.png" alt="Media Arts Society" id="logoimg" />
<nav class="horizontal">
<ul>
<li><a href="#">Memberships</a></li>
<li><a href="#">Conferences</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</nav>   
</header>

<article>
<h1>MAS Annual Conference</h1>
<p>MAS 22<br />
Sierra Vegas Resort<br />
Las Vegas, Nevada<br />
April 16 &mdash; April 19, 2018</p>
<p>The premier conference for multimedia technlogy celebrates its
22nd anniversay with extensive coverage of new and exciting
developments in media and entertainment.</p>
<p>Please join us by filling out your registration information below. Go
to the <a href="#">Accommodation Page</a> to reserve lodging at the
conference center.</p>
<p>Email <a href="#">[email protected]</a> for questions related to
accommodation, traveling to the conference, or submitting presentation
proposals.</p>
</article>

<section id="section1">
<form id="regForm" name="regForm" method="post" action="mas_reg2.html">
<h1>MAS22 Registration Form</h1>
  

<fieldset id="contactInfo">
<label for="fnBox">First Name*</label>
<input name="firstName" id="fnBox" type="text" required />

<label for="lnBox">Last Name*</label>
<input name="lastName" id="lnBox" type="text" required />

<label for="groupBox">Company or University</label>
<input name="group" id="groupBox" type="text" />

<label for="mailBox">E-mail*</label>
<input name="email" id="mailBox" type="email" required />

<label for="phoneBox">Phone Number*</label>
<input name="phoneNumber" id="phoneBox" type="tel" pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$"
required placeholder="(nnn) nnn-nnnn" />
</fieldset>

<fieldset id="confChoices">
<label for="sessionBox">Session Packs</label>
<select id="sessionBox" name="sessionOption" size="5" required>
<option value="95">Exhibits Only ($95)</option>
<option value="215">3 Session Pack ($215)</option>
<option value="420">6 Session Pack ($420)</option>
<option value="595">Session Pass ($595)</option>
<option value="845">VIP Pass ($845)</option>
</select>
<label for="banquet">MAS22 Banquet ($55 ea.)</label>
<input type="number" min="0" max="10" id="banquetBox" name="banquetGuests" /><span> attendees</span>
  
<label for="mediaPack">MAS22 Media Pack ($115)</label>
<input type="checkbox" name="mediaPack" id="mediaCB" value="115" />

</fieldset>
<input id="regSubmit" type="submit" value="continue" />
</form>
</section>

<aside id="reg1Aside">
<table>
<caption>Shopping Cart</caption>
<tr><th>Name</th><td><span id="regName"></span></td></tr>
<tr><th>Company</th><td><span id="regGroup"></span></td></tr>
<tr><th>E-mail</th><td><span id="regEmail"></span></td></tr>   
<tr><th>Phone</th><td><span id="regPhone"></span></td></tr>
<tr><th>Session</th><td><span id="regSession"></span></td></tr>
<tr><th>Banquet Guests ($55 ea.)</th><td><span id="regBanquet"></span></td></tr>
<tr><th>Media Pack ($115)</th><td><span id="regPack"></span></td></tr>
<tr><th>TOTAL</th><td><span id="regTotal"></span></td></tr>
</table>   
</aside>


  

<nav id="columns">
<ul>
<li><a href="#">home page</a></li>
<li><a href="#">conference schedule</a></li>
<li><a href="#">speaker bios</a></li>
<li><a href="#">general session</a></li>
<li><a href="#">exhibits</a></li>
<li><a href="#">programs</a></li>
<li><a href="#">workshops</a></li>
<li><a href="#">committees</a></li>
<li><a href="#">panel discussion</a></li>
<li><a href="#">demonstrations</a></li>
<li><a href="#">travel info</a></li>
<li><a href="#">accommodations</a></li>
<li><a href="#">banquet</a></li>
<li><a href="#">family attractions</a></li>
<li><a href="#">registration</a></li>
<li><a href="#">MAS home page</a></li>   
</ul>   
</nav>   

<footer>
Media Arts Society &copy; 2018 All Rights Reserved
</footer>

</body>
</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

program code to copy

mas_base.css

@charset "utf-8";


/* Basic styles to be used with all devices and under all conditions */

article, aside, figcaption, figure,
footer, header, main, nav, section 
{ 
   display: block;
}

address, article, aside, blockquote, body, cite, 
div, dl, dt, dd, em, figcaption, figure, footer, 
h1, h2, h3, h4, h5, h6, header, html, img, 
li, main, nav, nav a, ol, p, section, span, ul,
table, tr, td, th, col, colgroup 
{
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   background: transparent;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;  
}


/* Set the default page element styles */

body 
{
   line-height: 1.2em;
}

ul, ol 
{
   list-style: none;
}

nav ul 
{
   list-style: none;
   list-style-image: none;
}

nav a 
{
   text-decoration: none;
}

===================================================================================

mas_reg2.html

<!DOCTYPE html>
<html lang="en">
<head>
   
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>MAS Registration Payment Form</title>
   <link href="mas_base.css" rel="stylesheet" />
   <link href="mas_styles.css" rel="stylesheet" />
   <script src="mas_reg2.js" async></script>
</head>

<body>
   <header>
      <img src="mas_logo.png"  id="logoimg" />
      <nav class="horizontal">
         <ul>
            <li><a href="#">Memberships</a></li>
            <li><a href="#">Conferences</a></li>
            <li><a href="#">Publications</a></li>
            <li><a href="#">Programs</a></li>
            <li><a href="#">Education</a></li>
            <li><a href="#">Jobs</a></li>
         </ul>
      </nav>       
   </header>
   
   <aside id="reg2Aside">
      <table>
         <caption>Registration Information</caption>
         <tr>
            <th>Name</th><td><span id="regName"></span></td>
         </tr>
         <tr>
            <th>Company</th><td><span id="regGroup"></span></td>
         </tr>
         <tr>
            <th>E-mail</th><td><span id="regEmail"></span></td>
         </tr>         
         <tr>
            <th>Phone</th><td><span id="regPhone"></span></td>
         </tr>
         <tr>
            <th>Session</th><td><span id="regSession"></span></td>
         </tr>
         <tr>
            <th>Banquet Guest ($55 ea.)</th><td><span id="regBanquet"></span></td>
         </tr> 
         <tr>
            <th>MAS22 Media Pack ($115)</th><td><span id="regPack"></span></td>
         </tr>  
         <tr>
            <th>TOTAL</th><td><span id="regTotal"></span></td>
         </tr> 
      </table>                                               
   </aside>   
   
   <section id="section2">
      <h1>MAS22 Payment Form</h1>      
       <form id="credit" name="credit" method="post" action="co_final.html">         
         <fieldset id="creditcard">
            <legend>Credit Information</legend>

            <label for="cardHolder">Card Holder*</label>
            <input name="cardHolder" id="cardHolder" required type="text" />    
            
            <label>Credit Company*</label>          
            <fieldset id="cards">
               
               <label class="cardLabel">
                  <input name="company" value="amex" type="radio" required />
                  <img src="mas_amex.png"  />
               </label>
               <label class="cardLabel">               
                  <input name="company" value="discover" type="radio" />
                  <img src="mas_discover.png"  />
               </label>
               <label class="cardLabel">                  
                  <input name="company" value="master" type="radio"  />
                  <img src="mas_master.png"  />
               </label>
               <label class="cardLabel">                  
                  <input name="company" value="visa" type="radio"  />
                  <img src="mas_visa.png"  />
               </label>
            </fieldset>          

            <label for="cardNumber">Credit Card Number*</label>
            <input name="cardNumber" id="cardNumber" required type="text"
                   pattern="^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$"/>

            <label for="expDate">Expiration Date*</label>
            <input name="expDate" id="expDate" required type="text" placeholder="mm/yyyy" />

            <label for="cvc">CVC*</label>
            <input name="cvc" id="cvc" required pattern="^\d{3,4}$" type="text"/>
         </fieldset>

         <p id="footnote">* - Required Item</p>        
         <input type="button" id="subButton" value="continue" />         
      </form>
   </section>
   
   <nav id="columns">
      <ul>
         <li><a href="#">home page</a></li>
         <li><a href="#">conference schedule</a></li>
         <li><a href="#">speaker bios</a></li>
         <li><a href="#">general session</a></li>
         <li><a href="#">exhibits</a></li>
         <li><a href="#">programs</a></li>
         <li><a href="#">workshops</a></li> 
         <li><a href="#">committees</a></li>
         <li><a href="#">panel discussion</a></li>
         <li><a href="#">demonstrations</a></li> 
         <li><a href="#">travel info</a></li>
         <li><a href="#">accommodations</a></li>
         <li><a href="#">banquet</a></li>
         <li><a href="#">family attractions</a></li>
         <li><a href="#">registration</a></li>
         <li><a href="#">MAS home page</a></li>                                                     
      </ul>         
   </nav>   

   <footer>
      Media Arts Society &copy; 2018 All Rights Reserved
   </footer>
   
</body>
</html>


========================================================================================
mas_register.html

<!DOCTYPE html>
<html lang="en">
<head>
   
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>MAS Registration Form</title>
   <link href="mas_base.css" rel="stylesheet" />
   <link href="mas_styles.css" rel="stylesheet" />
   <script src="mas_register.js" async></script>
</head>

<body>
   <header>
      <img src="mas_logo.png"  id="logoimg" />
      <nav class="horizontal">
         <ul>
            <li><a href="#">Memberships</a></li>
            <li><a href="#">Conferences</a></li>
            <li><a href="#">Publications</a></li>
            <li><a href="#">Programs</a></li>
            <li><a href="#">Education</a></li>
            <li><a href="#">Jobs</a></li>
         </ul>
      </nav>       
   </header>
   
   <article>
      <h1>MAS Annual Conference</h1>
      <p>MAS 22<br />
         Sierra Vegas Resort<br />        
         Las Vegas, Nevada<br />
         April 16 &mdash; April 19, 2018</p>
      <p>The premier conference for multimedia technlogy celebrates its 
         22nd anniversay with extensive coverage of new and exciting 
         developments in media and entertainment.</p>
      <p>Please join us by filling out your registration information below. Go
         to the <a href="#">Accommodation Page</a> to reserve lodging at the 
         conference center.</p>
      <p>Email <a href="#">[email protected]</a> for questions related to 
         accommodation, traveling to the conference, or submitting presentation
         proposals.</p>
   </article>
   
   <section id="section1">
      <form id="regForm" name="regForm" method="post" action="mas_reg2.html">
      <h1>MAS22 Registration Form</h1>
      

         <fieldset id="contactInfo">    
            <label for="fnBox">First Name*</label>
            <input name="firstName" id="fnBox" type="text" required />

            <label for="lnBox">Last Name*</label>
            <input name="lastName" id="lnBox" type="text" required />

            <label for="groupBox">Company or University</label>
            <input name="group" id="groupBox" type="text" />

            <label for="mailBox">E-mail*</label>
            <input name="email" id="mailBox" type="email" required />

            <label for="phoneBox">Phone Number*</label>
            <input name="phoneNumber" id="phoneBox" type="tel" pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$"
                   required placeholder="(nnn) nnn-nnnn" />
         </fieldset>
         
         <fieldset id="confChoices">
            <label for="sessionBox">Session Packs</label>
            <select id="sessionBox" name="sessionOption" size="5" required>
               <option value="95">Exhibits Only ($95)</option>
               <option value="215">3 Session Pack ($215)</option>
               <option value="420">6 Session Pack ($420)</option>
               <option value="595">Session Pass ($595)</option>
               <option value="845">VIP Pass ($845)</option>
            </select>
            <label for="banquet">MAS22 Banquet ($55 ea.)</label>
            <input type="number" min="0" max="10" id="banquetBox" name="banquetGuests" /><span> attendees</span>          
            
            <label for="mediaPack">MAS22 Media Pack ($115)</label>
            <input type="checkbox" name="mediaPack" id="mediaCB" value="115" />  
               
         </fieldset> 
         <input id="regSubmit" type="submit" value="continue" />
      </form>
   </section>
   
   <aside id="reg1Aside">
      <table>
         <caption>Shopping Cart</caption>
         <tr><th>Name</th><td><span id="regName"></span></td></tr>
         <tr><th>Company</th><td><span id="regGroup"></span></td></tr>
         <tr><th>E-mail</th><td><span id="regEmail"></span></td></tr>         
         <tr><th>Phone</th><td><span id="regPhone"></span></td></tr>
         <tr><th>Session</th><td><span id="regSession"></span></td></tr>
         <tr><th>Banquet Guests ($55 ea.)</th><td><span id="regBanquet"></span></td></tr> 
         <tr><th>Media Pack ($115)</th><td><span id="regPack"></span></td></tr>
         <tr><th>TOTAL</th><td><span id="regTotal"></span></td></tr> 
      </table>                                               
   </aside>


  
   
   <nav id="columns">
      <ul>
         <li><a href="#">home page</a></li>
         <li><a href="#">conference schedule</a></li>
         <li><a href="#">speaker bios</a></li>
         <li><a href="#">general session</a></li>
         <li><a href="#">exhibits</a></li>
         <li><a href="#">programs</a></li>
         <li><a href="#">workshops</a></li> 
         <li><a href="#">committees</a></li>
         <li><a href="#">panel discussion</a></li>
         <li><a href="#">demonstrations</a></li> 
         <li><a href="#">travel info</a></li>
         <li><a href="#">accommodations</a></li>
         <li><a href="#">banquet</a></li>
         <li><a href="#">family attractions</a></li>
         <li><a href="#">registration</a></li>
         <li><a href="#">MAS home page</a></li>                                                     
      </ul>         
   </nav>   

   <footer>
      Media Arts Society &copy; 2018 All Rights Reserved
   </footer>
   
</body>
</html>


================================================================================================

mas_register.js

"use strict";


window.addEventListener("load", function() 
{
   calcCart();
   document.getElementById("regSubmit").onclick = sessionTest;   
   document.getElementById("fnBox").onblur = calcCart;
   document.getElementById("lnBox").onblur = calcCart; 
   document.getElementById("groupBox").onblur = calcCart;   
   document.getElementById("mailBox").onblur = calcCart;   
   document.getElementById("phoneBox").onblur = calcCart;   
   document.getElementById("sessionBox").onchange = calcCart;   
   document.getElementById("banquetBox").onblur = calcCart; 
   document.getElementById("mediaCB").onclick = calcCart;   
});

function sessionTest() 
{
   var confSession = document.getElementById("sessionBox");
   if (confSession.selectedIndex === -1) 
   {
      confSession.setCustomValidity("Select a Session Package");
   } 
   else 
   {
      confSession.setCustomValidity("");
   }
}


function calcCart() 
{
   sessionStorage.confName = document.forms.regForm.elements.firstName.value + " " + document.forms.regForm.elements.lastName.value;
   sessionStorage.confGroup = document.forms.regForm.elements.group.value;
   sessionStorage.confMail = document.forms.regForm.elements.email.value;
   sessionStorage.confPhone = document.forms.regForm.elements.phoneNumber.value;
   sessionStorage.confBanquet = document.forms.regForm.elements.banquetGuests.value;
   
   sessionStorage.confBanquetCost = document.forms.regForm.elements.banquetGuests.value*55;   
   
   var selectedSession = document.getElementById("sessionBox").selectedIndex;
   if (selectedSession !== -1) 
   {
      sessionStorage.confSession = document.forms.regForm.elements.sessionBox[selectedSession].text;
      sessionStorage.confSessionCost = document.forms.regForm.elements.sessionBox[selectedSession].value;
   } 
   else 
   {
      sessionStorage.confSession = "";
      sessionStorage.confSessionCost = 0;
   }
   
   if (document.forms.regForm.elements.mediaCB.checked) 
   {
      sessionStorage.confPack = "yes";
      sessionStorage.confPackCost = 115;
   } 
   else 
   {
      sessionStorage.confPack = "no";
      sessionStorage.confPackCost = 0;   
   }
   
   
   sessionStorage.confTotal = parseFloat(sessionStorage.confSessionCost) + 
                              parseFloat(sessionStorage.confBanquetCost) + 
                              parseFloat(sessionStorage.confPackCost);
   
   writeSessionValues(); 
}

function writeSessionValues() 
{
   
   document.getElementById("regName").textContent = sessionStorage.confName;
   document.getElementById("regGroup").textContent = sessionStorage.confGroup;   
   document.getElementById("regEmail").textContent = sessionStorage.confMail;    
   document.getElementById("regPhone").textContent = sessionStorage.confPhone; 
   document.getElementById("regSession").textContent = sessionStorage.confSession; 
   document.getElementById("regBanquet").textContent = sessionStorage.confBanquet;
   document.getElementById("regPack").textContent = sessionStorage.confPack;
   document.getElementById("regTotal").textContent = "$" + sessionStorage.confTotal;
}

================================================================================


mas_styles.css


@charset "utf-8";


/* HTML and Body styles */

html 
{
   background: rgb(51, 51, 51) url(cg_back.png);
   font-family: Verdana, Geneva, sans-serif;
   height: 100%;
}

body 
{
   background-color: rgb(241, 241, 241);
   box-shadow: black 20px 0px 40px,  black -20px 0px 40px;
   border-left: 3px solid black;
   border-right: 3px solid black;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   -webkit-align-items: center;
   align-items: center;
   margin: 0px auto;
   min-width: 320px;
   max-width: 1020px;  
   width: 100%;
}


/* Header styles */

header 
{
   width: 100%;
}

header img#logoimg 
{
   display: block;
   width: 100%;
}

/* Horizontal Navigation Styles */

nav.horizontal ul 
{
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-align-items: center;
   align-items: center;
   background-color: transparent;
   height: 40px;
   margin-top: -40px;
}
   
nav.horizontal ul li 
{
   -webkit-flex: 0 1 80px;
   flex: 0 1 80px;   
   margin: 10px;
}

nav.horizontal ul li a 
{
   color: rgb(21, 21, 21);
   display: block;
   font-size: 0.9em;
   text-align: center;
   padding: 50% 0%;
}

nav.horizontal ul li a:hover, nav.horizontal ul li a:active 
{
   color: rgb(211, 211, 211);
   text-shadow: 0px 0px 2px black, 0px 0px 8px black;
}


/* Navigation Styles */

nav#columns 
{  
   width: 100%;
}

nav#columns ul 
{
   background: linear-gradient(to top, rgb(51, 51, 51), rgb(101, 

188, 200));
        
   -moz-column-width: 200px;
   -webkit-column-width: 200px;
    column-width: 200px;

   -moz-column-gap: 25px;
   -webkit-column-gap: 25px;
    column-gap: 25px;
    
    padding: 25px;
}


nav#columns ul li a 
{
   color: white;
   text-decoration: none;
   font-size: 0.9em;
}

nav#columns a:hover 
{
   color: rgb(191, 231, 191);
   text-decoration: underline;
}

/* Section Styles */

section#section1 
{
   background: rgb(241, 241, 241);
   -webkit-flex: 2 1 421px;
   flex: 2 1 421px; 
   padding: 10px 20px 20px 40px; 
}

section#section2 
{
   background: rgb(241, 241, 241);
   width: 600px; 
   padding: 10px 20px 20px 40px;
   margin: 10px auto; 
}

section h1 
{
   font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet 

MS", Verdana, sans-serif;
   font-weight: normal;
   font-size: 1.8em;
   margin: 15px 0px 18px;
   color: rgb(53, 158, 190);
   text-shadow: 2px 2px 10px rgb(151, 151, 151);
}

/* Aside Styles */

aside#reg1Aside 
{
   -webkit-flex: 2 1 200px;
   flex: 2 1 200px;
   background: rgb(241, 241, 241);
   padding: 0px 20px;
}

aside#reg2Aside 
{
   width: 100%;
   background: rgb(241, 241, 241);
   padding: 0px 20px;
}

/* Article Styles */

article 
{
   background: rgb(156, 178, 184);
   color: white;
   width: 100%;
   padding: 5px 20px 15px;  
   column-count: 4;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;   
   
}

article h1 
{
   font-size: 2em;
   font-family: Constantia, "Lucida Bright", "DejaVu Serif", 

Georgia, "serif";
   letter-spacing: 0.3em;
   text-align: center;
   font-weight: normal;
   margin: 12px 0px 20px 0px;
   width: 100%;
}

article p 
{
   font-size: 1em;
   font-family: Constantia, "Lucida Bright", "DejaVu Serif", 

Georgia, "serif";
   margin: 0px 20px 10px 0px;
   color: rgb(101, 101, 101);
   -webkit-flex: 1 1 200px;
   flex: 1 1 200px;
}

article p:first-of-type 
{
   background-color: rgba(255, 255, 255, 0.2);
   padding: 8px;
}

article a, article a:hover, article a:visited, article a:active 
{
   color: rgb(0, 41, 81);
}

/* Form Layout Styles */

section fieldset:first-of-type 
{
   margin: 10px 0px;
   padding-top: 8px;
   border-right: none;
   border-bottom: none;
   border-left: 4px groove rgb(165, 255, 255);
   border-top: 4px groove rgb(165, 255, 255);
   border-radius: 25px;
   border-top-right-radius: 0px;
   border-bottom-left-radius: 0px;   
}

section fieldset:last-of-type 
{
   margin: 10px 0px;
   border-top: none;
   border-left: none;
   border-right: 4px groove rgb(165, 255, 255);
   border-bottom: 4px groove rgb(165, 255, 255);
   border-radius: 25px;
   border-top-right-radius: 0px;
   border-bottom-left-radius: 0px;
}

section label 
{
   display: block;
   float: left;
   clear: left;
   margin: 3px;
   width: 240px;
   font-size: 0.8em;
   color: rgb(101, 101, 101);
}

section input, section select 
{
   display: block;
   float: left;
   margin: 3px 0px;
   width: 200px;
   color: rgb(101, 101, 101);
}

section input[type="checkbox"] 
{
   width: 25px;
}

section input#banquetBox 
{
   width: 4em;
}

section select 
{
   font-size: 0.75em;
   color: rgb(101, 101, 101);
}

section span 
{
   display: block;
   width: 100px;
   float: left;
   margin: 3px 0px 3px 5px;
   font-size: 0.8em;
   color: rgb(101, 101, 101);
}

section label.cardLabel 
{
   display: inline-block;
   width: 50px;
   float: none;
}

section input[type='radio'] 
{
   width: 20px;
   display: inline-block;
}

section img 
{
   display: inline
}

section input#subButton, section input#regSubmit 
{
   background-color: rgb(69, 149, 151);
   color: rgb(216, 245, 245);
   border-radius: 20px;
   float: none;
   display: block;
   font-size: 1.1em;
   height: 30px;
   width: 150px;
   clear: left;
   margin: 10px auto;
}

section fieldset#cards 
{
   border: none;
}

aside#reg1Aside table 
{
   width: 100%;
}

aside#reg2Aside table 
{
   width: auto;
   margin: 20px auto;
}

aside table caption 
{
   font-size: 1.2em;
   font-weight: normal;
   text-align: center;
   letter-spacing: 0.1em;
   margin: 4px 0px 12px 0px;
   caption-side: top;
   color: rgb(101, 101, 101);
}

aside table th 
{
   vertical-align: top;
   font-weight: normal;
   text-align: left;
   font-size: 0.8em;
   color: rgb(101, 101, 101);
   padding-right: 15px;
}

aside table td 
{
   vertical-align: top;
   font-size: 0.8em;
   letter-spacing: 0.1em;
   width: 140px;
   background-color: transparent;
   color: rgb(101, 101, 101);
}

aside table tr:last-of-type th, aside table tr:last-of-type td 
{
   border-top: 1px solid rgb(101, 101, 101);
}


/* Validation Styles */

input:focus, select:focus 
{
   background-color: rgb(245, 245, 140);
}

input#fnBox:focus:valid,
input#lnBox:focus:valid,
input#groupBox:focus:valid,
input#mailBox:focus:valid,
input#phoneBox:focus:valid 
{
   background-color: rgb(220, 255, 220);
}

input#fnBox:focus:invalid,
input#lnBox:focus:invalid,
input#groupBox:focus:invalid,
input#mailBox:focus:invalid,
input#phoneBox:focus:invalid 
{
   background-color: rgb(255, 232, 232);
}

/* Footer styles */   

footer 
{
   color: white;    
   background: rgb(51, 51, 51);  
   height: 30px;
   text-align: center;
   font-size: 0.9em; 
   width: 100%;
   border-top: 1px solid white;
}

sample output

0 0
Add a comment
Know the answer?
Add Answer to:
New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /*...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Hello! I am to create a .js file that allows the paragraph on the bottom of...

    Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...

  • HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500"...

    HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500" border="10"> <!-----row---1----logo---> <tr><td> <img src="20150516_084745" width="700" height="200"> </td></tr> <!-----row-2-navigation-----> <tr><td> <!----start-navigation-table----> <table width="700" height="100" border="5" bgcolor="lightgreen" > <tr><td><a href="HerbFarm.html"> <center> HOME </center></a></td> <td><a href="about3.html"> <center> ABOUT </center></a></td> <td><a href="contact3.html"> <center> CONTACT </center></a></td> <td><a href="gallery3.html"> <center> GALLERY </center></a></td> </tr> </table> <!------end-navigation-table----> </td></tr> <tr><td> <h1>Contact </h1> <form action="thankyou.html">    </form> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-50"> <h3>Billing Address</h3> <label for="fname"><i...

  • Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8">...

    Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8"> </head> <body> <h2>Order Form</h2> <form name="orderForm" method="post" action="processForm.html"> <table> <tr> <th colspan="2">Personal Information</th> </tr> <tr> <td>First Name:</td> <td><input type="text" name="firstName" id="firstName" size="30"></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" name="lastName" id="lastName" size="30"></td> </tr> <tr> <td>Address:</td> <td><input type="text" name="address" id="address" size="30"></td> </tr> <tr> <td>City:</td> <td><input type="text" name="city" id="city" size="30"></td> </tr> <tr> <td>Province:</td> <td><select name="province" id="province" size="1"> <option disabled>Select a province</option> <option value="BC">British Columbia</option> <option value="AB">Alberta</option> <option...

  • I need help incorporating javascript into my page. The Lessons page has a message box (not...

    I need help incorporating javascript into my page. The Lessons page has a message box (not an alert box) that becomes visible/invisible when the mouse is moved over/off the small, red hyperlink on the last line that says, "note." The note is 10pt, red, and italic. The message box contains the text, "Students who pre-pay for the entire term will have the registration fee waved." It is 150px wide, with an "azure" background and a black border. It has 5px...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • Hello Ive been tryting to add the CDN of jquery to my html code and I...

    Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : ​​ Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...

  • I cant complete this assignment, I have tried several ways shown in the tutorial but cant...

    I cant complete this assignment, I have tried several ways shown in the tutorial but cant seem to get it to validate, can anyone help? This is a basic JavaScript tutorial and will not validate with Jquery. Monroe Public Library Denise Kruschev manages the website for the Monroe Public Library in Monroe, Ohio. One of her responsibilities is to add content and links to the site that will be of interest to the library’s patrons. Denise has asked you to...

  • I need to complete 3 validation cases in this Javascript code. I need to validate email,...

    I need to complete 3 validation cases in this Javascript code. I need to validate email, phone and street address. How would I go about validating these 3 cases in this code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Week 10: Regular Expressions</title> <style type="text/css"> span { padding: 2px; } .success { color: #008000; background: #99cc99; } .failure { color: #ff0000; background: #ff9999; } </style> <script type="text/javascript"> function validateInput(form) { var result0 = document.getElementById('result0'), result1 = document.getElementById('result1'), result2 = document.getElementById('result2'),...

  • i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search"...

    i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search" link on the left to a button that when clicked, hide all the fields on the form and display the text "This is a search feature..." 3) When the user fills the form and clicks "Login", the values inputted should be displayed in the empty row (under Login) of the page. The display should be in the form: Student ID: <input value> Student Name:...

  • Q1. rewrite the exercise on April 4 by adding the following operations: 1) In the php...

    Q1. rewrite the exercise on April 4 by adding the following operations: 1) In the php script, create an associative array named $order that stores the following values: - the number of cheese toppings; - the number of pepperoni toppings; - the number of ham toppings; - the size of the ordered pizza; - the number of the ordered pizza; - the total cost of the order; - the discount rate; - the total cost after the discount. 2) the...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT