Category: uncategorised

Directions- This assessment requires you to complete the JavaScript code for processing the form. You will find the JavaScript in the js folder in the IT-FPX3240 Assessment 6 zip file. The JavaScript (in the invitation.js file) is half finished, with the code for handing the name entered in the form for the recipient. Using the existing code as a model, you should add the lines of JavaScript needed to read the form input field with the host’s name, store it in a variable, and then update the code so that the JavaScript inserts the host’s name in the span with the id host-placeholder.

Steps:

1. Looking at the code in invitation.js, note how the existing JavaScript code declares a variable:

• let myRecipientName;

1. Add a line to declare a variable for the host name.
2. Look at the line that reads the value entered for the recipient’s name:

• myRecipientName = document.getElementById(“recipient-input”).value

1. Add a line to read the entry in the form field with the id host-input and store it in the variable for the host name.
2. To help confirm that the code works as it should, note this line that writes to the developer tools console:

• console.log(‘Variable myRecipientName: ‘ + myRecipientName)

1. Add a line that calls the console.log() function to log the value in the variable for the host name.
2. Observe how the existing code inserts the value in the variable for the recipient’s name into the corresponding span in the output text:

• document.getElementByld(“recipient-placeholder”).innerHTML = myRecipientName

1. Add a similar line to replace the host-placeholder text with the host’s name.
2. Confirm that the form and the JavaScript work as required by opening the HTML form page (invitation.html) in a web browser. Fill in the form and click the submit button. You should see the output area appear below the form. The text in the output should reflect the values entered in the form’s fields.
3. Add comments to the JavaScript code to document the lines you have added.

Capture a screenshot showing the invitation page with the values entered in the form and the corresponding output below the form. Put the screenshot in a Word document. There is no external validation service for the JavaScript. You don’t need to validate the HTML and CSS provided.

Note: Errors from the validation should be fixed. However, warnings do not need to be fixed but should be reviewed. Fix the issues from the top down, as one error can cascade into 20 other errors. Remember, for the assessments in this course, be sure to test your web pages in at least two browsers.

Assessment examples: You may use the assessment examples in the file to give you an idea of what a Proficient or higher rating on the scoring guide would look like.

The JavaScript that you use in the assessments should:

• Rely on plain JavaScript (no frameworks) that has been covered in the course or resources provided in the instructions.
• All JavaScript must be in separate .js files (not embedded in the HTML).
• Render and function properly in at least two of the following browsers: Chrome, Firefox, Edge, and Safari.
• Be verified to be error-free, well-documented with comments, and appropriately constructed.

Put the Word document with the screenshot in the folder with the files for the assessment. Zip up the folder and submit the zip file with the completed JavaScript for the assessment. Please be careful not to submit the original zip file with the starting version of the code.

1. Directions – Create a user-friendly and professionally designed input form on the Contact Me page. The form should be contextually relevant for the site’s purpose and intuitive for the user. At a minimum, the form must include the following functioning tags:

• Fieldset.
• Legend.
• Label.
• Textfield.
• Textarea.
• Radio buttons.
• Checkboxes.
• Select list.
• Submit button.

1. Style the form using CSS in the external CSS file used by the pages for the site so that the form has the same look and feel as the rest of the pages.
2. Download and unzip the JavaScript file provided in the file. Place the script.js file in the same directory as the HTML files for your site.
3. Add this script to the HTML file with web form by adding the following line of HTML code just above the closing </body> tag:

• <script src=”script.js”></script>

1. Edit the <form> tag for the form so that it reads:

• <form id=”webForm” action=”#”>

1. Add this line below the HTML for the submit button or after the closing </form> tag to read and display the user’s input when the submit button is clicked:

• <p><div id=”output”></div></p>
• This div must have the id “output” (all lowercase letters).
• The id must be set to “webForm” (lowercase w, uppercase F).
• The acWon must be set to”#” (no GET or POST method).

1. Confirm that the revised contact page with the form is valid HTML5 by using W3C HTML validator to check it: .

• Warnings are okay, but any errors need to be corrected.
• Put a screenshot of the successful HTML validation in a Word document.

1. Confirm that the revised CSS file is also still valid CSS3 by using the W3C CSS validator: .

• Put a screenshot of the successful CSS validation in the same Word document.

1. Test the form page in two browsers to confirm that the form displays and works correctly. Indicate which two browsers you used in the Word document with the validation screenshots.

Make sure to do the following:

• Create a web form that functions per specifications.
• Submit error-free HTML and CSS code.
• Create a user-friendly layout for a web form.
• Fix any rendering or syntax errors encountered in the HTML or CSS code.
• Use descriptive variable names appropriately and consistently.

Once completed, view your pages in your selected web browsers to see if the content renders appropriately and consistently within each. Next, ensure that your HTML code is HTML5 compliant and your CSS code is valid. You may choose to make use of AI to validate your code and help you troubleshoot and test your code if you do run into errors and issues. You may use the Markup Validation Service for testing the former and CSS Validation Service for testing the latter, both from W3C. Both of these services are free and you can find their links on the reading list. Important: Take a screen capture of each of your validation results and save it for submission.

Assessment examples: You may use the assessment examples in the file to give you an idea of what a Proficient or higher rating on the scoring guide would look like.

Note: Errors from the validation should be fixed. However, warnings do not need to be fixed but should be reviewed. Fix the issues from the top down, as one error can cascade into 20 other errors. Remember, for the assessments in this course, be sure to test your web pages in at least two browsers.

Zip up the folder containing your complete site (including the script.js file) and submit it (along with the Word document) as this assessment.