Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Hello, I was given this code to solve and I am having difficulty solving the code listed below: Expectations The JavaScript that you use in

Hello, I was given this code to solve and I am having difficulty solving the code listed below:

Expectations The JavaScript that you use in the course assessments should: Render and function properly in at least two of the following browsers: Chrome, Firefox, Edge, or Safari. Be verified to be error-free, well-documented with comments, and appropriately constructed. Overview In this assessment, use the Web page called invitation.html found in the Required Resources 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: 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 recipients 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 forms input fields (once submitted) to store the values to JavaScript variables. Then manipulate the DOM to replace the element content dynamically.

Tip: Variable names cannot include any special characters or spaces. They cannot start with a number. 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.

HERE IS THE CODE I HAVE: /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ package u3a1_debugfixifstmts; import java.util.Scanner; /** * * @author omora */ public class U3A1_DebugFixIFStmts { /** * @param args the command line arguments */ public static void main(String[] args) { // TODO code application logic here System.out.println("Teacher's Copy"); Scanner input = new Scanner(System.in); // prompt the user to enter 3 ints // and read them into // firstChoice //secondChoice //thirdChoice System.out.print("Enter three integers: "); int firstChoice = input.nextInt(); int secondChoice = input.nextInt(); int thirdChoice = input.nextInt(); //Determine & print the state of choices made if (firstChoice == 0) System.out.println("State of choices: " + "no choices made yet"); if (secondChoice == 0) System.out.println("State of choices: " + "user made first choice (" + firstChoice + ") " + "number of choices = 1"); else if (thirdChoice = 0) System.out.println("State of choices: " + "user made first choice (" + firstChoice + ") " + "user made second choice (" + secondChoice + ") " + "number of choices = 2"); System.out.println("State of choices: " + "user made first choice (" + firstChoice + ") " + "user made second choice (" + secondChoice + ") " + "user made third choice (" + thirdChoice + ") " + "number of choices = 3") } }

THIS IS THE MAIN CSS FILE: body { font: 15px arial, sans-serif; color: #808080; } input[type=text], select ,input[type=password],radio{ width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #800D1E; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #802F1E; } section { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } article { border-radius: 5px; background-color: #CCCCCC; padding: 20px; color: #222222; } ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li { float: left; } ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) { background-color: #111; } ul.topnav li a.active { background-color: #CCCCCC; color: #333 } ul.topnav li.right { float: right; } @media screen and (max-width: 600px) { ul.topnav li.right, ul.topnav li { float: none; } } .top { position: relative; background-color: #ffffff; height: 68px; padding-top: 20px; line-height: 50px; overflow: hidden; z-index: 2; } .logo { font-family: arial; text-decoration: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 37px; letter-spacing: 3px; color: #555555; display: block; position: absolute; top: 17px; } .logo .dotcom { color: #800D1E } .topnav { position: relative; z-index: 2; font-size: 17px; background-color: #5f5f5f; color: #f1f1f1; width: 100%; padding: 0; letter-spacing: 1px; } .top .logo { position: relative; top: 0; width: 100%; text-align: left; margin: auto } footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; }

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image_2

Step: 3

blur-text-image_3

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Data Analysis Using SQL And Excel

Authors: Gordon S Linoff

2nd Edition

111902143X, 9781119021438

More Books

Students also viewed these Databases questions

Question

What is meant by interest-on-interest?

Answered: 1 week ago