Question

In the previous assessment, you used a static set of named variables to store the data that was entered in a form to be output in a message. For this assessment, you will use the invitation.html file that you modified in the previous assessment to create a more effective process for entering information and creating invitations for volunteers. Rather than having to enter each volunteer and create an invitation one at a time, you will create a script that will prompt the user to enter in the number of volunteers, event date, organization name, and host name. Using the number of volunteers entered (5–10), the script should loop through to ask the user to enter the recipient name and store it in an array. Once the user has entered all of the names and pressed submit, the page should display each of the invitations one after another at the bottom of the page.

Directions

Use the invitation.html file that you submitted in your previous assessment to add functionality to your form. This new functionality should allow the user to enter in the number of volunteers, whereupon the form will display the corresponding number of input fields for the user to enter information for each volunteer. Once the form is submitted, the data should be stored in an array to be looped through to create separate invitations for each volunteer on a new page.

Make sure to do the following:

• Add an input field that allows the user to input the number of volunteers as a numeric value.
• Once the number of volunteers has been entered (by pressing the enter key while the cursor is in the input field), use JavaScript to display the volunteer input fields based upon the number of volunteers entered.
• Write JavaScript that stores the form into an array of records once the form is submitted.
• Write JavaScript to Loop through the array of records and then display the invitation message for each volunteer. (Unlike a simple array that contains a single variable for each index, an array of records allows us to store related data fields for each index in the array. If we were going to store this in simple arrays, we would need a separate array for each data field.)
• 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.

My Previous assessment

HTML

Invitation Page

CapellaVolunteers.org

• 
  
• Home
• 
  
• Invitation
• 
  
• Gallery
• 
  
• Registration
• 
  
• 
  

Recipient name:

Organization name:

Event Date:

URL:

Host name:

Hello recipientName!



You have been invited to volunteer for an event held by organizationName on eventDate. Please come to the following website: websiteURL to sign up as a volunteer.



Thanks!




hostName

This events site is for IT-FP3215 tasks.

JAVASCRIPT

// The function to be executed when the form is submitted
function submitFunction() {
let rcpName = document.getElementsByName("recipientName")[0].value; //recipientName input is captured to a variabnle. [0] used because, it is the first value in the list
let orgName = document.getElementsByName("organizationName")[0].value; //organizationName input is captured in a variable
let evtDate = document.getElementsByName("eventDate")[0].value; //eventDate input is captured in a varibale
let webURL = document.getElementsByName("websiteURL")[0].value; //websiteURL input is captured in a variable
let hstName = document.getElementsByName("hostName")[0].value; //hostName input is captured in a variable.
  
document.getElementById("recipientName").innerHTML = rcpName; //In the response, the recipientName is replaced by the value of the variable
document.getElementById("organizationName").innerHTML = orgName; //In the response, the organizationName is replaced by the value of the variable
document.getElementById("eventDate").innerHTML = evtDate; //In the response, the eventDate is replaced by the value of the variable
document.getElementById("websiteURL").innerHTML = webURL; //In the response, the websiteURL is replaced by the value of the variable
document.getElementById("hostName").innerHTML = hstName; //In the response, the hostName is replaced by the value of the variable

}

