Learn how to create a movie theater booking app from scratch using HTML, CSS, and JavaScript. Step-by-step guide for beginners to design user interface and add functionality.
Table of Contents
Welcome to our comprehensive guide on creating a movie theater booking app using HTML, CSS, and JavaScript. In this tutorial, we'll walk you through the process of building a functional and interactive web application for booking movie tickets.
Whether you're a beginner in web development or looking to expand your skill set, this guide will provide you with step-by-step instructions to create your movie theater booking system from scratch. By the end of this tutorial, you'll have the knowledge and tools to develop a responsive and user-friendly movie theater booking app.
So, let's dive in and embark on this exciting journey of front-end development!
Source Code
Step 1 (HTML Code):
To begin, ensure you have a text editor and a web browser installed on your computer. Set up a new project directory and create necessary files like index.html, style.css, and script.js to organize your code effectively.
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our movie theater booking app.
Here's a breakdown of the HTML code:
1. Document Type Declaration (<!DOCTYPE html>):
- Specifies the document type and version of HTML being used.
2. HTML Structure:
- The document is contained within the <html> tags, and the language is set to English (lang="en").
3. Head Section (<head>):
- Contains metadata about the document, including character encoding, viewport settings, and the title of the webpage.
- Links an external CSS file (styles.css) for styling purposes.
4. Body Section (<body>):
- Executes a JavaScript function onLoaderFunc() when the body loads.
- Contains two main <div> sections:
- inputForm: Holds input fields for the user to enter their name and the number of seats they want to book. It also includes a button to start selecting seats.
- seatStructure: Displays the seating arrangement in a theater. It contains a table (<table>) with checkboxes representing individual seats. Each checkbox has a value corresponding to its seat position.
- The table also has a side column for seat rows (A, B, C, etc.) and a top row for seat numbers.
- After the table, there's a button to confirm seat selection.
- Below the seating arrangement, there's a section (displayerBoxes) for displaying the selected user information (name, number of seats, and selected seats) in text areas (<textarea>).
5. Scripts:
- Includes jQuery library (jquery.min.js) and a custom JavaScript file (script.js) for handling user interactions and seat selection functionality.
Step 2 (CSS Code):
Next, we need to style our movie theater booking app by adding CSS. This will give our app an upgraded presentation.
Let's break down the CSS code step by step:
1. body: This rule sets the font family for the entire document to "Helvetica Neue", Helvetica, Arial, or any sans-serif font if the specified fonts are not available.
2. #Username: This rule targets an element with the id "Username". It removes any border and adds a bottom border of 1 pixel solid color (which defaults to black).
3. .screen: This rule applies styles to elements with the class "screen". It sets the width to 100%, height to 20 pixels, background color to a shade of blue (#4388cc), text color to white, line height to 20 pixels, and font size to 15 pixels.
4. .smallBox::before, .greenBox::before, .redBox::before, .emptyBox::before: These rules define pseudo-elements (::before) for elements with classes "smallBox", "greenBox", "redBox", and "emptyBox". These pseudo-elements are placed before the actual content of the element.
- .smallBox::before creates a small dot with a specific width, height, and styling.
- .greenBox::before and .redBox::before set the background color of the pseudo-element to green and red respectively.
- .emptyBox::before sets a background color and box-shadow to create a visual effect.
5. .seats: This rule applies styles to elements with the class "seats". It sets a red border and a yellow background color.
6. .seatGap: This rule applies styles to elements with the class "seatGap". It sets the width to 40 pixels.
7. .seatVGap: This rule applies styles to elements with the class "seatVGap". It sets the height to 40 pixels.
8. table: This rule sets text alignment for all tables in the document to center.
9. .Displaytable: This rule applies styles to elements with the class "Displaytable". It sets text alignment for table cells and headers to center and adds a 1 pixel solid border around them.
10. textarea: This rule sets the border of textareas to none and makes the background transparent.
11. input[type=checkbox]: This rule targets checkboxes and sets their width to 0 pixels with some right margin.
12. input[type=checkbox]:before: This rule creates a pseudo-element for checkboxes, which appears before the actual checkbox. It sets the dimensions and styling for the checkbox, including background color and box-shadow.
13. input[type=checkbox]:checked:before: This rule applies when a checkbox is checked. It changes the background color of the pseudo-element to green and adjusts the font size.
Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body
{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#Username
{
border:none;
border-bottom:1px solid;
}
.screen
{
width:100%;
height:20px;
background:#4388cc;
color:#fff;
line-height:20px;
font-size:15px;
}
.smallBox::before
{
content:".";
width:15px;
height:15px;
float:left;
margin-right:10px;
}
.greenBox::before
{
content:"";
background:Green;
}
.redBox::before
{
content:"";
background:Red;
}
.emptyBox::before
{
content:"";
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
background-color:#ccc;
}
.seats
{
border:1px solid red;background:yellow;
}
.seatGap
{
width:40px;
}
.seatVGap
{
height:40px;
}
table
{
text-align:center;
}
.Displaytable
{
text-align:center;
}
.Displaytable td, .Displaytable th {
border: 1px solid;
text-align: left;
}
textarea
{
border:none;
background:transparent;
}
input[type=checkbox] {
width:0px;
margin-right:18px;
}
input[type=checkbox]:before {
content: "";
width: 15px;
height: 15px;
display: inline-block;
vertical-align:middle;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
background-color:#ccc;
}
input[type=checkbox]:checked:before {
background-color:Green;
font-size: 15px;
} Step 3 (JavaScript Code):
Next, enhance the user interface by adding interactivity using JavaScript.
Let's break down the JavaScript code step by step:
1. onLoaderFunc():
- This function is triggered when the page loads.
- It disables all elements within elements with the class seatStructure and displayerBoxes.
2. takeData():
- This function is called when data is taken, presumably after the user fills out a form.
- It checks if the fields with ids Username and Numseats have been filled out.
- If any of them are empty, it alerts the user to enter their name and the number of seats.
- If both fields are filled, it disables all elements within the form (with the class inputForm), enables elements within seatStructure, and updates a notification message to prompt the user to select their seats.
3. updateTextArea():
- This function is called to update the text area when the user selects seats.
- It checks if the number of seats selected matches the value entered in the Numseats field.
- If they match, it disables all elements within seatStructure, then it gathers the username, number of seats, and selected seat values into arrays.
- It then updates corresponding text areas with these values.
- If the number of selected seats doesn't match the entered value, it alerts the user to select the correct number of seats.
4. Checkbox click event:
- This event is triggered when any checkbox is clicked.
- If the number of checkboxes checked matches the value entered in Numseats, it disables all checkboxes except the ones checked.
- If the number of checked checkboxes doesn't match Numseats, it enables all checkboxes.
function onLoaderFunc()
{
$(".seatStructure *").prop("disabled", true);
$(".displayerBoxes *").prop("disabled", true);
}
function takeData()
{
if (( $("#Username").val().length == 0 ) || ( $("#Numseats").val().length == 0 ))
{
alert("Please Enter your Name and Number of Seats");
}
else
{
$(".inputForm *").prop("disabled", true);
$(".seatStructure *").prop("disabled", false);
document.getElementById("notification").innerHTML = "Please Select your Seats NOW!";
}
}
function updateTextArea() {
if ($("input:checked").length == ($("#Numseats").val()))
{
$(".seatStructure *").prop("disabled", true);
var allNameVals = [];
var allNumberVals = [];
var allSeatsVals = [];
//Storing in Array
allNameVals.push($("#Username").val());
allNumberVals.push($("#Numseats").val());
$('#seatsBlock :checked').each(function() {
allSeatsVals.push($(this).val());
});
//Displaying
$('#nameDisplay').val(allNameVals);
$('#NumberDisplay').val(allNumberVals);
$('#seatsDisplay').val(allSeatsVals);
}
else
{
alert("Please select " + ($("#Numseats").val()) + " seats")
}
}
$(":checkbox").click(function() {
if ($("input:checked").length == ($("#Numseats").val())) {
$(":checkbox").prop('disabled', true);
$(':checked').prop('disabled', false);
}
else
{
$(":checkbox").prop('disabled', false);
}
});Final Output:
Conclusion:
Congratulations on completing our guide to creating a movie theater booking app using HTML, CSS, and JavaScript! You've learned how to design a responsive user interface, add interactivity, implement booking functionality, and deploy your app to the web.
Building a movie theater booking app is not only a great way to practice your frontend development skills but also a practical project that can be expanded and customized further. Whether you're building this app for personal use or as a portfolio project, the knowledge and experience gained from this tutorial will undoubtedly be valuable.
Remember, the world of web development is vast and ever-evolving, so continue to explore new technologies, learn from your experiences, and never stop honing your skills. We hope you enjoyed this tutorial and wish you the best of luck on your journey as a web developer. Happy coding!
Design by: Shaik Maqsood
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
