[NEW SOLN] CSIS 310 MINDTAP ACGIP CONFERENCE PROFESSOR DARSHAN BANERJEE

[SOLVED] CSIS 310 MINDTAP ACGIP CONFERENCE PROFESSOR DARSHAN BANERJEE: ACGIP Conference Professor Darshan Banerjee is the project coordinator for the annual conference of the Association of Computer Graphics and Image Processing (ACGIP), which takes place this year in Sante Fe, New Mexico. Darshan has asked you to work on the conference’s website, starting with the registration form for conference attendees. The initial form will collect contact information for people attending the conference. The figure below shows a preview of the form you will create for Darshan.

[SOLVED] CSIS 310 MINDTAP ACGIP CONFERENCE PROFESSOR DARSHAN BANERJEE: Professor Banerjee has already written the HTML code for the page and the styles for the form elements. He wants you to write the HTML code for the web form and the CSS validation styles.

Instructions
This Case Problem contains interactive instructions that you can complete to ensure you’ve completed the instruction correctly.
After reading each instruction thoroughly, perform the requested change in the code editor to the right. You can use the Build Website button to refresh your website preview at any point and view a full-page version of your website by clicking the arrow in the top right corner of your website preview.

Linking CSS Files
Open the cg_register.html and cg_validate.css file and enter your name and the date in the comment section of each file.
Open to the cg_register.html file and add a link to the cg_forms.css and cg_validate.css style sheet files to the document head.

Script & Form Elements
Add a script element to the document head that loads the cg_script.js file.
Scroll down to the section element and insert a web form element that employs the action at http://www.example.com/cg/register via the post method.
Add the labels and input boxes shown previously in the figure in the Introduction step and described in the figure below. Place the input boxes directly after the labels and associate each label with its input box control. You do not need to enclose the label and input elements with div elements.

Data List
Create a data list named titleList containing the suggestions: Mr., Mrs., Ms., Prof., Dr., Assist. Prof., and Assoc. Prof. Apply the titleList data list to the titleBox control.

Regex
Apply the regular expression pattern ^\d{10}$|^($\d{3}$\s*)?\d{3}[\s-]?\d{4}$ to the phoneNumber field. Apply the regular expression pattern ^acgip\-\d{6}$ to the acgipID field. (Note: You can copy the regular expression code for the phoneNumber field from the cg_regex.txt file.)

Selection List
Add the Registration Category label associated with the regList control. Add a selection list with the ID regList that stores values in the registerType field. Populate the selection list with the option text: “ACGIP Member ($695)”, “Non-Member ($795)”, “Student ($310)”, “Poster ($95)”, and “Guest ($35)”. Make the corresponding option values equal to “member”, “nonmember”, “student”, “poster”, and “guest”.
Return to the cg_validate.css file to create styles for validating data entry.

Validation Style Rule
Within the Validation Style section, add the following style rules:
Display all input, select, and textarea elements that have the focus with a background color of rgb(245, 245, 140).
When the fnBox, lnBox, addBox, mailBox, phoneBox, and idBox controls have the focus and are valid, change the background color to rgb(220, 255, 220) and display the cg_valid.png image with no tiling in the right side of the background contained within the box.
When the fnBox, lnBox, addBox, mailBox, phoneBox, and idBox controls have the focus and are not valid, change the background color to rgb(255, 232, 232) and display the image cg_invalid.png with no tiling in the right side of the background contained within the box.

Verify
Open the cg_register.html file and click the “Build Website”. Verify that the content and layout of the form resemble that shown in the figure below.
Verify that you must enter all required field values in the proper format for the form to be submitted successfully. Confirm that the browser performs inline validation on the firstName, lastName, address, email, phoneNumber, and acgipID fields.
cg_back.png

cg_base.css
@charset “utf-8″;

/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 7
Case Problem 1

ACGIP Base Style Sheet

Filename: cg_base.css

*/

/* 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;
}

cg_forms.css
/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 7
Case Problem 1

ACGIP Registration Form Style Sheet

Filename: cg_forms.css

*/

/* Form Layout Styles */

label {
display: block;
float: left;
clear: left;
margin: 5px;
width: 200px;
}

input, select, textarea {
display: block;
float: left;
margin: 5px 0px;
width: 200px;
}

textarea {
height: 100px;
}

form p {
clear: left;
text-align: center;
padding-top: 40px;
}

input[type=’submit’] {
background-color: rgb(144, 170, 144);
color: rgb(245,245,165);
border-radius: 20px;
float: none;
display: inline;
font-size: 1.1em;
height: 30px;
width: 150px;
}

