HTML program with css and javascipt

HTML program with css and javascipt
0

#1

DREAM Theme park wants to automate its booking process so that the customer can book tickets for the theme park on the web.

To do this, the customer has to provide all his details along with the location of the theme park, date of visit, number of persons visiting the theme park. Also booking type needs to be entered. It can be either Normal or School or Corporate.

Create a Web page “Book Your Tickets” that has the below fields.

The code for designing the web page is provided partially. The text highlighted in bold needs to be implemented in the code to complete the web page design.

Note : All validations should be based on HTML 5 (Do not use Javascript)

Label Name

Component Name

Description

Customer Name

customerName

To enter the name of the customer.

The name should accept only alphabets and space.

The text “Enter your name” should be displayed by default in the text box. When the user starts entering the value, this text should disappear.

Address

Address

To enter the address of the customer.

Provide the correct tag and attribute to create a text area with 5 rows and 20 columns.

Email ID

customerEmail

To enter the email of the customer.

This field should accept a valid email.

Mobile Number

customerMobileNumber

To enter the mobile number.

The mobile number should accept only digits. It should contain 10 digits and start with 9/8/7.

Park Location

location

Select the Park location.

Provide the correct input type to make this component a radio button.

Date of Visit

dateofvisit

To select the date of visit.

Booking Type

bookingType

An auto-complete feature should be available to the user for the following options.

Normal, School, Corporate

(Name of the auto-complete feature should be “bookType”)

Fill the tag to implement the autocomplete feature.

Adult

adults

To enter the number of adults.

Provide the input type so that this field accepts only digits.

Set minimum value as 0 and maximum value as 500.

Children

children

To enter the number of children.

Provide the input type so that this field accepts only digits.

Book Now

submit

Clear

reset

Reset Button. On clicking this button, all fields should be reset.

Provide the input type for this component.

Use JavaScript for doing the below calculation:

Customer on entering the valid values and clicking the submit button the total amount has to be calculated based on the below assumptions :

Ticket cost of each Adult : Rs. 1500
Ticket cost of each Children : Rs. 1200
If Booking Type is Normal, no discount is provided.
If Booking Type is School, 50% discount is provided on the total ticket cost
If Booking Type is Corporate, 25% discount is provided on the total ticket cost
Hence Total cost = Total Ticket Cost - discount
The result needs to be displayed as “Thank you customerName. Total cost to be paid is ………” in a div tag with id “result”.

Note: Use getElementsByName or getElementById function to retrieve the values

Sample Webpage:

On providing the values the web page should look as follows :

Fill in the style tag so that the following styles are applied to the components as mentioned below.

(Do not use Inline CSS)

  1.   Body color should be “#FFAACC”.
    
  2.   The heading should be done using <h1> tag the text color should be “#770080”, font should be “Courier New”, style should be “italic” and it should be aligned to center of the webpage.
    
  3.   The result should be bold and color of the text should be #770080
    

The required partial code is provided in your Edit window. Delete / Remove the comments and replace with the correct code.

Note : Please don’t delete any of the code provided except the comments given in bold.


#2

Your question? This sounds like homework so no one is going to do it for you. If you want help you need to explain what you’re having problems with, and the code you have tried out.


#3

Hi Cody_Biggs.This is a HTML program with CSS and javascript.Following is the code that I have tried.But the problem I am facing with this code is that javascript function is not being called.Please help me to solve the problem.The code is

<!DOCTYPE html>
<html>
<head>

<style type="text/css">

body{
    background-color:#FFAACC;
}

h1
{
    color:#770080;
font-family:"Courier New";
font-style :italic;
text-align:center;
}

form
{
margin :0 auto;
width:300px;
}

#result
{
color:#770080;
font-weight:bold;
}
</style>

<title>DREAM Theme Park</title>
</head>
<body >
<script>
function calculateCharges()
{
var customerName=document.getElementById("customerName").value;

var bookingType=document.getElementById("bookingType").value;
var adult=document.getElementById("adults").value;
var children=document.getElementById("children").value;


var ticketCost=0;
var discount=0;
var result = 0;
if(bookingType==Normal)
discount=0;
else if(bookingtype==School)

/*
Fill in the code for necessary calculation
*/

document.write( "Thank you "+customerName+". Total cost to be paid is "+result);
return false;
}

