HTML program with css and javascipt

asinghal · September 10, 2018, 11:54am

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

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)

```
  Body color should be “#FFAACC”.
```

  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.

  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.

Cody_Biggs · September 10, 2018, 11:58am

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.

asinghal · September 10, 2018, 1:59pm

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>

Cody_Biggs · September 10, 2018, 2:44pm

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

asinghal · September 11, 2018, 5:10am

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

asinghal · September 11, 2018, 5:32am

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

asinghal · September 11, 2018, 6:16am

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

asinghal · September 11, 2018, 6:33am

after submitting

after clicking ok on alert

asinghal · September 11, 2018, 7:01am

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

aashik · October 6, 2020, 10:00pm

hi…were you able to solve this issue?