//index.html
<!DOCTYPE html>
<html>
<head>
<title>Hotel Reservation System</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="page.js"></script>
<script type="text/javascript" src="reservationSupport.js"></script>
</head>
<body>
<div class="body">
<div class="upperbody">
<div class="form">
<form action="/action_page.php">
<div class="inside-form">
<label for="fname">Your Name:</label><br>
<label for="lname">Phone:</label><br>
</div>
<div class="inside-form">
<input type="text" id="name" oninput="myFunction()"><br>
<input type="number" id="phone" oninput="myFunction1()"><br>
</div>
<div class="inside-form">
<label for="lname">Start Date:</label><br>
<label for="lname">End Date:</label><br>
</div>
<div class="inside-form">
<input type="date" id="startdate" oninput="myFunction2()"><br>
<input type="date" id="enddate" oninput="myFunction3()"><br>
</div>
<div class="inside-form">
<label for="lname">Adults</label><br>
<label for="lname">Child</label><br>
</div>
<div class="inside-form">
<input type="number" id="ãdül†" oninput="myFunction4()"><br>
<input type="number" id="child" oninput="myFunction5()"><br>
</div>
</form>
</div>
<div class="display-form">
<div class="details">
<h2> Reservation Details</h2>
<hr>
<hr>
Name:<span id="name1"></span><br>
Phone: <span id="phone1"></span><br>
Children Count: <span id="child1"></span><br>
ãdül† Count: <span id="adult1"></span><br>
Start Date: <span id="sdate1"></span><br>
End Date: <span id="edate1"></span><br>
<hr>
<hr>
<br>
</div>
<BUTTON id="confirm" onclick="confirm()">Confirm Reservation</BUTTON>
</div>
</div>
<div class="lowerbody">
<div class="display-grid">
<table id =table>
<tr>
<th>Name</th>
<th>Phone<br>Number</th>
<th>ãdül† <br>Count</th>
<th>Child <br> Count</th>
<th>startDate</th>
<th>EndDate</th>
<th>SubTotal</th>
<th>Tax</th>
<th>Total</th>
</tr>
</table>
</div>
<div class="statistics">
No of Reservation: <span id="reserve"></span><br>
Average of Reservations: <span id="avg"></span><br>
Total Number of UnderAge Customers: <span id="tccount"></span><br>
Total Number of Adults: <span id="tacount"></span><br>
</div>
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------
//style.css
.upperbody{
padding-top: 2%;
display: flex;
flex-wrap: wrap;
min-height: 50%;
max-width: 100%;
justify-content: space-between;
}
.lowerbody{
margin-top: 3%;
padding-bottom: 2%;
display: flex;
flex-wrap: wrap;
min-height :50%;
max-width :100%;
justify-content: space-between;
}
.form,.display-form,.display-grid,.statistics{
min-width: 45%;
height: 100%;
padding: 2%;
}
.form,.display-form{
background-color: #90ee90;
}
.statistics{
background-color: #FFB6C1;
}
.display-grid{
/*background-color: #FFFF99;*/
}
#submit{
margin-left: 18px;
}
.inside-form{
margin-top: 2px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
----------------------------------------------------------------------------------
//page.js
var array=[];
var TotalCount = 0;
var TotalAdultCount = 0;
var TotalChildCount = 0;
var TotalCost = 0;
function myFunction() {
var x = document.getElementById("name").value;
document.getElementById("name1").innerHTML = x;
}
function myFunction1() {
var x = document.getElementById("phone").value;
document.getElementById("phone1").innerHTML = x;
}
function myFunction2() {
var x = document.getElementById("startdate").value;
document.getElementById("sdate1").innerHTML = x;
}
function myFunction3() {
var x = document.getElementById("enddate").value;
document.getElementById("edate1").innerHTML = x;
}
function myFunction4() {
var x = document.getElementById("ãdül†").value;
document.getElementById("adult1").innerHTML = x;
}
function myFunction5() {
var x = document.getElementById("child").value;
document.getElementById("child1").innerHTML = x;
}
function confirm(){
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var startdate = document.getElementById("startdate").value;
var enddate = document.getElementById("enddate").value;
var ãdül† = document.getElementById("ãdül†").value;
var child = document.getElementById("child").value;
TotalCount += 1;
TotalChildCount += parseInt(child,10);
TotalAdultCount += parseInt(ãdül†,10);
document.getElementById("reserve").innerHTML =TotalCount;
document.getElementById("tccount").innerHTML = TotalChildCount;
document.getElementById("tacount").innerHTML = TotalAdultCount;
var a = {
'name':name,
'phone': phone,
'startdate': startdate,
'enddate': enddate,
'ãdül†': parseInt(ãdül†,10),
'child': parseInt(child,10),
}
var avg = getavg(TotalCount,array);
var subtotal = getsubTotal(a);
var tax = getTax(a);
var total = parseFloat(subtotal,10) * parseFloat(tax,10);
var total = total.toFixed(2);
var b ={
'name':name,
'phone': phone,
'startdate': startdate,
'enddate': enddate,
'ãdül†': parseInt(ãdül†,10),
'child': parseInt(child,10),
'subtotal': subtotal,
'tax': tax,
'total': total,
}
array.push(b);
var avg = getavg(TotalCount,array);
var avg = avg.toFixed(2);
document.getElementById("avg").innerHTML = avg;
var html = "<tr><th>Name</th><th>Phone<br>Number</th><th>ãdül† <br>Count</th><th>Child <br> Count</th><th>startDate</th><th>EndDate</th><th>SubTotal</th><th>Tax<th>Total</th>";
for (var i = 0; i < array.length; i++) {
html+="<tr>";
html+="<td>"+array[i].name+"</td>";
html+="<td>"+array[i].phone+"</td>";
html+="<td>"+array[i].ãdül†+"</td>";
html+="<td>"+array[i].child+"</td>";
html+="<td>"+array[i].startdate+"</td>";
html+="<td>"+array[i].enddate+"</td>";
html+="<td> $"+array[i].subtotal+"</td>";
html+="<td> $"+array[i].tax+"</td>";
html+="<td> $"+array[i].total+"</td>";
html+="</tr>";
}
document.getElementById("table").innerHTML = html;
}
--------------------------------------------------------------------------------
//reservationSupport.js
function getavg(c,array){
var Total=0
// console.log(array,c);
for (var i = 0; i < array.length; i++) {
Total += parseFloat(array[i].total);
// console.log(Total);
}
Total =Total/c;
return Total;
}
function getsubTotal(a){
x = a.ãdül†*15.99 + a.child*8.99;
n = x.toFixed(2);
return n;
}
function getTax(a){
x = getsubTotal(a);
x = 0.08 * x;
n = x.toFixed(2);
return n;
}