</script>


<h1>Book Your Tickets</h1>
<form onsubmit="return calculateCharges()" >
<table>

<tr>
<td>Customer Name</td>
<td><input type="text" name="customerName" id="customerName" required="required"  pattern="[a-zA-Z\s]" placeholder ="Enter your name" /> </td>
</tr>

<tr>
<td>Address</td>
<td><textarea name="address" id="address" required="required" rows="5" cols="20"  ></textarea></td>
</tr>

<tr>
<td>Email ID</td>
<td><input  type="email" name="customerEmail"  id="customerEmail" required="required"> </td>
</tr>

<tr>
<td>Mobile Number</td>
<td><input type="text" name="customerMobileNumber" id="customerMobileNumber"  pattern=[7-9]{3}[0-9]{7}   required="required"> </td>
</tr>

<tr>
<td>Park Location</td>
<td><input type="radio"  name="location" id="location" value="Delhi" >Delhi
<input type="radio"  name="location" id="location" value="Mumbai" required="required">Mumbai
</td>
</tr>

<tr>
<td>Date of Visit</td>
<td><input type="date" name="dateofvisit" id="dateofvisit" required="required"> </td>
</tr>

<tr>
<td>Booking Type</td>
<td><input name="bookingType" id="bookingType" list="bookType">
		<datalist   id="bookType">
  		<option value="Normal">
		<option value="School">
		<option value="Corporate">
		</datalist></td>
</tr>

<tr>
<td>Adult</td>
<td><input type="number" name="adults" id="adults"  max="500" min="0"  required="required"> </td>
</tr>

<tr>
<td>Children</td>
<td><input type="number"  name="children" id="children" required="required"> </td>
</tr>


<tr>
<td><input type="submit" value="Book Now" name="submit"> </td>
<td><input type="reset" value="Clear" > </td>
</tr>

<tr>
<td colspan="2">
<div id="result"></div>
</td>
</tr>

</table>
</form>



</body>
</html>

#4

I can’t see your JavaScript with the code you posted. Only your style is showing. To add your code to the post press </> right above where you type your response. You should see what’s below. Paste your code in where it says type or paste code here. All of it not just the style

type or paste code here

#5

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

I recommend creating a pen on Codepen and post a link to it instead of all this code. It will make it easier for those willing to help, to see the same code you do without you having to post to the forum after every change you make.


#6

When I fill out the form and meet all the HTML validation rules you set up and click the Book Now button, the calculateCharges function is executed. Can you provide a screenshot of the form filled out and after you have clicked the Book Now button?


#7
<!DOCTYPE html>
<html>
<head>

<style type="text/css">

body{
    background-color:#FFAACC;
}

h1
{
    color:#770080;
font-family:"Courier New";
font-style :italic;
text-align:center;
}

form
{
margin :0 auto;
width:300px;
}

#result
{
color:#770080;
font-weight:bold;
}
</style>

<title>DREAM Theme Park</title>
</head>
<body >
<script>
function calculateCharges()
{
var customerName=document.getElementById("customerName").value;

var bookingType=document.getElementById("bookingType").value;
var adult=document.getElementById("adults").value;
var children=document.getElementById("children").value;


var ticketCost=0;
var discount=0;
var result = 0;
if(bookingType==Normal)
discount=0;
else if(bookingtype==School)

/*
Fill in the code for necessary calculation
*/

document.write( "Thank you "+customerName+". Total cost to be paid is "+result);
return false;
}

</script>


<h1>Book Your Tickets</h1>
<form onsubmit="return calculateCharges()" >
<table>

<tr>
<td>Customer Name</td>
<td><input type="text" name="customerName" id="customerName" required="required"  pattern="[a-zA-Z\s]+" placeholder ="Enter your name" /> </td>
</tr>

<tr>
<td>Address</td>
<td><textarea name="address" id="address" required="required" rows="5" cols="20"  ></textarea></td>
</tr>

