JS Support Ticket

Objective

Once an end user completes the form on the index.html file and clicks the "Submit Ticket" button, the (currently hidden) section element should appear on the right with the user's information and a description of the user's issue. See enclosed image file for an example.

Note that the section element and nested div elements are hidden via CSS.

HTML Home Page File Instructions

1. Update the Comment with your name, the file name, and date.

2. Update the title element with your last name.

3. Open the home page in your web browser to view the page.

4. You are welcome to change the form content. Note that, if you do, you may need to update some of form attributes (id and for) the style rules in the CSS file.

5. The HTML file includes several comments throughout the page with additional information.

6. You may add more HTML elements and attributes to the webpage as you see fit.

7. Add a script element to connect the page to your js file.

CSS File Instructions

1. Update the comment with your name, the file name, and date.

2. You may modify style rules as desired.

JavaScript Instructions

1. Create an external, JavaScript file and use the file to create all functions, variables, and JavaScript statements. Do not embed any JavaScript statements, variables, or functions within the HTML file.

2. Use JavaScript to store the user's information within a variable array or JavaScript object.

3. Use JavaScript to loop through the variable array or JavaScript object and display the client's name, department, office location, email, and phone number within the first div element (ticketFor id) within the section element. The user information should be placed within paragraph elements. (Hint: See Chapter 10, Show Hidden Content for more information about how to display content hidden by CSS.)

4. Use JavaScript to display the client's description of the issue within the second div element (ticketDesc id) within the section element. The user's description of the issue should be placed within a paragraph element.

5. The hidden section and two div elements should appear with the user's information once the user clicks the "Submit Ticket" button.

6. Include comments to note the purpose of each variable and each function. Comment liberally throughout your JavaScript file.

7. Use your own, unique names for variables and functions. Do NOT use variable and function names from the book or hands-on class exercises. Exceptions to this rule include 'result'.

10. If the user did not complete one or more form fields, use the empty, errorMessage div element on the page to display a message to the user to complete all fields before submitting the ticket.

Example

See Figure: see image.

Starter Files

index.html

< !DOCTYPE html >
< !--
Student Name: Firstname Lastname
File Name: index.html
Date: March 10, 2021
-- >
< html lang="en" >
< head >
< title >Assessment 2: Last Name< /title >
< !-- Add your last name to the title element -- >
< meta charset="utf-8" >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
< link rel="stylesheet" href="styles.css" >
< script src="script.js" >< /script >
< /head >
< body >

< div id="container" >

< header >< !-- You may change the header content if you wish -- >
< h1 >Support Ticket Portal< /h1 >
< /header >

< !-- ********* Article/Form content area *********
You are welcome to update the following form as you see fit. Just be sure to update the respective id and for attributes.
-- >

< article >
< h2 >Support Ticket Information< /h2 >
< div id="errorMessage" >< /div >
< form >
< fieldset id="userinfo" >

< legend >User Information< /legend >

< !-- Label and input for name -- >
< label for="nameinput" >Name< /label >
< input type="text" id="nameinput" name="name" >

< !-- Label and input for Department -- >
< label for="deptinput" >Department< /label >
< input type="text" id="deptinput" name="department" >

< !-- Label and input for Office Location -- >
< label for="locationinpput" >Office Location< /label >
< input type="text" id="locationinput" name="location" >

< !-- Label and input for Email -- >
< label for="emailinput" >Email< /label >
< input type="email" id="emailinput" name="email" >

< !-- Label and input for Phone -- >
< label for="phoneinput" >Phone< /label >
< input type="text" id="phoneinput" name="phone" >

< !-- Label and textarea for Description of the Issue -- >
< label for="issue" id="issuelabel" >Description of the Issue< /label >
< textarea id="issue" name="description" rows="6" cols="50" placeholder="Please describe the issue you are experiencing" >< /textarea >

< /fieldset >

< fieldset id="submitbutton" >

< !-- Submit Button -- >
< input type="button" id="submitBtn" value="Submit Ticket" >

< /fieldset >
< /form >< !-- End of Form -- >

< section >< !-- Hidden section -- >

< h2 >Ticket Summary< /h2 >

< div id="ticketFor" >< !-- Hidden div 1 -- >
< h3 >Ticket Submitted by< /h3 >
< /div >

< div id="ticketDesc" >< !-- Hidden div 2 -- >
< h3 >Summary of the Issue< /h3 >
< /div >

< /section >

< /article >

< /div >

< /body >
< /html >

styles.css

/*
Student: Firstname Lastname
Date: March 10, 2021
File Name: styles.css
*/

/****************************************************************
* *
* You are welcome to modify any/all style rules as you see fit. *
* You are welcome to add any new style rules as you see fit. *
* You are welcome to create any new selectors as you see fit. *
* *
****************************************************************/

/* CSS Reset */
body, header, h1, article, h2, div, form, h3, fieldset, legend, label, input, textarea, section {
margin: 0;
padding: 0;
border: 0;
}

* {
box-sizing: border-box;
}

body {
background: #e9dffb;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}

#container {
margin: 0 auto;
width: 80%;
}

header {
background: #300d6e;
color: #fff;
font-size: 3em;
text-align: center;
line-height: 3.5em;
border-bottom: 1px solid black;
}

article {
text-align: left;
background: #905bec;
padding: 20px;
overflow: auto;
}

h2 {
font-weight: bold;
font-size: 30px;
text-align: center;
width: 65%;
}

/* Form style rules */
form {
padding: 10px;
width: 65%;
float: left;
}

fieldset {
margin-bottom: 10px;
position: relative;
padding: 2.5em 1em 0.5em 1em;
background: #e9dffb;
}

fieldset, label, input, textarea {
margin-bottom: 2%;
display: block;
}

fieldset legend {
font-weight: bold;
font-size: 1.25em;
position: absolute;
top: 0;
left: 0;
font-size: 1.25em;
margin-left: 2%;
}

label {
padding-top: 1%;
}

legend, #submitBtn, #issuelabel {
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
}

input {
line-height: 20px;
}

input, textarea {
font-size: 1em;
}

#nameinput, #emailinput, #deptinput, #locationinput, #phoneinput {
width: 20em;
line-height: 2em;
}

#issuelabel {
display: block;
margin: 1em 0 0.5em 0;
}

textarea {
margin-bottom: 1em;
}

#submitBtn {
font-size: 1.25em;
padding: 4%;
border-radius: 5px;
background-color: #e9dffb;
}

#submitbutton {
background: inherit;
border: none;
padding: 0.5em 0 0 0;
text-align: center;
}

/* Style rules for hidden section */
section {
float: right;
width: 34%;
background: #fff;
border: 3px solid #300d6e;
margin-top: 10px;
display: none;
}

section h2 {
width: 100%;
color: #300d6e;
padding: 5px;
}

section div {
margin-left: 20px;
display: none;
padding: 10px;
}

section div p {
margin-bottom: 5%;
}

h3 {
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
font-size: 1.25em;
margin: 0.5em 0 0.5em -0.5em;
}

/* Style rule for errorMessage */
#errorMessage {
display: none;
width: 80%;
text-align: center;
padding: 10px;
margin: 15px auto 5px;
background-color: #fff;
color: #ff0000;
border: 5px solid #000;
font-weight: bold;
}