Skip to content

Instantly share code, notes, and snippets.

@Tunas1337

Tunas1337/index.html

Created March 19, 2023 20:16
Show Gist options
  • Save Tunas1337/1ba79af6802dcb6d8eb800025e47db31 to your computer and use it in GitHub Desktop.
Save Tunas1337/1ba79af6802dcb6d8eb800025e47db31 to your computer and use it in GitHub Desktop.
Download ZIP
KKBZQLR
Raw
index.html
<html>
<head>
<title>Full Stack Project 1</title>
<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Toastr -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<!-- Moment -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
</head>
<body>
<script type="text/javascript">
// This is where my JS lived before I moved to CodePen.
</script>
<style>
body {
background-color: #f2f2f2;
}
.form-title {
font-size: 30px;
color: red;
}
</style>
<h1 class="form-title">Bootstrap Booking Form:</h1>
<!-- Two empty columns, side by side -->
<div class="container-fluid">
<div class="well">Fill out the form and click the submit button when complete...</div>
<div class="col-sm-3 col-md-6 col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">User:</div>
<div class="panel-body">
<form>
<div class="form-group">
<label class="control-label col-sm-2" for="username">Username:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Type username...">
</div>
<label class="control-label col-sm-2" for="firstname">First Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="Type first name...">
</div>
<label class="control-label col-sm-2" for="lastname">Last Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="Type last name...">
</div>
</div>
</form>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Contact:</div>
<div class="panel-body">
<form>
<div class="form-group" id="contact">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input type="text" class="form-control" id="phone" placeholder="Type phone#...">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-print"></i></span>
<input type="text" class="form-control" id="fax" placeholder="Type fax#...">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="email" placeholder="Type email...">
</div>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Schedule:</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="adults">Adults:</label>
<select class="form-control" id="adults" onchange="updateCost()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="row">
<div class="col-sm-6">
<label for="checkin">Check-in:</label>
<input type="date" class="form-control" id="checkin" onchange="updateDays()">
</div>
<div class="col-sm-6">
<label for="checkout">Check-out:</label>
<input type="date" class="form-control" id="checkout" onchange="updateDays()">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label for="days">Days:</label>
<input type="text" class="form-control" id="days" readonly>
</div>
<div class="col-sm-6">
<label for="cost">Cost:</label>
<input type="text" class="form-control" id="cost" readonly>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-3 col-md-6">
<div class="container-fluid">
<div class="panel panel-primary">
<div class="panel-heading">Other:</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="message">Message:</label>
<textarea class="form-control" rows="15" id="message"></textarea>
</div>
<div class="form-group">
<label for="range">Range:</label>
<input type="range" class="form-control" id="range" min="0" max="100" step="10" value="50">
</div>
<div class="form-group">
<label for="priority">Priority:</label>
<div class="radio">
<label><input type="radio" name="optradio" value="low">Low</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" value="med">Med</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" value="high">High</label>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Reset and Submit buttons on the bottom right -->
<div class="container-fluid">
<div class="col-lg-6 col-sm-3 col-md-6">
</div>
<div class="container-fluid text-right">
<button type="button" class="btn btn-primary" onclick="resetForm()"><span class="glyphicon glyphicon-erase"></span> Reset</button>
<button type="button" class="btn btn-success" onclick="submitForm()"><span class="glyphicon glyphicon-send"></span> Submit</button>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
// Update days textbox with the number of days between check-in and check-out dates
function updateDays() {
// Check that both dates are valid
if ($('#checkin').val() == "" || $('#checkout').val() == "") {
return;
}
var checkin = moment($('#checkin').val());
var checkout = moment($('#checkout').val());
var days = checkout.diff(checkin, 'days');
$('#days').val(days);
// Populate cost textbox with the number of days times the cost per day
updateCost();
}
// Update cost textbox with the number of days times the cost per day
function updateCost() {
// Check that both dates are valid
if ($('#checkin').val() == "" || $('#checkout').val() == "") {
return;
}
var checkin = moment($('#checkin').val());
var checkout = moment($('#checkout').val());
var days = checkout.diff(checkin, 'days');
var cost = 150 * days * $('#adults').val();
$('#cost').val(cost);
}
// Reset the form
function resetForm() {
// Clear all textboxes
$('input[type=text]').val('');
// Clear the message textarea
$('#message').val('');
// Clear all dropdowns
$('select').val('');
// Clear all date pickers
$('input[type=date]').val('');
// Clear all number boxes
$('input[type=number]').val('');
// Reset the slider
$('#range').val(50);
// Clear all radio buttons
$('input[type=radio]').prop('checked', false);
// Pop up toastr message
toastr.info('Form has been reset');
}
function submitForm() {
// Validate the username, first, last, phone, fax, and email fields for empty entries.
// If a field is empty, notify user with a red error toaster and highlight the field in red*.
// * - Keep in mind that adding the class "has-error" to a textbox will not work; it must be added to the parent div.
if ($('#username').val() == "") {
$('#username').parent().addClass('has-error');
toastr.error('Username is required');
return false;
}
// Just for completeness, undo the error highlighting if the user fixes the error. The same applies for the other validations.
else {
$('#username').parent().removeClass('has-error');
}
if ($('#firstname').val() == "") {
$('#firstname').parent().addClass('has-error');
toastr.error('First name is required');
return false;
}
else {
$('#firstname').parent().removeClass('has-error');
}
if ($('#lastname').val() == "") {
$('#lastname').parent().addClass('has-error');
toastr.error('Last name is required');
return false;
}
else {
$('#lastname').parent().removeClass('has-error');
}
if ($('#phone').val() == "") {
$('#phone').parent().addClass('has-error');
toastr.error('Phone number is required');
return false;
}
else {
$('#phone').parent().removeClass('has-error');
}
if ($('#fax').val() == "") {
$('#fax').parent().addClass('has-error');
toastr.error('Fax number is required');
return false;
}
else {
$('#fax').parent().removeClass('has-error');
}
if ($('#email').val() == "") {
$('#email').parent().addClass('has-error');
toastr.error('Email is required');
return false;
}
else {
$('#email').parent().removeClass('has-error');
}
// Check that the check-in date is before the check-out date.
// I'm not sure if this is a requirement, but I'm assuming it is. It beats having to check for negative numbers in the cost calculation
// which is what the project description implies.
if ($('#checkin').val() == "" || $('#checkout').val() == "") {
toastr.error('Check-in and check-out dates are required');
return;
}
var checkin = moment($('#checkin').val());
var checkout = moment($('#checkout').val());
if (checkout.isBefore(checkin)) {
$('#checkout').addClass('has-error');
toastr.error('Check-out date must be after check-in date');
return false;
}
// Check that the number of adults is greater than 0. Children cannot travel alone ;)
if ($('#adults').val() == 0) {
$('#adults').addClass('has-error');
toastr.error('Number of adults must be greater than 0');
return false;
}
// check to see if the cost was calculated and if it is not, notify user with a red error toaster that no cost was calculated
// We should never get here since the cost is calculated every time the check-in or check-out date is changed, and we check
// that both dates are valid above. Still, we ought to check for good measure.
if ($('#cost').val() == "") {
$('#cost').addClass('has-error');
toastr.error('Cost was not calculated');
return false;
}
// check to see if the cost was positive and if it is not, notify user with a red error toaster that cost is negative.
// Considering the check above to see if the check-in date is before the check-out date, this should never happen.
// However, again, we should check just in case.
if ($('#cost').val() < 0) {
$('#cost').addClass('has-error');
toastr.error('Cost is negative');
return false;
}
// Finally, if all checks pass, submit the form
toastr.success('Form submitted successfully');
}
Raw
style.css
body {
background-color: #f2f2f2;
}
.form-title {
font-size: 30px;
color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment