ZuoTi.Pro
Question

Hello! I am to create a .js file that allows the paragraph on the bottom of...

Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below:

Use the given HTML 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.

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.

.HTML

<!DOCTYPE html>
<html lang="en-US">

<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="main.css">
<script type="text/javascript"
src="main.js">
</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 action="#">
<label for="recipientName">Recipient name:</label>
<input type="text" name="recipientName" placeholder="Enter your Recipient Name" />

<label for="organizationName">Organization name:
</label>
<input type="text" name="organizationName" placeholder="Enter your Organization Name" />

<label for="eventDate">Event Date:
</label>
<input type="text" name="eventDate" placeholder="Enter your Event Date" />

<label for="websiteURL">URL:
</label>
<input type="text" name="websiteURL" placeholder="Enter your Website URL" />

<label for="hostName">Host name:
</label>
<input type="text" name="hostName" placeholder="Host Name" />

<input type="submit" value="Submit">
</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>
<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>

</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

invite.html :

<!DOCTYPE html>

<html lang="en-US">

<head>

<meta charset="utf-8">

<title></title>

<link rel="stylesheet" href="main.css">

<script type="text/javascript"

src="main.js">

</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 action="#">

<label for="recipientName">Recipient name:</label>

<input type="text" name="recipientName" placeholder="Enter your Recipient Name" />

<label for="organizationName">Organization name:

</label>

<input type="text" name="organizationName" placeholder="Enter your Organization Name" />

<label for="eventDate">Event Date:

</label>

<input type="text" name="eventDate" placeholder="Enter your Event Date" />

<label for="websiteURL">URL:

</label>

<input type="text" name="websiteURL" placeholder="Enter your Website URL" />

<label for="hostName">Host name:

</label>

<input type="text" name="hostName" placeholder="Host Name" />

<input type="button" value="Submit" onclick="getDetails()">

</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>

<footer>This events site is for IT-FP3215 tasks.

</footer>

</body>

</html>

***************************

main.js :

//function to get details entered by user

function getDetails() {

//recipient Name entered by user

var recipientName = document.getElementsByName("recipientName")[0].value;

// organization Name entered by user

var organizationName = document.getElementsByName("organizationName")[0].value;

//EventDate selected by user

var eventDate = document.getElementsByName("eventDate")[0].value;

//web URL entered by user

var websiteURL = document.getElementsByName("websiteURL")[0].value;

//host name entered by user

var host = document.getElementsByName("hostName")[0].value;

//display recipient Name

document.getElementById("recipientName").innerHTML = recipientName;

document.getElementById("organizationName").innerHTML = organizationName;//display organization Name

document.getElementById("eventDate").innerHTML = eventDate;//display eventDate

document.getElementById("websiteURL").innerHTML = weburl;//display webURL

document.getElementById("hostName").innerHTML = host;//set host

}


=============================

Screen 1:invite.html

Screen 2:invite.html

