​Two assignments to add a form and some javascript to existing html files.

User Generated

RP2982

Programming

Description

Two assignments to add a form and some javascript to existing html files.

See attached files below. The design of the site doesn't matter (i.e color, etc.) unless specified.

Unformatted Attachment Preview

IT 1430 – Web Page Development Assignment 5 Assignments must be completed on your own. Any evidence that students have collaborated on assignments will be considered a violation of the academic honesty code. You will be adding JavaScript to the web site that you created in Assignments 1 – 4 to interact with the user. 1. (1 point) tag: Update the tag in all HTML files to be “LastName: Assign5”. 2. (4 points) tag: Connect all HTML files to the zoo_scripts.js file that you will create. 3. (12 points) The upcomingEvents() function (Files: index.html & zoo_scripts.js): Update the Index page to use a function named upcomingEvents() that will write the upcoming events for your zoo. Refer to Labs 7, 8, & 9, & IC8. a. (2) In the HTML file, call the upcomingEvents() function – where the events should be placed. b. (10) In the JS file, create the upcomingEvents() function that will write the events to the page. 4. (20 points) The adopt() function (Files: adopt.html & zoo_scripts.js): Update the Adopt page to use a function named adopt() that will not allow the form to be submitted if the fields within the Honoree’s Information fieldset are not filled in. If the information has been filled in, allows the form to submit. Refer to Labs 7, 8, & 9. a. (5) Use an event listener to call the adopt() function when the form is submitted. b. (15) In the JS file, create the adopt() function which will determine IF the fields in the Honoree’s Information fieldset were empty and do not allow the form to submit, ELSE create an alert that will thank the user for filling in the information. 5. (17 points) The animal() function (Files: animal.html & zoo_scripts.js): Update the Animal page to use a function named animal() that will create an alert window that shows the animal’s name whenever the user has clicked on that animal’s picture on the page. Refer to Lab 8. a. (14) Use event listeners to call the animal() function sending an argument when clicked. b. (3) In the JS file, create the animal() function with a parameter that will create an alert to output “You clicked on the ____’s picture.” – fill in the blank with the animal’s name. c. If you create more than one function to complete this activity, there will be no points awarded. 6. (45 points) The classify() function (Files: class.html & zoo_scripts.js): Update the Class page to use a function named classify() that will use arrays to output the data into a table using a loop. Refer to HW 9, IC 9, & Labs 9 & 10. a. (16) In the JS file, create 4 arrays – one for each column heading in the table. The arrays will store the values from each row depending on which column it is in. (*do not use reserved keywords for variables*) b. (5) In the JS file (below the arrays), create the classify() function: • (5) In the classify() function, output the starting & ending table elements, & the first row (the table heading cells) to the website. • (15) After the first table row, create a for loop that will output each additional row of the table using the arrays created above. c. (4) In the HTML file, delete the table & call the classify() function. Submission Instructions (0 points – deducted from total grade): • • • Put your name, due date & assignment number in comments at the top of each file (HTML, CSS, & JS). (-50 – 10 * 5 files) All files (HTML & CSS) must validate to green (yellow for Adopt page due to Date element) status using the W3C Validators. https://validator.w3.org & http://jigsaw.w3.org/css-validator/ (-10) Submit all files in a folder (LastName_Assign5) that is zipped to the Assignment 5 tool on Folio. Figure 1: index.html – looks exactly the same, but the events are written by calling a function Figure 2a: animals.html – looks the same, but when each image is clicked an alert shows with the correct animal’s name listed. Figure 2b: animals.html – EVERY image is lists their correct (& full) animal’s name. Figure 3: class.html – The table looks the same, but is written using the arrays & the for loop. Figure 4a: adopt.html – the alert shows up when I click the submit button, telling me to fill out the information & does not submitting the form. Figure 4b: adopt.html – the alert shows up when I click the submit button, thanking me for filling out the information & then submitting the form. Figure 4c: formProcessor.html – appears AFTER the “Thank you” alert IT 1430 – Web Page Development Assignment 5 Assignments must be completed on your own. Any evidence that students have collaborated on assignments will be considered a violation of the academic honesty code. You will be adding JavaScript to the web site that you created in Assignments 1 – 4 to interact with the user. 1. (1 point) tag: Update the tag in all HTML files to be “LastName: Assign5”. 2. (4 points) tag: Connect all HTML files to the zoo_scripts.js file that you will create. 3. (12 points) The upcomingEvents() function (Files: index.html & zoo_scripts.js): Update the Index page to use a function named upcomingEvents() that will write the upcoming events for your zoo. Refer to Labs 7, 8, & 9, & IC8. a. (2) In the HTML file, call the upcomingEvents() function – where the events should be placed. b. (10) In the JS file, create the upcomingEvents() function that will write the events to the page. 4. (20 points) The adopt() function (Files: adopt.html & zoo_scripts.js): Update the Adopt page to use a function named adopt() that will not allow the form to be submitted if the fields within the Honoree’s Information fieldset are not filled in. If the information has been filled in, allows the form to submit. Refer to Labs 7, 8, & 9. a. (5) Use an event listener to call the adopt() function when the form is submitted. b. (15) In the JS file, create the adopt() function which will determine IF the fields in the Honoree’s Information fieldset were empty and do not allow the form to submit, ELSE create an alert that will thank the user for filling in the information. 5. (17 points) The animal() function (Files: animal.html & zoo_scripts.js): Update the Animal page to use a function named animal() that will create an alert window that shows the animal’s name whenever the user has clicked on that animal’s picture on the page. Refer to Lab 8. a. (14) Use event listeners to call the animal() function sending an argument when clicked. b. (3) In the JS file, create the animal() function with a parameter that will create an alert to output “You clicked on the ____’s picture.” – fill in the blank with the animal’s name. c. If you create more than one function to complete this activity, there will be no points awarded. 6. (45 points) The classify() function (Files: class.html & zoo_scripts.js): Update the Class page to use a function named classify() that will use arrays to output the data into a table using a loop. Refer to HW 9, IC 9, & Labs 9 & 10. a. (16) In the JS file, create 4 arrays – one for each column heading in the table. The arrays will store the values from each row depending on which column it is in. (*do not use reserved keywords for variables*) b. (5) In the JS file (below the arrays), create the classify() function: • (5) In the classify() function, output the starting & ending table elements, & the first row (the table heading cells) to the website. • (15) After the first table row, create a for loop that will output each additional row of the table using the arrays created above. c. (4) In the HTML file, delete the table & call the classify() function. Submission Instructions (0 points – deducted from total grade): • • • Put your name, due date & assignment number in comments at the top of each file (HTML, CSS, & JS). (-50 – 10 * 5 files) All files (HTML & CSS) must validate to green (yellow for Adopt page due to Date element) status using the W3C Validators. https://validator.w3.org & http://jigsaw.w3.org/css-validator/ (-10) Submit all files in a folder (LastName_Assign5) that is zipped to the Assignment 5 tool on Folio. Figure 1: index.html – looks exactly the same, but the events are written by calling a function Figure 2a: animals.html – looks the same, but when each image is clicked an alert shows with the correct animal’s name listed. Figure 2b: animals.html – EVERY image is lists their correct (& full) animal’s name. Figure 3: class.html – The table looks the same, but is written using the arrays & the for loop. Figure 4a: adopt.html – the alert shows up when I click the submit button, telling me to fill out the information & does not submitting the form. Figure 4b: adopt.html – the alert shows up when I click the submit button, thanking me for filling out the information & then submitting the form. Figure 4c: formProcessor.html – appears AFTER the “Thank you” alert
Purchase answer to see full attachment
User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

Explanation & Answer


Anonymous
Nice! Really impressed with the quality.

Studypool
4.7
Indeed
4.5
Sitejabber
4.4

Related Tags