Project 2

JavaScript

Getting Started

Store all you work in a folder called project2. No spaces. No capital letters.

You will create a zip file of this folder called project2.zip and submit it via Blackboard. It is important that the folder and zip file name are correct. No spaces. No capital letters.

Use the following basic document, stylesheet and javascript file as a starting point. Remember to right-click and select Save Link As..

insert_pony.html style.css script.js

Resources

• zyBook Chapter 3 and 4
• Mozilla JavaScript References

HTML Form with JavaScript Validation

Implement the following form using only JavaScript:

Insert Pony Form

Note that the JavaScript in the solution above is obfuscated. You must write your own JavaScript code that is properly indented with meaningful variable names.

Requirements & Grading

#	Component	Points	Description
1	Text Inputs	20	Your form should have seven input elements: First Name (first_name) Last Name (last_name) Nickname (nickname) Cutie Mark (cutie_mark) Password (password) Email (email) Birthday (pony_birthday) In parenthesis is the required name and id of these elements. The sever-side script will not work unless you use these exact names and ids. Note that they all use lower-case letters with no spaces. Rather than code these elements individually, write a JavaScript function for generating these elements, their labels, and a surrounding div element. Your function should take at least three parameters: id - should be used as both the id and name of the element. type - is either "text", "password", "email" or "date" depending on what type of input element you want to generate. required - if this value is true then add the following attribute and value to the input element: setAttribute("class", "required") We will use this class value to determine if the input is required. Note that first_name, last_name, email, pony_birthday, and password must all be required. And, cutie_mark and nickname) are not required.
2	Select	5	Your form should have a select element for picking the pony color. The name and id of this element should be pony_color Use an array to store the color values and loop through it to generate all the option tags.
3	Radio Buttons	10	The form should have two groups of radio buttons: Type (pony_type) - specifies the type of pony. Land (pony_land) - specifies the pony's homeland. Instead of generating these individually, write a JavaScript function that takes as least three parameters and generates a group of radio button with appropriate labels and a surround div element: name - should be used as the name for all the radio buttons. A group of radio buttons will all have the same name, but should have different id's. values - is an array of strings representing the radio button values, which can also be used as the displayed labels and the id's. For example, if the value is "Friendship" then set id="Friendship" for the input tag. Also, create a label with for="Friendship" and use "Friendship" as the innerHTML of the label. You can assume that all the values are unique. require - if this value is true then setAttribute("class", "required") to a span tag that encapsulates all the radio buttons and labels. We will use this to determine if the element is required. Note that pony_type is required but pony_land is not.
4	Checkboxes	10	The form should have two groups of radio buttons: Strengths (pony_strength[]) - choose zero or more stengths Weaknesses (pony_weakness[]) - choose zero or more weaknesses Instead of generating these individually, write a JavaScript function that takes as least three parameters: name - should be used as the name for all the checkboxes. The name of a group of checkboxes uses array brackets (i.e., name = "strengths[]") to indicate that the selected values will be stored in an array values - is an array of strings representing the checkbox values, which can also be used as the displayed labels and the id's. For example, if the value is "Evilness" then set id="Evilness" for the input tag. and create a label with for="Evilness" and use "Evilness" as the innerHTML of the label. You can assume that all the values are unique. require - if this value is true then setAttribute("class", "required") to the span tag that encapsulates all the checkboxes and labels. We will use this to determine if the element is required. Note that pony_weakness[] is required but pony_strength[] is not.
5	Buttons	5	The form should have a submit button and a reset button. Instead of generating these individually, write a JavaScript function that takes as least three parameters and generates the elements: id - should be used for both the name and id of the element type - can be either "submit" or "reset" value - is printed on the button, i.e., "Insert" or "Clear"
6	Validating Inputs	15	Add an event listener so that when the form is submitted a function called checkForm(event) is called. Inside this function, select all the input elements where class="required". For each element, if the value is blank ("") or the words Hate or hate then prevent the default event and highlight the required elements in red as show in the sample solution.
7	Validating Groups	15	Select the span elements where class="required". For each input element inside the span element check to see if the element is checked. If no element is checked then prevent the default event and highlight the required elements in red as show in the sample solution.
8	Friendship	5	Write a JavaScript selector to select/check Friendship by default. Then write an event listener so that if the user unchecks Friendship, then Evilness will be selected/checked and change First Name to "Nightmare", Last Name to "Moon", Nickname to "Crazy Princess Luna", and Cutie Mark to "Crescent Moon"
9	Color	5	Write an event listener so that if pony_color is changed, then the backgroundColor of the body is changed to the selected color.
10	Pegasus	2	Write an event listener so that if Pegasus is selected than Flight is also selected.
11	Alicorn	2	Write an event listener so that if Alicorn is selected than Flight and Arrogance are both selected.
12	Bronyville	6	Write an event listener to do something funny if someone tries to select Bronyville. See the solution for inspiration.