Skip to content
Snippets Groups Projects
Commit 58044d33 authored by Mohammed Shorif's avatar Mohammed Shorif
Browse files

added javascript to booking page

parent c3dc1424
No related branches found
No related tags found
1 merge request!62added javascript and more to booking page
Hide whitespace changes
Inline Side-by-side
static/booking_confirmation.css 0 → 100644
+ 16
− 0
View file @ 58044d33
#header {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
h1 {
color: black;
font-family: arial, sans-serif;
font-size: 40px;
font-weight: bold;
margin-top: 70px;
text-align: center;
}
static/booking_confirmation.html 0 → 100644
+ 16
− 0
View file @ 58044d33
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="booking_confirmation.css">
<title>Booking Confirmation</title>
</head>
<header>
<img src="Tramshed-Logo-Main-Black.png" id=header />
</header>
<section>
<h1 class="bookingtitle">Booking Confirmation</h1>
</section>
static/make_booking.css
+ 67
− 1
View file @ 58044d33
#header { #header {
display: block; display: block;
width: 30%; margin-left: auto;
margin-right: auto;
width: 70%;
} }
...@@ -12,3 +14,67 @@ font-weight: bold; ...@@ -12,3 +14,67 @@ font-weight: bold;
margin-top: 70px; margin-top: 70px;
text-align: center; text-align: center;
} }
h2 {
color: black;
font-family: arial, sans-serif;
font-size: 20px;
font-weight: bold;
}
body {
width: 450px;
margin: 0 auto;
padding: 50px;
}
div.booking {
margin: 20px 0;
}
div.booking.date {
width: 49%;
display: inline-block;
float: left;
margin-left: 1%;
}
input, select, textarea {
border-radius: 2px;
border: 2px solid #777;
box-sizing: border-box;
font-size: 1.25em;
width: 100%;
padding: 10px;
}
div.booking.date input {
width: 95%;
display: inline-block;
}
textarea {
height: 250px;
}
hr {
border: 1px dotted #ccc;
}
button {
height: 50px;
background: black;
border: none;
color: white;
font-size: 1.25em;
border-radius: 4px;
cursor: pointer;
}
button:hover {
border: 2px solid black;
}
static/make_booking.html
+ 54
− 4
View file @ 58044d33
...@@ -3,6 +3,20 @@ ...@@ -3,6 +3,20 @@
<head> <head>
<link rel="stylesheet" href="make_booking.css"> <link rel="stylesheet" href="make_booking.css">
<style>
var currentDateTime = new Date();
var year = currentDateTime.getFullYear();
var month = (currentDateTime.getMonth() + 1);
var date = (currentDateTime.getDate() + 1);
if(date < 10) {
date = '0' + date;
}
if(month < 10) {
month = '0' + month;
}
</style>
<title>Make a Booking</title> <title>Make a Booking</title>
</head> </head>
...@@ -10,12 +24,48 @@ ...@@ -10,12 +24,48 @@
<img src="Tramshed-Logo-Main-Black.png" id=header /> <img src="Tramshed-Logo-Main-Black.png" id=header />
</header> </header>
<body> <section>
<h1 class="bookingtitle">Make a Booking</h1> <h1 class="bookingtitle">Make a Booking</h1>
</body> </section>
<main>
<form>
<div class="booking">
<input type="text" id="name" name="visitor_name" placeholder="Your Name" pattern=[A-Z\sa-z]{3,20} required>
</div>
<div class="booking">
<input type="email" id="email" name="visitor_email" placeholder="example@email.com" required>
</div>
<div class="booking">
<input type="tel" id="phone" name="visitor_phone" placeholder="Phone Number" pattern=(\d{3})-?\s?(\d{3})-?\s?(\d{4}) required>
</div>
<hr>
<div class="booking date">
<h2 for="checkin-date">Check-in Date</h2>
<input type="date" id="checkin-date" name="checkin" required>
</div>
<div class="booking date">
<h2 for="checkout-date">Check-out Date</h2>
<input type="date" id="checkout-date" name="checkout" required>
</div>
<div class="booking">
<h2 for="office-selection">Select Office Space</h2>
<select id="office-selection" name="office_preference" required>
<option value="">Choose from the List</option>
<option value="codebase">Codebase</option>
<option value="catalyst">Catalyst</option>
<option value="dogpatch">Dogpatch Labs</option>
</select>
</div>
<hr>
<div class="booking">
<h2 for="message">Anything Else?</h2>
<textarea id="message" name="visitor_message" placeholder="Tell us anything else that might be important." required></textarea>
</div>
<button type="submit">Confirm Booking</button>
</form>
</main>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment