This commit is contained in:
kene17 2021-03-10 21:26:47 -05:00
commit e973361336
4 changed files with 360 additions and 256 deletions

View file

@ -6,7 +6,7 @@ https://arctichawk1.github.io/SEG3125-LAB5/
Noteable bugs in the website
the date selection does not work on Safari when trying to select date for appointment
the time selection does not work on Safari when trying to select date for appointment
Please kindly test on Chrome

View file

@ -62,8 +62,8 @@ h3 {
font-size: 1.5rem;
}
h5{
font-weight: bold;
h5 {
font-size: 23px;
}
p {
@ -71,6 +71,17 @@ p {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
hr {
border: dotted #EAF6F6 6px;
border-bottom: none;
width: 20%;
/* margin: 100px auto; */
}
h2:hover {
color: #72a7b3
}
/* navigation bar */
@ -81,6 +92,7 @@ p {
.section-heading {
font-size: 3rem;
line-height: 1.5;
color: #34626c
}
.navbar-brand {
@ -135,26 +147,24 @@ p {
text-align: left;
}
/* Worker profiles */
.profile{
width: 200px;
.profile {
width: 200px;
height: 200px;
object-fit: cover;
}
.profile_names{
font-size:25px;
.profile_names {
font-size: 25px;
}
.name_text{
.name_text {
font-weight
}
/* Features section */
#features {
@ -252,13 +262,26 @@ input:invalid+span:after {
position: absolute;
content: '✖';
padding-left: 5px;
}
<<<<<<< HEAD
}
input:valid+span:after {
input:valid+span:after {
=======
}
input:valid+span:after {
position: absolute;
content: '✓';
padding-left: 5px;
}
}
.errorMsg {
color: red;
}
.accountLabel {
text-align: left;
}
/* Footer section */
@ -268,13 +291,13 @@ input:invalid+span:after {
.social-icon {
margin: 20px 10px;
}
.res {
text-align: center;
text-align: center;
}
.rec {
text-align: center;
.rec {
text-align: center;
}
@media (max-width: 1028px) {

View file

@ -6,40 +6,24 @@
<link rel="icon" href="images/favicon.ico">
<title>Batuhan's Bikes</title>
<!-- Google fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:wght@300;400;700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
<!-- CSS stylesheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- fontawesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
</script>
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<section class="colored-section2" id="title">
<div class="container-fluid">
@ -48,8 +32,7 @@
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">Batuhan's Bikes</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
@ -58,7 +41,7 @@
<a class="nav-link" href="#pricing" id="test"> Repair Plans <i class="fas fa-toolbox"></i> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta" id="test"> Contact Us <i class="fas fa-map-signs"></i> </a>
<a class="nav-link" href="#cta" id="test"> Contact Us <i class="fas fa-map-marker-alt"></i> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#appointment" id="test"> Appointment <i class="far fa-clock"></i> </a>
@ -72,8 +55,7 @@
<div class="row">
<div class="col-lg-6">
<h1 class="big-heading">Nothing beats the high of a good bike ride. </h1>
<button type="button" onclick="toAppointment()" class="btn btn-lg btn-dark download-btn"><i
class="fas fa-bicycle"></i> Book an
<button type="button" onclick="toAppointment()" class="btn btn-lg btn-dark download-btn"><i class="fas fa-bicycle"></i> Book an
Appointment</button>
</div>
@ -92,7 +74,7 @@
<div class="container-fluid">
<h1 style="font-weight: bold;"><i class="fas fa-users"></i> Meet the Team</h1>
<h2 class="section-heading" style="text-align:center;"><i class="fas fa-users"></i> Meet the Team</h2>
<br>
<br>
@ -108,7 +90,7 @@
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title "><i class="fas fa-id-card"></i> Batuhan</h5>
<h5 class="card-title"><i class="fas fa-id-card"></i> Batuhan</h5>
<p class="card-text">Hey, I'm the store owner. Ever since I was a child, it was my dream to own
a bike shop. I specialize in brake repair.</p>
<p class="card-text"><small class="text-muted">Availability: Monday-Friday</small></p>
@ -139,25 +121,25 @@
</div>
<div class="col-lg-4 col-12">
<div class="col-lg-4 col-12">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="images\Stewie.png" alt="" class="profile">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-id-card"></i> Stewart</h5>
<p class="card-text"> I recently got my masters in bike fixing. I can help you with any repair or
maintenence </p>
<p class="card-text"><small class="text-muted">Availability: Monday-Wednesday</small></p>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="images\Stewie.png" alt="" class="profile">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-id-card"></i> Stewart</h5>
<p class="card-text"> I recently got my masters in bike fixing. I can help you with any repair or
maintenence </p>
<p class="card-text"><small class="text-muted">Availability: Monday-Wednesday</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -228,10 +210,9 @@
<div class="card-body">
<h2 class="price-text">$47.95</h2>
<img class="title-image" src="images/brake.jpg" alt="bike1">
<p>Repair Using Standard kit</p>
<p>Part Replacement</p>
<button type="button" onclick="toAppointment()"
class="btn btn-block btn-outline-dark btn-lg">Select</button>
<p> <br>Standard Kit | Part Replacement</p>
<!-- <button type="button" onclick="toAppointment()" class="btn btn-block btn-outline-dark btn-lg">Select</button> -->
</div>
</div>
</div>
@ -244,10 +225,8 @@
<div class="card-body">
<h2 class="price-text">$59.95</h2>
<img class="title-image" src="images/tire.jpg" alt="bike2">
<p> Repair Using Advanced Kit</p>
<p> Part Replacement</p>
<button type="button" onclick="toAppointment()"
class="btn btn-block btn-outline-dark btn-lg">Select</button>
<p > <br> Advanced Kit | Part Replacement</p>
<!-- <button type="button" onclick="toAppointment()" class="btn btn-block btn-outline-dark btn-lg">Select</button> -->
</div>
</div>
</div>
@ -261,10 +240,8 @@
<div class="card-body">
<h2 class="price-text">$79.95</h2>
<img class="title-image" src="images/maintenance.jpg" alt="bike3">
<p>Full Part Replacement</p>
<p>Full Cleaning</p>
<button type="button" onclick="toAppointment()"
class="btn btn-block btn-outline-dark btn-lg">Select</button>
<p> <br> Full Cleaning Kit | Full Part Replacement</p>
<!-- <button type="button" onclick="toAppointment()" class="btn btn-block btn-outline-dark btn-lg">Select</button> -->
</div>
</div>
</div>
@ -278,7 +255,7 @@
<div class="row">
<div class="col-12">
<h2 class="big-heading"> <i class="fas fa-map-signs"></i> Contact Us</h2>
<h2 class="big-heading"> <i class="fas fa-map-marker-alt"></i> Contact Us</h2>
<p style="color:white;font-size:20px">5 Hawthorne Avenue <br>
Ottawa, Ontario <br>
Phone: (613) 567-8180 <br>
@ -307,8 +284,7 @@
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I&callback=myMap"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I&callback=myMap"></script>
</section>
@ -318,153 +294,150 @@
<div class="container-fluid">
<h2 class="big-heading"> <i class="far fa-clock"></i> Book an Appointment</h2>
<h2 class="big-heading"> <i class="far fa-clock"></i> Book an Appointment </h2>
<br>
<!-- Accordion for booking a service-->
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle2= "tooltip" data-placement="top" title="Book services by clciking this button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Book Services
</button>
</h5>
</div>
<!-- -->
<form id="contactForm" method="post">
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<h2><i class="fas fa-toolbox"></i> Services</h2>
<p>Please select services you require</p>
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Select Service</option>
<option value="1">Brake Repair</option>
<option value="2">Fixing Punctures</option>
<option value="3">Full Repair/Maintenance</option>
<option value="3">Other Inquiries</option>
</select>
<hr>
<h2><i class="fas fa-users"></i> Mechanics</h2>
<p>Please select your technican</p>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" onchange="getMechanic(this)">
<option selected>Select technican</option>
<option value="1">Batuhan</option>
<option value="2">Mumen </option>
<option value="3">Stewart</option>
<option value="4">No preference</option>
</select>
<hr>
<!-- notify user of the availability of technican before selecting time, let them block dates that arent bookable and let users know-->
<h2><i class="fas fa-calendar-plus"></i> Appointment Time</h2>
<p>Please select an appointment time</p>
<div class="request-label">
<label for="appTime">Choose an appointment date: </label>
<input type="text" id="datepicker">
<form>
<label for="appt-time">Choose an appointment time (8:30am - 10:00pm): </label>
<input id="appt-time" type="time" name="appt-time"
min="12:00" max="18:00">
<span class="validity"></span>
</form>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-tooltip= "tooltip" data-placement="top" title="Access payment by clicking this button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Payment Details
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<h2><i class="far fa-address-book"></i> Contact Information</h2>
<form>
<div class="form-group">
<p class=class="res">Please leave us with your personal information.</p>
<div class="row">
<div class="col-6" style="float: right;">
<label for="fnameLabel">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="First Name">
<div id="accordion">
<!-- Service Accordion -->
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button type="button" class="btn btn-link" data-toggle2= "tooltip" data-placement="top" title="Book services by clicking this button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Book Services
</button>
</h5>
</div>
<div class="col-6">
<label for="lnameLabel">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Last Name">
<!-- Service Accordion Content -->
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<h2><i class="fas fa-toolbox"></i> Services</h2>
<p>Please select services you require</p>
<!-- select services -->
<select class="form-select form-select-sm" id="selectService" name="services" aria-label=".form-select-sm example">
<option selected>Select Service</option>
<option value="1">Brake Repair</option>
<option value="2">Fixing Punctures</option>
<option value="3">Full Repair/Maintenance</option>
<option value="4">Other Inquiries</option>
</select>
<span id="serviceError" class="errorMsg"></span>
<hr>
<h2><i class="fas fa-users"></i> Mechanics</h2>
<p>Please select your technican</p>
<!-- select technican -->
<select class="form-select form-select-sm" id="selectTechnican" name="technicans" aria-label=".form-select-sm example" onchange="getMechanic(this)">
<option selected>Select technican</option>
<option value="1">Batuhan</option>
<option value="2">Mumen </option>
<option value="3">Stewart</option>
<option value="4">No preference</option>
</select>
<p id="technicanError" class="errorMsg"></p>
<hr>
<!-- notify user of the availability of technican before selecting time, let them block dates that arent bookable and let users know-->
<h2><i class="fas fa-calendar-plus"></i> Appointment Time</h2>
<p>Please select an appointment time</p>
<!-- Select Appointment Date and Time -->
<div class="request-label">
<label for="appTime">Choose an appointment date: </label>
<input type="text" id="datepicker">
<p id="dateError" class="errorMsg"></p>
<div>
<label for="appt-time">Choose an appointment time (8:30am - 10:00pm): </label>
<input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00">
<span class="validity"></span>
<p id="timeError" class="errorMsg"></p>
</div>
</div>
</div>
</div>
</div>
<!-- Payment Accordion -->
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-tooltip= "tooltip" data-placement="top" title="Access payment by clicking this button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Payment Details
</button>
</h5>
</div>
<!-- Payment Accordion content -->
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<h2><i class="far fa-address-book"></i> Contact Information</h2>
<p>Please fill the spaces below with your contact information</p>
<!-- <form> -->
<div class="form-group">
<div class="row">
<div class="col-6 accountLabel" style="float: right;">
<label for="fnameLabel">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="First Name">
<p id="fnameError" class="errorMsg"></p>
</div>
<div class="col-6 accountLabel">
<label for="lnameLabel">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Last Name">
<p id="lnameError" class="errorMsg"></p>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-6 accountLabel" style="float: right;">
<label for="phoneNumLabel">Phone Number</label>
<input type="text" id="phoneNum" name="phoneNumber" placeholder="Phone Number">
<p id="phoneNumberError" class="errorMsg"></p>
</div>
<div class="col-6 accountLabel">
<label for="emailLabel">Email</label>
<input type="text" id="email" name="email" placeholder="Email">
<p id="emailError" class="errorMsg"></p>
</div>
</div>
</div>
<hr>
<h2><i class="fas fa-money-check-alt"></i> Payment Information</h2>
<p>Please fill the spaces below with your payment information</p>
<div class="form-group">
<div class="row">
<div class="col-6 accountLabel" style="float: right;">
<label for="cardHolderLabel">Name on the card</label>
<input type="text" id="cardHolder" name="cardHolder" placeholder="Name on the Card">
<p id="cardHolderError" class="errorMsg"></p>
</div>
<div class="col-6 accountLabel">
<label for="creditCardLabel">Credit Card</label>
<input type="text" id="creditCard" name="creditCard" placeholder="Credit Card">
<p id="creditCardError" class="errorMsg"></p>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-4 accountLabel">
<label for="expiryDateLabel">Expiry Date</label>
<input type="text" id="expiryDate" name="expiryDate" placeholder="Expiry Date">
<p id="expiryDateError" class="errorMsg"></p>
</div>
<div class="col-2 accountLabel">
<label for="cvvLabel">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="CVV">
<p id="cvvError" class="errorMsg"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-6" style="float: right;">
<label for="phoneNumLabel">Phone Number</label>
<input type="text" id="phoneNum" name="phoneNumber" placeholder="Phone Number">
</div>
<div class="col-6">
<label for="emailLabel">Email</label>
<input type="text" id="email" name="email" placeholder="Email">
</div>
</div>
</div>
<hr>
<p class="rec">Please provide your credit card information to guarantee your service appointment.</p>
<h2>Account Details</h2>
<h2><i class="fas fa-money-check-alt"></i> Payment Information</h2>
<p>Please fill the spaces below with your payment information</p>
<div class="form-group">
<div class="row">
<div class="col-6" style="float: right;">
<label for="cardHolderLabel">Name on the card</label>
<input type="text" id="cardHolder" name="cardHolder" placeholder="Name on the Card">
</div>
<div class="col-6">
<label for="creditCardLabel">Credit Card</label>
<input type="text" id="creditCard" name="creditCard" placeholder="Credit Card">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-4">
<label for="expiryDateLabel">Expiry Date</label>
<input type="text" id="expiryDate" name="expiryDate" placeholder="Expiry Date">
</div>
<div class="col-2">
<label for="cvvLabel">CVV</label>
<input type="text" id="expiryDate" name="cvv" placeholder="CVV">
</div>
</div>
</div>
<br>
<br>
<button type="button" class="btn btn-lg btn-outline-success" id="submitButton" onclick="validateForm()">Submit</button>
</form>
</div>
</div>
</div>
<!--<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Account Details
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
</div>
</div>
</div> -->
</div>
<br>
<br>
<input type="submit" value="Submit">
</div>
</section>
@ -480,44 +453,10 @@
</div>
</footer>
<!-- script to scroll to appointment-->
<script>
function toAppointment() {
document.getElementById('appointment').scrollIntoView();
}
var value = 0;
$(function() {
$( "#datepicker").datepicker({ beforeShowDay: getAvailability});
});
function getMechanic(selectObject) {
value = selectObject.value;
}
function getAvailability(date){
if (value == 1 && (date.getDay() === 0 || date.getDay()==6)) /* restrict weekends */
return [false]
if (value == 2 && (date.getDay() === 0 || date.getDay()==1 || date.getDay()==4 || date.getDay()==5 || date.getDay()==6)) /* restrict M,Thurs, Fri, Sat, Sun */
return [false]
if (value == 3 && (date.getDay() === 0 || date.getDay()==4 || date.getDay()==5 || date.getDay()==6 )) /* restrict Thurs, Fri, Sat, Sun */
return [false]
if (date.getDay() === 0 || date.getDay()== 6 ) /* weekends */
return [false]
else
return [ true, "", "" ]
}
$(function(){
$('[data-toggle2="tooltip"]').tooltip();
$('[data-tooltip="tooltip"]').tooltip();
});
</script>
<!--Scripts--->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="scripts/index.js" charset="utf-8"></script>
</body>

142
scripts/index.js Normal file
View file

@ -0,0 +1,142 @@
function toAppointment() {
document.getElementById('appointment').scrollIntoView();
}
// Calendar Validation
// //logic was gotten from
// https://forum.jquery.com/topic/disable-single-day-of-a-week-in-datepicker
var value = 0;
$(function() {
$("#datepicker").datepicker({
beforeShowDay: getAvailability
});
});
function getMechanic(selectObject) {
value = selectObject.value;
}
function getAvailability(date) {
if (value == 1 && (date.getDay() === 0 || date.getDay() == 6)) /* restrict weekends */
return [false]
if (value == 2 && (date.getDay() === 0 || date.getDay() == 1 || date.getDay() == 4 || date.getDay() == 5 || date.getDay() == 6)) /* restrict M,Thurs, Fri, Sat, Sun */
return [false]
if (value == 3 && (date.getDay() === 0 || date.getDay() == 4 || date.getDay() == 5 || date.getDay() == 6)) /* restrict Thurs, Fri, Sat, Sun */
return [false]
if (date.getDay() === 0 || date.getDay() == 6) /* weekends */
return [false]
else
return [true, "", ""]
}
//grab my Form
var form = $('#contactForm');
//Form Validation
function validateForm() {
//first check that the user has selected,
var serviceSelected = $('#selectService option:selected').val();
if (serviceSelected === "Select Service") {
$('#serviceError').html("*Please select a service");
} else {
$('#serviceError').html("");
}
//next check for the technician selected by the users
if ($('#selectTechnican option:selected').val() === "Select technican") {
$('#technicanError').html("*Please select a technican");
} else {
$('#technicanError').html("");
}
//next, check for appointment date selection
if ($('#datepicker').val() === "") {
$('#dateError').html("*Please select an appointment Date");
} else {
$('#dateError').html("");
}
//next, check for appointment time selection
var timeSelected = $('#appt-time').val();
if ($('#appt-time').val() === "") {
$('#timeError').html("*Please select an appointment time");
} else {
$('#timeError').html("");
}
// Account Section
// //check the first Name Field
if ($('#fname').val() === "" || !$('#fname').val().length) {
$("#fnameError").html("*Please enter your first name");
} else {
$("#fnameError").html("");
}
//check the last name field
if ($('#lname').val() === "" || !$('#lname').val().length) {
$("#lnameError").html("*Please enter your last name");
} else {
$("#lnameError").html("");
}
//check the phone number Field and validate phone number
// var phoneNumber = $('#phoneNum').val();
//this filter was gotten from this website to valid the phone Number *https://www.w3resource.com/javascript/form/phone-no-validation.php*
var phoneFilter = /^\d{10}$/;
// console.log(phoneNumber);
if ($('#phoneNum').val() === "" || !$('#phoneNum').val().length) {
$("#phoneNumberError").html("*Please enter your Phone Number");
} else if (!$('#phoneNum').val().match(phoneFilter)) {
$("#phoneNumberError").html("*Invalid phone number please enter a 10 digit number");
} else {
$("#phoneNumberError").html("");
}
//source of this is from the link below
//https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
var emailFilter = /^\S+@\S+$/;
if ($('#email').val() === "" || !$('#email').val().length) {
$("#emailError").html("*Please enter your email Address");
} else if (!$('#email').val().match(emailFilter)) {
$("#emailError").html("*Please enter a valid email address");
} else {
$("#emailError").html("");
}
// console.log(cardHolder);
if ($('#cardHolder').val() === "" || !$('#cardHolder').val().length) {
$("#cardHolderError").html("*Please enter name on the card");
} else {
$("#cardHolderError").html("");
}
//the logic used for the filters in this section was gotten from
////https://stackoverflow.com/questions/6176802/how-to-validate-a-credit-card-number
var creditFilter = /^\d{16}$/;
if ($('#creditCard').val() === "" || !$('#creditCard').val().length) {
$("#creditCardError").html("*Please enter your valid credit card number");
} else if (!$('#creditCard').val().match(creditFilter)) {
$("#creditCardError").html("*Invalid credit card number. Please enter a valid 16 digit credit card");
} else {
$("#creditCardError").html("");
}
var expiryFilter = /^\d{4}$/;
if ($('#expiryDate').val() === "" || !$('#expiryDate').val().length) {
$("#expiryDateError").html("*Please enter your credit card expiry date");
} else if (!$('#expiryDate').val().match(expiryFilter)) {
$("#expiryDateError").html("*Invalid expiry date. Please enter a valid expiry date of format MMYY!");
} else {
$("#expiryDateError").html("");
}
var cvvFilter = /^\d{3}$/;
if ($('#cvv').val() === "" || !$('#cvv').val().length) {
$("#cvvError").html("*Please enter your credit card CVV");
} else if (!$('#cvv').val().match(cvvFilter)) {
$("#cvvError").html("*Please enter 3 digit number");
} else {
$("#cvvError").html("");
}
//after all the test pass submit the form and reset.
contactForm.reset();
}