CSIS 310 Mindtap ACGIP Conference Professor Darshan Banerjee

Description

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


home page
keynote address
speakers
general session
abstracts
programs
workshops
committees
executive session
advisory council
travel info
accommodations
banquet
family attractions
registration
ACGIP home page
tour Sante Fe
links
Conference Registration Form
Required Item (*)
ACGIP Member ($695)
Eligible to attend all sessions and banquet
Non-Member ($795)
Eligible to attend all sessions and banquet
Student ($310)
Eligible to attend all sessions. Proof of
student status required
Poster ($95)
Eligible to attend display hall and vendor stations
Guest ($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 */
Tasks:
Complete the Script & Form Elements
Complete the Data List step
Complete the Regex
Complete the Selection List
Complete the Submit Button
SCREENSHOTS
SOLUTION
PAYMENT
CSIS 310
ACGIP Conference
CSIS 310 ACGIP Conference
CSIS 310 Mindtap ACGIP Conference
The solution includes a zip file.
Attachments [Move over files to preview content of those files]
CSIS_310_ACGIP_Conference .zip (566.54 KB)
ACGIP Conference.docx
cg_register.html
cg_script.js
css
cg_base.css
cg_forms.css
cg_styles.css
cg_validate.css
images
cg_back.png
cg_invalid.png
cg_logo.png
cg_valid.png
Preview cg_register.html
xxxx:
xxxxxxxx: xx_xxxxxxxx.xxxx
–&xx;


&xx;xxxxxx&xx;
&xx;xxx xxx=&xxxx;xxxxxx/xx_xxxx.xxx&xxxx; xxx=&xxxx;xxxxxxxx xxxxxxxx xxx xxxxx xxxxxxxxxx&xxxx; xx=&xxxx;xxxxxxx&xxxx; /&xx;
&xx;/xxxxxx&xx;
&xx;xxx&xx;
&xx;xx&xx;
&xx;xx&xx;&xx;x xxxx=&xxxx;#&xxxx;&xx;xxxx xxxx&xx;/x&xx;&xx;/xx&xx;
Preview cg_base.css
@xxxxxxx “xxx-8”;
xxxxxxx, xxxxx, xxxxxxxxxx, xxxxxx,
xxxxxx, xxxxxx, xxxx, xxx, xxxxxxx {
xxxxxxx: xxxxx;
}
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 {
xxxxxx: 0;
xxxxxxx: 0;
xxxxxx: 0;
xxxx-xxxx: 100%;
xxxxxxxxxx: xxxxxxxxxxx;
-xxxxxx-xxx-xxxxxx: xxxxxx-xxx;
Preview cg_forms.css
xxxxx {
xxxxxxx: xxxxx;
xxxxx: xxxx;
clear: left; margin: 5px; width: 200px; }
input, select, textarea { display: block;
xxxxx: xxxx;
xxxxxx: 5xx 0xx;
xxxxx: 200xx;
}
xxxxxxxx {
Preview cg_styles.css
xxx-xxxxxx: xxxxx 20xx 0xx 40xx, xxxxx -20xx 0xx 40xx;
xxxxxx-xxxx: 3xx xxxxx xxxxx;
xxxxxx-xxxxx: 3xx xxxxx xxxxx;
xxxxxxx: -xxxxxx-xxxx;
xxxxxxx: xxxx;
-webkit-flex-flow: row wrap; flex-flow: row wrap; margin: 0px auto; min-width: 320px; max-width: 1020px; width: 100%; }
header { width: 100%; }
xxxxxx xxx#xxxxxxx {
xxxxxxx: xxxxx;
xxxxx: 100%;
}
xxx {
Preview cg_validate.css
xxxxx:xxxxx, xxxxxx:xxxxx, xxxxxxxx:xxxxx {
xxxxxxxxxx-xxxxx: xxx(245,245,140);
}
#fnBox:focus:valid, #lnBox:focus:valid, #addBox:focus:valid, #mailBox:focus:valid, #phoneBox:focus:valid, #idBox:focus:valid { background: rgb(220,255,220) url(../images/cg_valid.png) no-repeat right; }
#fnBox:focus:invalid, #lnBox:focus:invalid, #addBox:focus:invalid, #mailBox:focus:invalid,
#xxxxxxxx:xxxxx:xxxxxxx, #xxxxx:xxxxx:xxxxxxx {
xxxxxxxxxx: xxx(255,232,232) xxx(../xxxxxx/xx_xxxxxxx.xxx) xx-xxxxxx xxxxx;
}
Price: $19
Buy Now
Checkout
Added to cart
Add to Cart
Checkout
Added to cart
You May Also Like:
CSIS 310 Mindtap  Slate & Pencil Tutoring
CSIS 310 Mindtap Voter Web
CSIS 310 Mindtap Star Dust Stories