0 0
Add a comment
Know the answer?
Add Answer to:
Hello! I am to create a .js file that allows the paragraph on the bottom of...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">      &n

    <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">         <!--div class-->       <div class="formvalidation">       <label>Your first Name</label>        <span id="showname"></span>        <!--label for firstname-->       <input type="text" name="firstname" class="formsignup"  id ="firstn" placeholder="Enter your Name">      <br><br>           <!--lastname-->       <label>Your last Name</label> <span id="showlname"></span>       <input type="text" name="lastname" class="formsignup" id="lastn" placeholder="Enter your last Name">       <br><br>        <!--email-->         <label>Your Email</label>          <span id="showemail"></span>         <input type="email" name="emailid" class="formsignup" size="45" id="emailn" placeholder="Enter your Email">        <br><br> <input type="submit" value="send">     </div>           </form> <script>      function checkvalidation(){     var name = document.forms["validationForm"]["firstname"].value;     var lname...

  • HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500"...

    HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500" border="10"> <!-----row---1----logo---> <tr><td> <img src="20150516_084745" width="700" height="200"> </td></tr> <!-----row-2-navigation-----> <tr><td> <!----start-navigation-table----> <table width="700" height="100" border="5" bgcolor="lightgreen" > <tr><td><a href="HerbFarm.html"> <center> HOME </center></a></td> <td><a href="about3.html"> <center> ABOUT </center></a></td> <td><a href="contact3.html"> <center> CONTACT </center></a></td> <td><a href="gallery3.html"> <center> GALLERY </center></a></td> </tr> </table> <!------end-navigation-table----> </td></tr> <tr><td> <h1>Contact </h1> <form action="thankyou.html">    </form> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-50"> <h3>Billing Address</h3> <label for="fname"><i...

  • New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /*...

    New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /* New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 13 Case Problem 3 Filename: mas_register.js Author: Date: Function List ============= formTest() Performs a validation test on the selection of the conference session package and the conference discount number calcCart() Calculates the cost of the registration and saves data in session storage    writeSessionValues() Writes data values from session storage in to the registration...

  • In an external JavaScript file, you need to create two global variables for the Quarter name...

    In an external JavaScript file, you need to create two global variables for the Quarter name array and the Sales amount array. Create an anonymous function and connect it to the onclick event of the Add to Array button that adds the values from the fields (Quarter and Sales) to the respective arrays. Create an anonymous function and connect it to the onclick event of Display Sales button displays the contents of the arrays, displays the sum of all the...

  • I cant seem to get the CSS at the bottom of this HTML to work. <!doctype...

    I cant seem to get the CSS at the bottom of this HTML to work. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience the difference...

  • Using form events functions to answer this question. Use the attached form html file which contains...

    Using form events functions to answer this question. Use the attached form html file which contains 2 html radio buttons. When the first choice is chosen, display the text ”First” under the first choice. When the second choice is chosen, display the text ”Second” under the second choice. Instead of using JavaScript complete this question using JQuery <!DOCTYPE html> <html> <head>     <title>midterm exam</title>     <link rel="stylesheet" href="css/q1.css" /> </head> <body>     <div id = "page">        <form>   ...

  • URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

    URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to download the uncompressed latest version of jQuery Copy the jQuery.x.x.x.js file in the folder and specified as source file. Task 2: Download and install HTML-Kit 1. Navigate to htmlkit.com. 2. Click Download HTML-Kit 292. After it downloads, launch HKSetup.exe. Choose Full installation (the default) Uncheck Yes, download and install HTML-Kit Tools Trial. 6. Click Next>Finish. Task 3: Creating a Simple jQuery Application Launch HTML-Kit....

  • Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum...

    Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum number of quarters, dimes, nickels, and pennies that make up the number of cents specified by the user. Without the use of a JavaScript Library (for coins). 1.      Open the HTML and JavaScript files below: 2.      In the JavaScript file, note that three functions are supplied. The $ function. The start of a calculateChange function. And an onload event handler that attaches the calculateChange...

  • How can I print the Database table in PHP please ? here I have form for name and email, also I have php code that allow...

    How can I print the Database table in PHP please ? here I have form for name and email, also I have php code that allow user to add his name and email to my database, all I need to print my final database when the user click on submit. <form action="" method="post"> <label>Name :</label> <input type="text" name="name" required="required" placeholder="Please Enter Name"/><br /><br /> <label>Email :</label> <input type="email" name="email" required="required" /><br/><br /> <input type="submit" value=" Submit " name="submit"/><br /> </form>...

  • I know there are a couple of answers to this question already but they don't match...

    I know there are a couple of answers to this question already but they don't match the sample code we where given. Overview Images, both static and dynamic, appear on most Web sites. There are many different features and functionalities that we can add through the use of JavaScript, including preloading, rollovers, and cycling banner ads. In this assignment, you will work with JavaScript, images, events, and manipulating the DOM to create an interactive image gallery. Hint: Preloading your images...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT