HomeworkLib
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="#">mas22@example.com</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="#">mas22@example.com</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...

  • <!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"...

  • 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'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...

  • URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

    URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to download the uncompressed latest version of jQuery Copy the jQuery.x.x.x.js file in the folder and specified as source file. Task 2: Download and install HTML-Kit 1. Navigate to htmlkit.com. 2. Click Download HTML-Kit 292. After it downloads, launch HKSetup.exe. Choose Full installation (the default) Uncheck Yes, download and install HTML-Kit Tools Trial. 6. Click Next>Finish. Task 3: Creating a Simple jQuery Application Launch HTML-Kit....

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 8 Hands-on Project 8-1 Author: Date:   ...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 8 Hands-on Project 8-1 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Hands-on Project 8-1</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.65897.js"></script> </head> <body> <header> <h1> Hands-on Project 8-1 </h1> </header> <article> <h2>New Account Information</h2> <form> <fieldset id="deliveryinfo"> <label for="fnameinput">First Name</label> <input type="text" id="fnameinput" name="fname" /> <label for="lnameinput">Last Name</label> <input type="text" id="lnameinput" name="lname" /> <label for="addrinput">Street Address</label> <input type="text" id="addrinput" name="address" /> <label for="cityinput">City</label> <input type="text" id="cityinput" name="city"...

  • I need help, I have my page set up, I just need help with some aesthetics,...

    I need help, I have my page set up, I just need help with some aesthetics, and getting the clear button to work, and get a popup when they click submit that says success along as all fields are filled out correctly. Any help would be fantastic. <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styleSheet.css" /> <title>2020-2021 Student-Athlete Registration Form - Weber State University</title> </head> <body> <header> <h1>WEBER STATE UNIVERSITY</h1> </header> <div class="link"> <ul> <li><a href="page 1.html"><span class="text">Home</span></a></li> </ul> </div>...

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