Question
For your third assignment you will continue with your missionary application. You are going to continue building your webpage by adding some complex components such
For your third assignment you will continue with your missionary application. You are going to continue building your webpage by adding some complex components such as functions, radio buttons, decisions, and calculations.
This week you are going to take the user input from your application in assignment 2 and create a calculation to determine how much it is going to cost the user for the total trip. To do so, you will present the user with the ability to enter the number of missionaries going on the trip, the number of days of the trip, and the user is presented with three different locations for the missionary location. After the user selects the calculate button, the calculation for the total cost is competed and displayed to the user.
The following steps must be included for your app.
- Your complete assignment folder must be zipped for submission
- You must include the jquery-1.8.3.min.js and jquery.mobil-1.3.1.min.js
- Must have width set to device width
- All pages must have a header and footer which represents a church activity application
- You must set the active link to persist or active according to which one is selected
- Your assignment will include three pages: Detail, Missionary, Trip Projection
- The detail and Missionary page are the same from week 2.
- The following must be included in your Trip Projection Page
- The number of people input must be utilized by an input from 1 to 20
- The days of trip must be utilized by an input from 1 to 10
- Three locations are presented to the user through radio buttons
- The locations are of your choice
- Each location has a different value cost for the calculation determined by you.
- The location cost is determined in a function
- You must do error checking through functions for the people and days input. Provide the user a message if there is an issue with the input.
- Calculate the total cost of the trip:
- Use the following calculation: locationcost * numberofpeople * days
- Use a function to do the calculation
- If the cost of the trip is over $5000 present the user with a message a deposit must be made within two weeks of the current date.
- Display the total cost of the trip to the user in a table with the amounts entered.
Please see an example of what a webpage using the details above would look like before calculation. This is an example and not an exact replica of what you have to produce. Please feel free to utilize css to design this assignment as you would like it to be. Please make sure to fulfill all requirements in doing so. If you have any questions please see your instructor.
Mission Trip Projection
- Missionary
- Missionary Trip Projection
- My Details
Number of People Days of Trip
Location of Trip Egypt Peru Jordan
Calculate
Missionary Trip Projection
JS
function initialize(){ var NumberOfPeople = document.getElementById("NumberOfPeople").value; NumberOfPeople.addEventListener("blur", validateNumPeople); var DayTrip = document.getElementById("DayTrip").value; DayTrip.addEventListener("blur", validateDayTrip); var locationTrip = document.getElementById("locationTrip").value; locationTrip.addEventListener("blur", validateLocationTrip); } function validateNumPeople() { var NumPeopleInput = document.getElementById( "NumberOfPeople"); if (NumPeopleInput.value < 1 || NumPeopleInput.value > 20) { alert( 'Number of People must be between 1 and 20'); NumPeopleInput.value = ""; } } function validateDayTrip() { var DayTripInput = document.getElementById( "DayTrip"); if (DayTripInput.value < 1 || DayTripInput.value > 10) { alert( 'Number of Days must be between 1 and 20'); NumPeopleInput.value = ""; } } function update(){ var NumberOfPeople = document.getElementById("NumberOfPeople").value; var DayTrip = document.getElementById("DayTrip").value; var locationTrip = document.getElementById("locationTrip").value; locationTrip =[2000, 3000, 1500]; calculate(NumberOfPeople, DayTrip, locationTrip); } function calculate(NumberOfPeople, DayTrip, locationTrip){ var cost = NumberOfPeople * DayTrip * locationTrip; }
the program should be done in JS
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started