CS6251 Core JavaScript

Overview

In this lab, you will implement a script that formates form input for display.

The Starter Project

Download the starter project from the course website. The project consists of three files:

1. An HTML file that implements a form.

• The form contains a hidden < input > element with name and id summary . Its value is set to an empty string.
• When the form is submitted, the JavaScript function prepareSummary is called. A stub of the function is implemented in the JavaScript file. However, the body of the function only returns true. You will complete the function and its helper functions in this lab.
• The form is submitted to an external script. If the value of the hidden < input > element is an empty string, then the resulting page displays an error message and asks the user to submit the form again. If the value of the hidden < input > element is not empty, the external script displays the value on the resulting page.

You will not have to make changes to the HTML file.

2. A style sheet, which is a stripped-down version from the pacific trails resort case study. You will not have to make changes to the style sheet.

3. A JavaScript file with three function stubs. You will have to implement the body of these three functions in this lab.

artdealer.html

< !DOCTYPE html >
< html lang="en" >

< head >
< title >ArtDealer :: Submission< /title >
< meta charset="utf-8" >
< meta name="description" content="ArtDealer allows artists to submit their art work for sale" >
< link rel="stylesheet" href="artdealer.css" >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
< script src="artdealer.js" >< /script >
< /head >

< body >
< header >
< h1 >Art Dealer< /h1 >
< /header >
< main >
< p >Please submit the information abou the art work you want to sell below.
Required information is marked with an asterisk (*).< /p >
< form method="post" onsubmit="return prepareSummary();" action="https://www.westga.edu/~anja/cs6251/lab09/artdealer.php" >
< input type="hidden" id="summary" name="summary" value="" >
< label for="title" >* Title: < /label >< input type="text" id="title" name="title" placeholder="title of artwork" >
< label for="artist" >* Artist: < /label >< input type="text" id="artist" name="artist" placeholder="name of artist" >
< label for="year" >Year: < /label >< input type="text" id="year" name="year" placeholder="year of completion" >
< label for="price" >* Price: < /label >< input type="text" id="price" name="price" placeholder="100.00" >
< label for="description" >Description: < /label >< textarea id="description" name="description" rows="5"
cols="25" >< /textarea >
< input type="submit" id="submit" value="Submit" >
< /form >

< /main >
< footer >
Copyright © CS6251 Art Dealer
< /footer >
< /body >

< /html >

artdealer.css

* {
box-sizing: border-box;
}

header,
main,
footer {
display: block;
}

body {
background-color: #3399CC;
color: #666666;
font-family: Verdana, Arial, sans-serif;
background-image: linear-gradient(to bottom, #3399CC, #C2E0F0, #3399CC);
margin-left: 12em;
margin-right: 12em;
}

header {
background-color: #000033;
color: #FFFFFF;
font-family: Georgia, serif;
}

h1 {
line-height: 200%;
background-repeat: no-repeat;
background-position: right;
padding-left: 1em;
height: 72px;
margin-bottom: 0;
}

footer {
font-size: .70em;
font-style: italic;
text-align: center;
padding: 1em;
background-color: #FFFFFF;
}

main {
padding-left: 2em;
padding-right: 2em;
padding-bottom: 1em;
padding-top: 1em;
background-color: #FFFFFF;
display: block;
}

label {
float: left;
display: block;
width: 8em;
padding-right: 1em;
}

input,
textarea {
display: block;
margin-bottom: 1em;
width: 20em;
}

#submit {
margin-left: 9.6em;
width: 20em;
}

@media only screen and (max-width: 1024px) {
body {
margin: 0;
padding: 0;
}

main {
width: auto;
min-width: 0;
margin: 0;
box-shadow: none;
}

h1 {
margin: 0;
}

footer {
margin: 0;
}
}

@media only all and (max-width: 768px) {
h1 {
height: 100%;
font-size: 1.5em;
padding-left: 0.3em;
}

main {
padding: 0.1em 0.6em 0.1em 0.4em
}

}

artdealer.js

/**
* Script to process the submitted form data of the form in file
* artsdealer.html
*/

/**
* Sets the value of the hidden form field to a string with the formatted
* submitted form data. If invalid form data is submitted, the hidden form
* field value is set to an empty string. Form fields have to meet the
* following criteria:
* title: must be an non-empty string
* artist: must be an non-empty string
* year: must be a postiive integer value or empty
* price: must be a non-negative value
* description: any string, possibly an empty string
*
* @returns {boolean} true
*/
function prepareSummary() {
}

/**
* Validates the submitted object properties. Properties have to meet the
* following criteria:
* artwork.title: must be an non-empty string
* artwork.artist: must be an non-empty string
* artwork.year: must be an empty string or represent a non-negative integer
* artwork.price: must be a non-negative value
* The price and year property are set to the number they represent. If
* artwork.year is an empty string, artwork.year is set to the value NaN.
*
* @param {object} artwork the object containing the submitted artwork data
* @param {string} artwork.title the title of the artwork
* @param {string} artwork.artist the name of the artist
* @param {string} artwork.year the year the artwork was created
* @param {string} artwork.price the sales price
* @param {string} artwork.description the description of the artwork
* @returns {boolean} false if invalid data is submitted; otherwise,
* returns true
*/
function validateAndParseArtworkData(artwork) {
}