This is the previous question (posting as per expert's comment). And the code attached was my answer to the previous question.

In this assessment, 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 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 by __organizationName_____ on ___eventDate_____. Please come to the following website: <insert your website URL> to sign up as a volunteer.

Thanks!

__hostName__

Hints:

• The placeholders (for example the “recipientName”) will need to be set up as <span> elements with an assigned id attribute. Prompt the user to enter in the recipient’s name, organization name, event date, and host 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 <span> element content dynamically.

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.

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” subdirectory (you will need to create it). 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.

This is assessment 2 for 'IT-FP3215 Introduction to JavaScript' course from Capella University

Answer 1

The below solution does contains comments for the sake of understanding. Simply you can run the below code to obtain the required results.

It does validate all the conditions which were stated in the question

Due to time constraint, I did not write the CSS code and apart from CSS it contains all the functionality

<!DOCTYPE>
<html lang="en-US">
<head>
    <title>Invitation Page</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/main.css" /> -->
    <script>
        let invitation = {};
        let recipientNames = []; 
        function disableForm(n){
            document.getElementById("form").style.display = "none";
            var html = "";
            for(var i=0; i < n; i++) {
                html += "<lable>Recipient Name "+ (i + 1) +" <br> <\label><input type = 'text' class = 'name' > <br>";
            }
            html += "<input type = 'submit' id = 'recipientNamesSubmit' >"
            var special = document.getElementById("RecipientNamesForm");
            special.innerHTML = html;
        }


        function fillInvitations(){
            console.log("Start here");
            n = parseInt(invitation["NumberOfRecipient"]);
            for (var i =0; i < n; i++) {
                var name = document.getElementsByClassName("name")[i].value;
                if(name == "") { 
                    alert("All fields are required!.");
                    return false;
                }
                recipientNames.push(name);
            }
            console.log(recipientNames)
            var html = "";
            for(var i = 0; i< n; i++) {
                html += "Hello Recipient "+recipientNames[i]+"<br><br> You have been invited to volunteer for an event held by organization "+ invitation["OrganizationName"] + " on " + invitation["EventDate"] + " Please come on the following website: " + invitation["WebsiteURL"] + " to sign up as a volunteer. <br><br> Thanks! <br>" + invitation["HostName"] + "<br><br>";
            }
            document.getElementById("placeholderContent").style.display = "none";
            var special = document.getElementById("Content");
            special.innerHTML = html;
            return false;
        }


        function create_invitation() //Function to replace placeholders in invitation
        {
                // Storing Number of Recipient in a dictionary
                invitation["NumberOfRecipient"] = document.getElementById("recipientName_form").value;

                // Storing Organization Name
                invitation["OrganizationName"] = document.getElementById("organizationName_form").value;

                // Storing Event Date
                invitation["EventDate"] = document.getElementById("eventDate_form").value;

                // Storing Website URL
                invitation["WebsiteURL"] = document.getElementById("websiteURL_form").value;

                // Storing Host Name 
                invitation["HostName"] = document.getElementById("hostName_form").value;

                // Performing Some Validation
                if(invitation["NumberOfRecipient"] == "" || 
                   invitation["OrganizationName"] == "" || 
                   invitation["EventDate"] == "" || 
                   invitation["WebsiteURL"] == "" ||
                   invitation["HostName"] == "") {
                    alert("All fields are required!.");
                return false
                }

                // Making sure the Number of Recipient input is a Number
                if(isNaN(invitation["NumberOfRecipient"])) {
                    alert("Enter a Numeric for the Number Of Recipient Field.");
                    return false;
                }
            disableForm(invitation["NumberOfRecipient"]);
            return false;
        }  
    </script>
</head>
<body>
  
    <header>
        <div class="top">
            <a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>
        </div>
        <nav>
            <ul class="topnav">
                <li><a href="index.html">Home</a></li>
                <li><a href="invitation.html" class="active">Invitation</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="registration.html">Registration</a>
                </li>
            </ul>
        </nav>
    </header>
    <section id="pageForm">
        <form id = "form" action="#" onsubmit="return create_invitation();">
          
            <label for="recipientName_form">Number Of Recipients: </label>
            <input type="number" name="recipientName_form" id="recipientName_form" placeholder="Enter your Recipient Name" /> <br>
            <label for="organizationName_form">Organization name: </label>
            <input type="text" name="organizationName_form" id="organizationName_form" placeholder="Enter your Organization Name" /> <br>
            <label for="eventDate_form">Event Date: </label>
            <input type="text" name="eventDate_form" id="eventDate_form" placeholder="Enter your Event Date" /> <br>
            <label for="websiteURL_form">URL: </label>
            <input type="text" name="websiteURL_form" id="websiteURL_form" placeholder="Enter your Website URL" /> <br>
            <label for="hostName_form">Host name: </label>
            <input type="text" name="hostName_form" id="hostName_form" placeholder="Host Name" /> <br>
            <input type="submit" value="Submit"> <br>
        </form>
        <form id = "RecipientNamesForm" onsubmit="return fillInvitations()">
            
        </form>
    </section>
    <article id="placeholderContent">
        Hello <span id="recipientName">recipientName</span>! <br/> <br/> 
        You have been invited to volunteer for an event held by <span id="organizationName">organizationName </span> on <span id="eventDate">eventDate</span>. Please come to the following website: <span id="websiteURL">websiteURL</span> to sign up as a volunteer.
        <br/>
        <br/> Thanks!
        <br/>
        <br/>
        <span id="hostName">hostName</span>
    </article>
    <article id = "Content"></article>
    <footer>This events site is for IT-FP3215 tasks.</footer>
</body>

</html>

Hope this helps you. Thanks