Book A Show – Online Ticket Booking

Question:

“BOOK A SHOW” is an online movie ticket system to book tickets for current and upcoming movie releases across the city in India. The user can select the movie and preferred circle while booking the ticket and the system will generate a ticket to the user.

As an HTML5 developer, you have been provided with the task of developing one module of this website. This module should contain the below pages:

1.       Ticket page – This will contain details that will be entered by the user to book movie tickets

Book Ticket Page:

S.NoLabel NameElement NameDescriptionLimitation/Constraints
1NamenameEnter the nameIs a mandatory field, should be validated. Should not allow any special characters other than space. Do not use java script, use HTML 5 features.
2Movie NamemovienameAn auto-complete feature should be available to the user for the following options.Irada, Rangoon, Logan, Fist Fight. (Name of the auto-complete feature should be “movies”)Do not use combo boxes, rather it should be done using <input> element
3CirclecircleAn auto-complete feature should be available to the user for the following options.Silver, Gold, Platinum. (Name of the auto-complete feature should be “circles”)Do not use combo boxes, rather it should be done using <input> element
4Phone nophoneThe text “Enter Mobile # here” should be displayed by default in the text box. When the user starts entering the number, this text should disappear.Should validate for numeric digits. Should contain 10 digits. Do not use java script use HTML 5 features
5Show date and timeshowdateDate picker to choose the date and time of the show.Should NOT use javascript to create date picker.
6No of AdultsticketsChoose the number of passenger.Minimum number that can be selected should be 1 and max number that can be selected should be 10. Do not use java script use HTML 5 features
7No of childrenschildrensChoose the number of children’s.Minimum number that can be selected should be 1 and max number that can be selected should be 5. Do not use java script use HTML 5 features.
8Book My ShowBook My ShowOn clicking this submit button, validations should be performed and the ticket price should be calculated and displayed. 
9ResetresetButton with Reset as label. On clicking this button, all fields should be reset 

All the fields are mandatory (Should be done using HTML5).

Apply the following styles :

S.NoElement NameCSS
1tablefont-family:monospace;
font-weight: bold;
2h1color:#0000FF;font-family:monospace;text-align:center;
  • The body background color should be #00CED1.
  • The div tag is used to show the result with the id “result” and text be in bold and the color should be #0000FF 
  • The text color should be #0C1584.

Note: Do not use Inline CSS

Note:  Correctly specify the element name, as given in the requirement. All your html tags should be given in lower case.

Sample Webpage:

Quiz for Exam -  Book A Show - Online Ticket Booking
Quiz for Exam – Book A Show – Online Ticket Booking

Code:

ticket.html

<html>
<head></head>
<body>

	<style>
body	{ background-color: #00CED1;
          color: #0C1584;
}  
table,tr,td{ font-family: monospace;
       font-weight: bold;
}
#result{ font-weight: bold;
         color: #0000FF;}
       
h1{ color: #0000FF;
    font-family: monospace;
    text-align: center;}
  
  
    </style>
<form  onsubmit="return validate()" name="book">
<center>
<h1>BOOK A SHOW - TICKET BOOKING</h1>
	<table>
		<tr>
		<td>Name</td>
		<td><input type="text" name="name" placeholder="Enter the name" required>
		     
		</tr>

		<tr>
			<td>Movie Name</td>
			<td><input type="text" list="movies" name="moviename" autocomplete="on" placeholder="Movie Name" required>
			<datalist id="movies">
  			<option value="Irada">
		  	<option value="Rangoon">
  			<option value="Logan">
  			<option value="Fist Fight">
			</datalist>
			</td>
		</tr>
		<tr>
			<td>Circle</td>
			<td><input type="text" list="circles" name="circle" autocomplete="on" required>
			<datalist id="circles" name="circles">
  			<option value="Silver">
		  	<option value="Gold">
  			<option value="Platinum">
			</datalist>
			</td>
		</tr>
		<tr>
		<td>Phone no</td>
		<td> <input type="tel" name="phone" placeholder="Enter Mobile # here" required>
		</tr>
		<tr>
		<td>Show date and time</td>
		<td><input type="date" name="showdate"></td>
		</tr>

		<tr>
		<td>No of Adults </td>
		<td><input type="number" name="tickets" id="tickets" min="1" max="10"></td>
		</tr>

		<tr>
		<td>No of childrens </td>
		<td><input type="number" name="childrens"  id="childrens" min="1" max="5"></td>
		</tr>

        <tr>
		<td><button type="submit" name="Book My Show">Book My Show</button></td>
		<td><button type="reset" name="reset">Reset</button></td>
		</tr>

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

	</table>
	
	<script>
	function validate()
	{
		var x=document.getElementById("tickets").value;
		var y=document.getElementById("childrens").value;
		var date=document.book.showdate.value;
		var currdate=new Date();
		var curr=Date.parse(currdate.toString());
		var bookdate=Date.parse(date);
		var adult=x*200;
		var childern=y*100;
		var total=adult+childern;

		if(bookdate<curr)
		{
		alert("Show date and time should be either current date or future date");
	    return false;
		}
		if(y>=x)
		{
 		 alert("No of tickets should be greater than the no of children");
	return false;

		}
		if(y<x)
		{
		document.getElementById("result").innerHTML="Your approximate ticket amount is "+total+" INR";
	    return false;

		}
		}
	</script>
	</center>
</form>
</body>
</html>

Recommended:

Leave a Comment

Your email address will not be published. Required fields are marked *

x