cg_invalid.png

cg_logo.png

cg_regex.txt
New Perspectives on HTML and CSS, 7th Edition
Regular Expression Patterns
Tutorial 7
Case Problem 1
=============================================

Phone Number Regular Expression
^\d{10}$|^($\d{3}$\s*)?\d{3}[\s-]?\d{4}$

cg_register.html

</html lang=”en”>

</link href=”cg_styles.css” rel=”stylesheet” ></link href=”cg_base.css” rel=”stylesheet” ></meta name=”viewport” content=”width=device-width, initial-scale=1″ ></meta charset=”utf-8″ >
</img src=”cg_logo.png” alt=”computer graphics and image processing” id=”logoimg” >

home page</a href=”#”>

keynote address</a href=”#”>

speakers</a href=”#”>

general session

abstracts</a href=”#”>

programs</a href=”#”>

workshops</a href=”#”>

committees

executive session</a href=”#”>

advisory council</a href=”#”>

travel info

accommodations</a href=”#”>

banquet</a href=”#”>

family attractions</a href=”#”>

registration

ACGIP home page

tour Sante Fe</a href=”#”>

links</a href=”#”>

</a href=”#”></li class=”newgroup”></a href=”#”></li class=”newgroup”></a href=”#”></li class=”newgroup”></a href=”#”></li class=”newgroup”></a href=”#”></li class=”newgroup”>

Conference Registration Form

Required Item (*)ACGIP Member ($695)Eligible to attend all sessions and banquetNon-Member ($795)Eligible to attend all sessions and banquetStudent ($310)Eligible to attend all sessions. Proof of
student status required</a href=”#”>Poster ($95)Eligible to attend display hall and vendor stationsGuest ($35)Eligible to attend banquet only Association of Computer Graphics and Image Processing

cg_script.js
/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 7
Case Problem 1

Filename: cg_script.js

Purpose: The purpose of this program is to verify that the form
passes an initial validation test.

When the form is submitted, the onsubmit event handler
verifies that the form data is complete and valid.
An alert box is displayed notifying the user.

The event function returns a value of false so that the
student does not have to continually retype test values
in the survey form.

*/

window.onload = init;

function init() {
document.forms[0].onsubmit = function() {
if (this.checkValidity()) alert(“Data passes initial validation tests”);
return false;
}

}

cg_styles.css
@charset “utf-8”;

/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 7
Case Problem 1

ACGIP General Style Sheet

Filename: cg_styles.css

*/

/* 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: white;
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;
margin: 0px auto;
min-width: 320px;
max-width: 1020px;
width: 100%;
}

/* Header styles */

header {
width: 100%;
}

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

/* Navigation Styles */

nav {
width: 100%;
}

nav ul {
background: linear-gradient(to bottom, black, rgb(44, 70, 44));

-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 ul li.newgroup {
margin-top: 15px;
}

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

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

/* Section Styles */

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

section h1 {
font-family: Segoe, “Segoe UI”, “DejaVu Sans”, “Trebuchet MS”, Verdana, sans-serif;
font-size: 1.8em;
margin: 20px 0px 5px;
color: rgb(83, 183, 51);
}

section > p {
margin-bottom: 20px;
padding-bottom: 9px;
border-bottom: 3px solid rgb(83, 183, 51);
}

/* Aside Styles */

aside {
background: rgb(144, 170, 144);
color: white;
-webkit-flex: 1 2 220px;
flex: 1 2 220px ;
padding: 25px;
}

dt {
font-size: 1em;
border-bottom: 1px solid white;
font-weight: bold;
}

dd {
margin-bottom: 25px;
}

dl a {
color: gold;
}

/* Footer styles */

footer {
color: white;
background: rgb(44, 70, 44);
height: 70px;
padding-top: 20px;
text-align: center;
font-size: 0.9em;
width: 100%;
}

/* ===============================
Mobile Styles: 0px to 640px
===============================
*/
@media only screen and (max-width: 640px) {

section h1 {
font-size: 1.5em;
}

section p {
font-size: 0.9em;
}

nav {
-webkit-order: 99;
order: 99;
}

footer {
-webkit-order: 100;
order: 100;
}
}

/* =============================================
Tablet and Desktop Styles: greater than 640px
=============================================
*/
@media only screen and (min-width: 641px) {

}

cg_valid.png

cg_validate.css
/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 7
Case Problem 1

ACGIP Registration Validation Style Sheet
Author:
Date:

Filename: cg_validate.css

*/

/* Validation Styles */