IT 3215 Unit 1 Assignment Using Variables in a Form
IT 3215 Unit 1 Assignment Using Variables in a Form
Expectations
The JavaScript that you use in the course assignments should:
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.
Overview
In this assignment, use the Web page called “invitation.html” found in the Required Resources (in the zip file called IT-FP3215.zip) to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message placeholder and a form below it. You will add JavaScript functionality to the form that will allow a user to dynamically fill out the invitation.
Hello __recipientName_____!
You have been invited to volunteer for an event held on July 1st. Please respond to this email to sign up as a volunteer.
Thanks!
___hostName___
Hints:
The placeholders (for example the “recipientName”) will need to be set up as elements with an assigned id attribute. Prompt the user to enter in the recipient’s name, and host name (Your name). Using JavaScript, replace those elements dynamically with what the user has entered in the form.
Use the form’s input fields (once submitted) to store the values to JavaScript variables. Then manipulate the DOM to replace the element content dynamically.
To get you started, in your .js file, you need to first declare the variable names such as:
varmyRecipientName;
Then, you would need to set the variable to the input field’s value:
myRecipientName = document.getElementById(“recipientNameInput”).value;
Next, you would then need to set the innerHTML of the span element of the corresponding name like:
document.getElementById(“recipientNamePlaceholder”).innerHTML = myRecipientName;
Note on your submit button, a JavaScript event handler has been defined on the submit of the form. Notice that it has a return false to prevent the form from actually submitting.
Hint: See what happens when you remove the “return false” from the JavaScript code.
Tip: Variable names cannot include any special characters or spaces. They cannot start with a number. They also cannot be any of JavaScript’s reserved words. Remember as well that JavaScript is case sensitive.
Preparation
Download and unzip the IT-FP3215.zip file found in the Required Resources. It contains the initial framework for the site. All of the HTML files are located in the root directory. Images are placed in the images subdirectory; CSS files are placed under the css subdirectory. Your JavaScript external files should be placed under the “js” subdirector. When you submit your work, be sure to zip up the entire folder, including all of the ancillary files such as the images, CSS, and JavaScript code.
Note: This course requires you to use a text editor to complete your work. There are many free open source options on the Internet from which you may choose. See the Suggested Resources for links to free, open source text editors.
Directions
Read the Overview. Use the invitation.html file in the Resources as a template for completing this assessment.
Write JavaScript that enables the invitation to be dynamically completed using the form. Make sure to do each of the following:
Declare variables to store the input field data.
Store the input field data into the variables on form submit.
Manipulate the DOM to replace placeholder data with the variables.
Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code.
Once completed, view your pages in each of your two selected Web browsers to see if the content renders appropriately and consistently within each. Next, verify that your code is error-free using the appropriate browser-specific development tool found in the Resources. Take a screen capture of each of your validation results and save it for submission.
Example assignments: You may use the assignment examples, linked in the Resources, to give you an idea of what a Proficient or higher rating on the scoring guide would look like.
Submission Requirements
Upload all your website files to a hosting service of your choice. Two free sites to consider are Freehosting.com or 000webhost.com. See the Suggested Resources for links.
Submit your work in the courseroom using a single Zip file containing the following:
Your entire Web site (including the updated “invitation.html” file).
A Word document with:
The url to your Web site so faculty can view your site on a live host.
A screen capture of each of your two validations that you completed using the developer tools found in the Resources.
APA Writing Checklist
Use this document as a checklist for each paper you will write throughout your GCU graduate program. Follow specific instructions indicated in the assignment and use this checklist to help ensure correct grammar and APA formatting. Refer to the APA resources available in the GCU Library and Student Success Center.
Also Check Out: IT 3215 Unit 2 Assignment Using Arrays and Loops
☐ APA paper template (located in the Student Success Center/Writing Center) is utilized for the correct format of the paper. APA style is applied, and format is correct throughout.
☐ The title page is present. APA format is applied correctly. There are no errors.
☐ The introduction is present. APA format is applied correctly. There are no errors.
☐ Topic is well defined.
☐ Strong thesis statement is included in the introduction of the paper.
☐ The thesis statement is consistently threaded throughout the paper and included in the conclusion.
☐ Paragraph development: Each paragraph has an introductory statement, two or three sentences as the body of the paragraph, and a transition sentence to facilitate the flow of information. The sections of the main body are organized to reflect the main points of the author. APA format is applied correctly. There are no errors.
☐ All sources are cited. APA style and format are correctly applied and are free from error.
☐ Sources are completely and correctly documented on a References page, as appropriate to assignment and APA style, and format is free of error.
Scholarly Resources: Scholarly resources are written with a focus on a specific subject discipline and usually written by an expert in the same subject field. Scholarly resources are written for an academic audience.
Examples of Scholarly Resources include: Academic journals, books written by experts in a field, and formally published encyclopedias and dictionaries.
Peer-Reviewed Journals: Peer-reviewed journals are evaluated prior to publication by experts in the journal’s subject discipline. This process ensures that the articles published within the journal are academically rigorous and meet the required expectations of an article in that subject discipline.
Empirical Journal Article: This type of scholarly resource is a subset of scholarly articles that reports the original finding of an observational or experimental research study. Common aspects found within an empirical article include: literature review, methodology, results, and discussion.
Adapted from “Evaluating Resources: Defining Scholarly Resources,” located in Research Guides in the GCU Library.
☐ The writer is clearly in command of standard, written, academic English. Utilize writing resources such as Grammarly, LopesWrite report, and ThinkingStorm to check your writing.