/**
* Format the data in object for dislpay in an HTML document. The formatted
* string has to be of the following form:
* {artwork.title}< br >by {artwork.artist}< br >[Year: {artwork.year}< br >]
* Price: {artwork.price}< br >[Description: {artwork.description}]
* where
* {artwork.title} is the string artwork.title in uppercase letters
* {artwork.artist} is the name of the artist
* {artwork.price} is the value of artwork.price with two decimal digits
* after the decimal point.
* {artwork.description} is the content of artwork.description
* The brackets [] indicated that the included part should be omitted in case
* artwork.year is not a number, repectively, if artwork.description is an
* empty string.
*
* @param {object} artwork the object containing the submitted artwork data
* @param {string} artwork.title the title of the artwork
* @param {string} artwork.artist the name of the artist
* @param {number} artwork.year the year the artwork was created
* @param {number} artwork.price the sales price
* @param {string} artwork.description the description of the artwork
* @returns {string} the formatted string
*/
function formatSummary(artwork) {
}

The given function prepareSummary in the starter project sets the hidden form field to an empty string, no maer which form input is submitted by the user. If the hidden form field value is the empty string, the external PHP script will display the following page upon form submission: see image.

Instructions

Complete the three functions as specified in the subsections below and as specified in the JSDoc comments:

• prepareSummary()
• validateAndParseArtworkData(artwork)
• formatSummary(artwork)

Function prepareSummary

Implement the body of the function as follows:

1. Retrieve the values entered by the user in the form fields and create an object with the corresponding properties:

• title
• artist
• year
• price
• description

Store each form field value as a string in the corresponding property. Thus, all properties are of type string initially.

2. Call function validateAndParseArtworkData where the newly created object is passed in.

3. If the function validateAndParseArtworkData returns false (meaning that the user input is invalid), the value of the hidden < input > element is set to an empty string.

4. If the function validateAndParseArtworkData returns true (meaning that the user input is valid and the year and price properties are set to the number value they originally represent as string), the function formatSummary is called. The value of the hidden form field is set to the return value of function formatSummary.

5. The function should return true in all scenarios.

Function validateAndParseArtworkData

Implement the body of the function as follows:

1. Validate the properties of the passed in object artwork. As specified in the JSDoc comment for the function, the properties have to meet the following criteria:

• artwork.title : must be a non-empty string
• artwork.artist : must be a non-empty string
• artwork.year : must be an empty string or represent a non-negative integer. If artwork.year can be parsed to an integer using Number.parseInt , it can be considered to be an integer. A non-negative value is 0 or greater than 0.
• artwork.price : must be a non-negative value (If artwork.price can be parsed to a float using method Number.parseFloat , it can be considered to be an value.)
• The property artwork.description does not need to meet any criteria.

2. If one or more of the above criteria are violated, the function validateAndParseArtworkData should return false .

3. If all criteria are met, then validateAndParseArtworkData should do the following:

• The property artwork.year should be set to NaN if the original property value is an empty string; otherwise, the property artwork.year should be set to the integer number it represents. Thus, when validateAndParseArtworkData returns, the property artwork.year has changed its type from string to number.
• The property artwork.price should be set to the number it represents. Thus, when validateAndParseArtworkData returns, the property artwork.price has changed its type from string to number.
• The function should return true

Function formatSummary

Function formatSummary creates and returns a formatted string from the form input for display in an HTML document. As specified in the JSDoc comment for the function, the formatted string has to be of the following form:

{artwork.title}< br >by {artwork.artist}< br >[Year: {artwork.year}< br >]Price: ${artwork.price}< br >
[Description: {artwork.description}]

where

• {artwork.title} is the value of artwork.title in uppercase letters
• {artwork.artist} is the name of the artist. Optional task for bonus point: Format the artist name such that the first letter of the first word is capitalized and all other letters are lowercase.
• {artwork.price} is the value of artwork.price with two decimal digits after the decimal point.
• {artwork.description} is the value of artwork.description. Optional task for bonus point: If the string artwork.description has at more than 100 characters, then {artwork.description} should consist of the first 97 characters of artwork.description followed by three dots.

The brackets [] around "Year: {artwork.year}< br >" and around Description: {artwork.description} should not be included in the formatted string. The brackets indicate that the part is not necessarily included. In particular, the part [Year: {artwork.year}
] should be omitted in case artwork.year is not a number. The part [Description: {artwork.description}] should be omitted if artwork.description is an empty string. The following pages list several examples that demonstrate the formatted string for different input scenarios. The demonstrations include the optional formattng of the artist name and the artwork description.

Example 1: All fields contain correct input see image.

String returned by formatSummary:

MONA LISA< br >by Leonardo da vinci< br >Year: 1506< br >Price: $1000000.00< br >Description:
This is the real thing! Don't believe the Louvre Museum which claims to have the
original painting.

Resulting page content: see image.

Example 2: No year, price rounded to two decimal digits, description over 100 characters see image.

String returned by formatSummary:

MONA LISA< br >by Leonardo da vinci< br >Year: 1506< br >Price: $10000.00< br >Description:
This is the real thing! Really!!! Don't believe the Louvre Museum which claims to
have the origin...