Skip to content

Instantly share code, notes, and snippets.

@olabamipetaiwo

olabamipetaiwo/Seat Reservation

Forked from Niranjan24491/Seat Reservation
Created July 10, 2021 21:56
Show Gist options
  • Save olabamipetaiwo/f9813485cdbdee6d50fb398fba517466 to your computer and use it in GitHub Desktop.
Save olabamipetaiwo/f9813485cdbdee6d50fb398fba517466 to your computer and use it in GitHub Desktop.
Download ZIP
Seat Reservation in Javascript
Raw
Seat Reservation
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Online seat reservation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="seat.css"/>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="seat.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-lg-12 col-sm-12 col-md-12 text-center">
<h1>MOVIE SEAT RESERVATION</h1>
<div class='row text-center'>
<input type="text" class="form-control input" id="Name" placeholder="Enter Name" >
<input type="number" min='0' max='50' class="form-control input" id="Seats" placeholder="Enter number of seats">
</div>
<div class='row'>
<button type="button" id="Selectseat" class="btn btn-success seatsBtn">Select Seats</button>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 bg-primary screen">SCREEN</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<table id="seatTable" class="table fixed-column td">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th></th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td>F</td>
</tr>
<tr>
<td>G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
</tr>
<tr>
<td>J</td>
</tr>
</tbody>
</table>
<button type="button" id="ConfirmSeat" class="btn btn-warning seatsBtn">Confirm Seats</button>
<div>
<span class="spanBox" style='Background-color:green'></span><label>Selected Seats</label>
<span class="spanBox" style='Background-color:red'></span><label>Reserved Seats</label>
<span class="spanBox"></span><label>Empty Seats</label>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2"></div>
</div>
</div>
</div>
<div class='row'>
<div class='col-xs-12 col-sm-2 col-md-2 col-lg-2'></div>
<div class='col-xs-12 col-sm-6 col-md-6 col-lg-6'>
<table class='table-striped table table-bordered resultTable'>
<thead>
<tr>
<th>Name</th>
<th>No. of Seats</th>
<th>Seats Reserved</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class='col-xs-12 col-sm-4 col-md-4 col-lg-4'></div>
</div>
</div>
</body>
</html>
Raw
seat.css
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Jul 31, 2015, 11:38:31 AM
Author : Niranjan
*/
.screen {
padding: 6px;
margin-top: 30px;
margin-bottom: 28px;
}
.table>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
}
.td th {
width: 31px;
}
.tdBox {
display: inline-block;
width: 26px;
height: 23px;
padding: 1px 3px;
border: 4px double white;
background-color:#ddd;
opacity: 0.4;
}
.spanBox {
display: inline-block;
width: 28px;
height: 23px;
padding: 1px 3px;
border: 4px double white;
background-color:#ddd;
margin-top: 2%;
}
.seatsBtn {
margin-top: 1%;
}
.input {
width: 14%;
position: relative;
display: inline-block;
margin-right: 2%;
}
.greenColor{
background-color: #5cb85c;
}
.redColor{
background-color: #d9534f;
}
.resultTable td:nth-child(3){
max-width:100%;
word-break: break-all;
}
Raw
seat.js
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
var noOfSeats = 0, clickCounter = 0, k = 0, UserCount = 0;
$(document).ready(function () {
$('.table').attr('disabled', true);
var TableRows = $('.table tr');
var emptyCell = '<td></td>';
for (var i = 1; i < TableRows.length; i++) {
var rowID = 1;
var colId = $('.table tbody tr:nth-child(' + i + ') td:nth-child(' + 1 + ')').text();
for (var j = 0; j < 21; j++) {
var id = rowID + colId;
var appendString = '<td><span class="tdBox" id=' + id + '></span></td>';
if (j == 10) {
$('.table tbody tr:nth-child(' + i + ')').append(emptyCell);
rowID--;
}
else {
$('.table tbody tr:nth-child(' + i + ')').append(appendString);
}
rowID++;
}
}
$('#Seats').focusout(function () {
var BookedSeats = $('#Seats').val();
noOfSeats = BookedSeats;
if (BookedSeats > 50)
{
alert('Please select max of 50 seats only');
$('#Seats').val('');
$('.table tbody tr td span').css({opacity: 0.4});
}
});
var redCount = 0;
$('#Selectseat').unbind('click').bind('click', function () {
if ($('#Seats').val() != '' || $('#Seats').val() != 0) {
var table = document.getElementById("seatTable");
for (var i = 1, row; row = table.rows[i]; i++) {
for (var j = 1, col; col = row.cells[j]; j++) {
if (col.firstChild != null)
{
var ClassName = col.firstChild.className;
if (ClassName != '' && typeof ClassName !== "undefined" && ClassName !== null) {
if (ClassName[1] == 'redColor') {
redCount++;
}
else
{
break;
}
}
}
}
}
if (redCount == 200)
{
$('.table tbody tr td').unbind('click');
$('.table tbody tr td span').css({opacity: 0.4});
alert('Sorry HouseFull');
return;
}
$('.table').attr('disabled', false);
$('.table tbody tr td span').css({opacity: 1});
$('.table tbody tr td').unbind('click').bind('click', function () {
var ClassName = $(this).find('span').attr('class');
ClassName = ClassName.split(" ");
if (ClassName[1] == 'greenColor') {
$(this).find('span').removeClass('greenColor');
clickCounter--;
}
else
{
if (clickCounter >= noOfSeats)
{
return;
}
else
{
if (ClassName[1] == 'redColor')
{
return;
}
else
{
$(this).find('span').addClass('greenColor');
clickCounter++;
}
}
}
});
}
else
{
alert('Please select no of seats');
}
});
$('#ConfirmSeat').unbind('click').bind('click', function () {
var table = document.getElementById("seatTable");
var idList = '';
var UserName = $('#Name').val();
if (UserName == '')
{
alert('Please enter the name to confirm the seats');
return;
}
if ($('#Seats').val() == '' || $('#Seats').val() == 0)
{
alert('Please enter number of seats to confirm');
return;
}
else
{
for (var i = 1, row; row = table.rows[i]; i++) {
for (var j = 1, col; col = row.cells[j]; j++) {
if (col.firstChild != null)
{
var ClassName = col.firstChild.className;
if (ClassName != '' && typeof ClassName !== "undefined" && ClassName !== null) {
ClassName = ClassName.split(" ");
if (ClassName[1] == 'greenColor') {
UserCount++;
idList += $('.table tbody tr:nth-child(' + i + ') td:nth-child(' + (j + 1) + ') span').attr('id') + ',';
$('.table tbody tr:nth-child(' + i + ') td:nth-child(' + (j + 1) + ') span').removeClass('greenColor').addClass('redColor');
}
if (ClassName[1] == 'greenColor') {
redCount++;
}
}
}
}
}
if (UserCount != parseInt(noOfSeats))
{
UserCount = 0;
var array = idList.split(',');
for (var l = 0; l < array.length; l++) {
$('#' + array[l]).removeClass('redColor').addClass('greenColor');
}
alert('selected seats does not match with the number of seats specified');
return;
}
idList = idList.substring(0, idList.length - 1);
var newRow = document.createElement('tr');
newRow.setAttribute('id', 'id_' + k);
$('.resultTable').append(newRow);
var td = document.createElement('td');
td.innerHTML = UserName;
document.getElementById('id_' + k).appendChild(td);
td = document.createElement('td');
td.innerHTML = UserCount;
document.getElementById('id_' + k).appendChild(td);
td = document.createElement('td');
td.innerHTML = idList;
document.getElementById('id_' + k).appendChild(td);
k++;
clickCounter = 0;
UserCount = 0;
$('#Name').val('');
$('#Seats').val('');
$('.table tbody tr td').unbind('click');
$('.table tbody tr td span').css({opacity: 0.4});
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment