Assessment 6 Using Variables in a Form – 3240 – pt 6

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.