<tr>
<td>Email ID</td>
<td><input  type="email" name="customerEmail"  id="customerEmail" required="required"> </td>
</tr>

<tr>
<td>Mobile Number</td>
<td><input type="text" name="customerMobileNumber" id="customerMobileNumber"  pattern=[7-9]{3}[0-9]{7}   required="required"> </td>
</tr>

<tr>
<td>Park Location</td>
<td><input type="radio"  name="location" id="location" value="Delhi" >Delhi
<input type="radio"  name="location" id="location" value="Mumbai" required="required">Mumbai
</td>
</tr>

<tr>
<td>Date of Visit</td>
<td><input type="date" name="dateofvisit" id="dateofvisit" required="required"> </td>
</tr>

<tr>
<td>Booking Type</td>
<td><input name="bookingType" id="bookingType" list="bookType">
		<datalist   id="bookType">
  		<option value="Normal">
		<option value="School">
		<option value="Corporate">
		</datalist></td>
</tr>

<tr>
<td>Adult</td>
<td><input type="number" name="adults" id="adults"  max="500" min="0"  required="required"> </td>
</tr>

<tr>
<td>Children</td>
<td><input type="number"  name="children" id="children" required="required"> </td>
</tr>


<tr>
<td><input type="submit" value="Book Now" name="submit"> </td>
<td><input type="reset" value="Clear" > </td>
</tr>

<tr>
<td colspan="2">
<div id="result"></div>
</td>
</tr>

</table>
</form>



</body>
</html>

#8

You did not provide a screenshot. You posted some code. What is your latest question?


#9

Before submit


After submit

There is no change in the page after submission.It means that javascript function is not executed.Unable to understand the error


#10

What does the browser’s console (Ctrl+Shft+J in Chrome) show? Are there any error showing in the console?


#11

Put the following code as the very first lines of the html file containing the code you posted.

<script>
alert('JavaScript is working')
</script>

Also, are you running this script locally or on a server? I noticed in the 2nd screenshot there was a web address. Is this html in a normal .html file or a .php file? Your form did not have an action attribute in the code you provided, so I am a little confused why the 1st screenshot does not show an address in the address bar of the browser, but the 2nd screenshot does.


#12

Hi Sir, I am working on an online portal for my placement and running this script on that server.This is normal .html file. As I am submitting the form.There shows an error and that error says required Id parameter is missing.
I have put alert and that is woking properly.So I got the error is in the function code.
Thank you Sir


#13

If this error is showing in the browser’s console, can you take a screenshot, so I can see it? I am not getting such an error when I run your code locally or on a web server.


#14

after submitting


after clicking ok on alert


#15

That page you show above is not referenced in the html code you presented earlier. I don’t know how you are submitting the form to the url shown in the address bar (e-skilling.tekstac.com). You must be viewing this file through some special interface which attempts to process form results. I don’t know what else to tell you. Maybe someone else will have some additional advice.

All I can tell you for sure, is the function does work and does execute, when I test it out and it does attempt to submit the data. Since the form’s action attribute has not value specified, it just submits the form information to the same page again when I view your page locally or on my own server.


#16

ohkk Sir…Can you please help me how to display the answer in div tag.
Customer on entering the valid values and clicking the submit button the total amount has to be calculated based on the below assumptions :

Ticket cost of each Adult : Rs. 1500
Ticket cost of each Children : Rs. 1200
If Booking Type is Normal, no discount is provided.
If Booking Type is School, 50% discount is provided on the total ticket cost
If Booking Type is Corporate, 25% discount is provided on the total ticket cost
Hence Total cost = Total Ticket Cost - discount
The result needs to be displayed as “Thank you customerName. Total cost to be paid is ………” in a div tag with id “result”.
Note: Use getElementsByName or getElementById function to retrieve the values


#17

Why don’t you make a first attempt and the show us your code? That way we can see how you are approaching the task and guide you if you make some mistakes in your code. Think how you would manually calculate the total cost if all you had was pen and paper. Your code would need to take the same steps to calculate the total cost.