{"id":10379,"date":"2024-03-03T10:31:00","date_gmt":"2024-03-03T10:31:00","guid":{"rendered":"https:\/\/codehim.com\/?p=10379"},"modified":"2024-03-04T08:31:18","modified_gmt":"2024-03-04T03:31:18","slug":"movie-ticket-booking-using-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/","title":{"rendered":"Movie Ticket Booking Using JavaScript"},"content":{"rendered":"

This code creates a movie ticket booking interface using JavaScript. Users can select seats by clicking checkboxes. The code ensures users input their name and the number of seats they want before selecting. Once seats are chosen, it displays the selected seats, the user’s name, and the number of seats in text areas.<\/p>\n

You can use this code to build a simple movie ticket booking system for a website. It allows users to select seats for a movie show, making the booking process interactive and easy. The benefit is that it provides a straightforward interface for users to choose their seats and displays the selected seats along with the user’s name and the number of seats chosen.<\/p>\n

How to Create Movie Ticket Booking System Using Javascript<\/h2>\n

1. First, copy the following HTML structure into your HTML file. This structure includes seat checkboxes, input fields for the user’s name and number of seats, and display areas for the selected information.<\/p>\n

<body onload=\"onLoaderFunc()\">\r\n\r\n<div class=\"inputForm\">\r\n<center>\r\n  Name *: <input type=\"text\" id=\"Username\" required>\r\n  Number of Seats *: <input type=\"number\" id=\"Numseats\" required>\r\n  <br\/><br\/>\r\n  <button onclick=\"takeData()\">Start Selecting<\/button>\r\n<\/center>\r\n<\/div>\r\n  \r\n\r\n<div class=\"seatStructure\">\r\n<center>\r\n  \r\n<table id=\"seatsBlock\">\r\n <p id=\"notification\"><\/p>\r\n  <tr>\r\n    <td colspan=\"14\"><div class=\"screen\">SCREEN<\/div><\/td>\r\n    <td rowspan=\"20\">\r\n      <div class=\"smallBox greenBox\">Selected Seat<\/div> <br\/>\r\n      <div class=\"smallBox redBox\">Reserved Seat<\/div><br\/>\r\n      <div class=\"smallBox emptyBox\">Empty Seat<\/div><br\/>\r\n    <\/td>\r\n    \r\n    <br\/>\r\n  <\/tr>\r\n  \r\n  <tr>\r\n    <td><\/td>\r\n    <td>1<\/td>\r\n    <td>2<\/td>\r\n    <td>3<\/td>\r\n    <td>4<\/td>\r\n    <td>5<\/td>\r\n    <td><\/td>\r\n    <td>6<\/td>\r\n    <td>7<\/td>\r\n    <td>8<\/td>\r\n    <td>9<\/td>\r\n    <td>10<\/td>\r\n    <td>11<\/td>\r\n    <td>12<\/td>\r\n<\/tr>\r\n  \r\n<tr>\r\n    <td>A<\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"A1\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"A2\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"A3\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"A4\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"A5\"><\/td>\r\n    <td class=\"seatGap\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"A6\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"A7\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"A8\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"A9\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"A10\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"A11\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"A12\"><\/td>\r\n  <\/tr>\r\n  \r\n  <tr>\r\n    <td>B<\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"B1\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"B2\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"B3\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"B4\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"B5\"><\/td>\r\n    <td><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"B6\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"B7\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"B8\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"B9\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"B10\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"B11\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"B12\"><\/td>\r\n  <\/tr>\r\n  \r\n  <tr>\r\n    <td>C<\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"C1\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"C2\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"C3\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"C4\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"C5\"><\/td>\r\n    <td><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"C6\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"C7\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"C8\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"C9\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"C10\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"C11\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"C12\"><\/td>\r\n<\/tr>\r\n  \r\n<tr>\r\n    <td>D<\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"D1\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"D2\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"D3\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"D4\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"D5\"><\/td>\r\n    <td><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"D6\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"D7\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"D8\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"D9\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"D10\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"D11\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"D12\"><\/td>\r\n<\/tr>\r\n  \r\n<tr>\r\n    <td>E<\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"E1\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"E2\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"E3\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"E4\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"E5\"><\/td>\r\n    <td><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"E6\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"E7\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"E8\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"E9\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"E10\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"E11\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"E12\"><\/td>\r\n<\/tr>\r\n  \r\n<tr class=\"seatVGap\"><\/tr>\r\n  \r\n<tr>\r\n    <td>F<\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"F1\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"F2\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"F3\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"F4\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"F5\"><\/td>\r\n    <td><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"F6\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"F7\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"F8\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"F9\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"F10\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"F11\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"F12\"><\/td>\r\n<\/tr>\r\n  \r\n<tr>\r\n    <td>G<\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"G1\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"G2\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"G3\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"G4\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"G5\"><\/td>\r\n    <td><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"G6\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"G7\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"G8\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"G9\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"G10\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"G11\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"G12\"><\/td>\r\n<\/tr>\r\n  \r\n<tr>\r\n    <td>H<\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"H1\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"H2\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"H3\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"H4\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"H5\"><\/td>\r\n    <td><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"H6\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"H7\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"H8\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"H9\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"H10\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"H11\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"H12\"><\/td>\r\n<\/tr>\r\n  \r\n<tr>\r\n    <td>I<\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"I1\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"I2\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"I3\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"I4\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"I5\"><\/td>\r\n    <td><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"I6\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"I7\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"I8\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"I9\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"I10\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"I11\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"I12\"><\/td>\r\n<\/tr>\r\n  \r\n<tr>\r\n    <td>J<\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"J1\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"J2\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"J3\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"J4\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"J5\"><\/td>\r\n    <td><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"J6\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"J7\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"J8\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"J9\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"J10\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"J11\"><\/td>\r\n    <td><input type=\"checkbox\" class=\"seats\" value=\"J12\"><\/td>\r\n<\/tr>\r\n  \r\n  \r\n<\/table>\r\n  \r\n<br\/><button onclick=\"updateTextArea()\">Confirm Selection<\/button>\r\n<\/center>\r\n<\/div>\r\n      \r\n<br\/><br\/>\r\n\r\n<div class=\"displayerBoxes\">\r\n<center>\r\n  <table class=\"Displaytable\">\r\n  <tr>\r\n    <th>Name<\/th>\r\n    <th>Number of Seats<\/th>\r\n    <th>Seats<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td><textarea id=\"nameDisplay\"><\/textarea><\/td>\r\n    <td><textarea id=\"NumberDisplay\"><\/textarea><\/td>\r\n    <td><textarea id=\"seatsDisplay\"><\/textarea><\/td>\r\n  <\/tr>\r\n<\/table>\r\n<\/center>\r\n<\/div>\r\n<\/pre>\n
2. Add the following CSS styles to your CSS file or within <style><\/code> tags in the HTML file. This styles the interface components for a visually appealing layout.<\/p>\n
body\r\n{\r\n  font-family: \"Helvetica Neue\",Helvetica,Arial,sans-serif;\r\n}\r\n\r\n#Username\r\n{\r\n  border:none;\r\n  border-bottom:1px solid;\r\n}\r\n\r\n.screen\r\n{\r\n  width:100%;\r\n  height:20px;\r\n  background:#4388cc;\r\n  color:#fff;\r\n  line-height:20px;\r\n  font-size:15px;\r\n}\r\n\r\n.smallBox::before\r\n{\r\n  content:\".\";\r\n  width:15px;\r\n  height:15px;\r\n  float:left;\r\n  margin-right:10px;\r\n}\r\n.greenBox::before\r\n{\r\n  content:\"\";\r\n  background:Green;\r\n}\r\n.redBox::before\r\n{\r\n  content:\"\";\r\n  background:Red;\r\n}\r\n.emptyBox::before\r\n{\r\n  content=\"\";\r\n  box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);\r\n    background-color:#ccc;\r\n}\r\n\r\n.seats\r\n{\r\n  border:1px solid red;background:yellow;\r\n} \r\n\r\n\r\n\r\n.seatGap\r\n{\r\n  width:40px;\r\n}\r\n\r\n.seatVGap\r\n{\r\n  height:40px;\r\n}\r\n\r\ntable\r\n{\r\n  text-align:center;\r\n}\r\n\r\n\r\n.Displaytable\r\n{\r\n  text-align:center;\r\n}\r\n.Displaytable td, .Displaytable th {\r\n    border: 1px solid;\r\n    text-align: left;\r\n}\r\n\r\ntextarea\r\n{\r\n  border:none;\r\n  background:transparent;\r\n}\r\n\r\n\r\n\r\ninput[type=checkbox] {\r\n    width:0px;\r\n    margin-right:18px;\r\n}\r\n\r\ninput[type=checkbox]:before {\r\n    content: \"\";\r\n    width: 15px;\r\n    height: 15px;\r\n    display: inline-block;\r\n    vertical-align:middle;\r\n    text-align: center;\r\n    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);\r\n    background-color:#ccc;\r\n}\r\n\r\ninput[type=checkbox]:checked:before {\r\n    background-color:Green;\r\n    font-size: 15px;\r\n}<\/pre>\n
3. Now, include the jQuery<\/a> using the following CDN link in your HTML file. The code relies on jQuery for some functionalities.<\/p>\n
<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.0\/jquery.min.js'><\/script>\r\n<\/pre>\n
4. Finally, add the following JavaScript function to activate the ticket booking functionlities.<\/p>\n
function onLoaderFunc()\r\n{\r\n  $(\".seatStructure *\").prop(\"disabled\", true);\r\n  $(\".displayerBoxes *\").prop(\"disabled\", true);\r\n}\r\nfunction takeData()\r\n{\r\n  if (( $(\"#Username\").val().length == 0 ) || ( $(\"#Numseats\").val().length == 0 ))\r\n  {\r\n  alert(\"Please Enter your Name and Number of Seats\");\r\n  }\r\n  else\r\n  {\r\n    $(\".inputForm *\").prop(\"disabled\", true);\r\n    $(\".seatStructure *\").prop(\"disabled\", false);\r\n    document.getElementById(\"notification\").innerHTML = \"<b style='margin-bottom:0px;background:yellow;'>Please Select your Seats NOW!<\/b>\";\r\n  }\r\n}\r\n\r\n\r\nfunction updateTextArea() { \r\n    \r\n  if ($(\"input:checked\").length == ($(\"#Numseats\").val()))\r\n    {\r\n      $(\".seatStructure *\").prop(\"disabled\", true);\r\n      \r\n     var allNameVals = [];\r\n     var allNumberVals = [];\r\n     var allSeatsVals = [];\r\n  \r\n     \/\/Storing in Array\r\n     allNameVals.push($(\"#Username\").val());\r\n     allNumberVals.push($(\"#Numseats\").val());\r\n     $('#seatsBlock :checked').each(function() {\r\n       allSeatsVals.push($(this).val());\r\n     });\r\n    \r\n     \/\/Displaying \r\n     $('#nameDisplay').val(allNameVals);\r\n     $('#NumberDisplay').val(allNumberVals);\r\n     $('#seatsDisplay').val(allSeatsVals);\r\n    }\r\n  else\r\n    {\r\n      alert(\"Please select \" + ($(\"#Numseats\").val()) + \" seats\")\r\n    }\r\n  }\r\n\r\n\r\nfunction myFunction() {\r\n  alert($(\"input:checked\").length);\r\n}\r\n\r\n\/*\r\nfunction getCookie(cname) {\r\n    var name = cname + \"=\";\r\n    var ca = document.cookie.split(';');\r\n    for(var i = 0; i < ca.length; i++) {\r\n        var c = ca[i];\r\n        while (c.charAt(0) == ' ') {\r\n            c = c.substring(1);\r\n        }\r\n        if (c.indexOf(name) == 0) {\r\n            return c.substring(name.length, c.length);\r\n        }\r\n    }\r\n    return \"\";\r\n}\r\n*\/\r\n\r\n\r\n$(\":checkbox\").click(function() {\r\n  if ($(\"input:checked\").length == ($(\"#Numseats\").val())) {\r\n    $(\":checkbox\").prop('disabled', true);\r\n    $(':checked').prop('disabled', false);\r\n  }\r\n  else\r\n    {\r\n      $(\":checkbox\").prop('disabled', false);\r\n    }\r\n});<\/pre>\n
That’s all! hopefully, you have successfully created Movie Ticket Booking Using Javascript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code creates a movie ticket booking interface using JavaScript. Users can select seats by clicking checkboxes. The code ensures…<\/p>\n","protected":false},"author":1,"featured_media":10387,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[],"class_list":["post-10379","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript"],"acf":[],"yoast_head":"\nMovie Ticket Booking Using JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Movie Ticket Booking Using JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Movie Ticket Booking Using JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Movie Ticket Booking Using JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-03T10:31:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-04T03:31:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Movie-Ticket-Booking-Using-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"980\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Movie Ticket Booking Using JavaScript\",\"datePublished\":\"2024-03-03T10:31:00+00:00\",\"dateModified\":\"2024-03-04T03:31:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/\"},\"wordCount\":250,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Movie-Ticket-Booking-Using-JavaScript.png\",\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/\",\"name\":\"Movie Ticket Booking Using JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Movie-Ticket-Booking-Using-JavaScript.png\",\"datePublished\":\"2024-03-03T10:31:00+00:00\",\"dateModified\":\"2024-03-04T03:31:18+00:00\",\"description\":\"Here is a free code snippet to create a Movie Ticket Booking Using JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Movie-Ticket-Booking-Using-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Movie-Ticket-Booking-Using-JavaScript.png\",\"width\":1280,\"height\":980,\"caption\":\"Movie Ticket Booking Using JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Movie Ticket Booking Using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Movie Ticket Booking Using JavaScript — CodeHim","description":"Here is a free code snippet to create a Movie Ticket Booking Using JavaScript. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Movie Ticket Booking Using JavaScript — CodeHim","og_description":"Here is a free code snippet to create a Movie Ticket Booking Using JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-03T10:31:00+00:00","article_modified_time":"2024-03-04T03:31:18+00:00","og_image":[{"width":1280,"height":980,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Movie-Ticket-Booking-Using-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Movie Ticket Booking Using JavaScript","datePublished":"2024-03-03T10:31:00+00:00","dateModified":"2024-03-04T03:31:18+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/"},"wordCount":250,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Movie-Ticket-Booking-Using-JavaScript.png","articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/","url":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/","name":"Movie Ticket Booking Using JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Movie-Ticket-Booking-Using-JavaScript.png","datePublished":"2024-03-03T10:31:00+00:00","dateModified":"2024-03-04T03:31:18+00:00","description":"Here is a free code snippet to create a Movie Ticket Booking Using JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Movie-Ticket-Booking-Using-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Movie-Ticket-Booking-Using-JavaScript.png","width":1280,"height":980,"caption":"Movie Ticket Booking Using JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/movie-ticket-booking-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"Movie Ticket Booking Using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":2486,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=10379"}],"version-history":[{"count":1,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10379\/revisions"}],"predecessor-version":[{"id":11320,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10379\/revisions\/11320"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10387"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}