batuhan-basoglu/Batuhan-s-Bikes-Website-Alternative-with-Validating-Form
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'master' of https://github.com/ArcticHawk1/SEG3125-LAB5

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -6,7 +6,7 @@ https://arctichawk1.github.io/SEG3125-LAB5/
Noteable bugs in the website 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 Please kindly test on Chrome

37
css/styles.css
View file

@ -63,7 +63,7 @@ h3 {
} }
h5 { h5 {
font-weight: bold; font-size: 23px;
} }
p { p {
@ -71,6 +71,17 @@ p {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 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 */ /* navigation bar */
@ -81,6 +92,7 @@ p {
.section-heading { .section-heading {
font-size: 3rem; font-size: 3rem;
line-height: 1.5; line-height: 1.5;
color: #34626c
} }
.navbar-brand { .navbar-brand {
@ -135,13 +147,13 @@ p {
text-align: left; text-align: left;
} }
/* Worker profiles */ /* Worker profiles */
.profile { .profile {
width: 200px; width: 200px;
height: 200px; height: 200px;
object-fit: cover; object-fit: cover;
} }
.profile_names { .profile_names {
@ -150,11 +162,9 @@ p {
.name_text { .name_text {
font-weight font-weight
} }
/* Features section */ /* Features section */
#features { #features {
@ -252,6 +262,11 @@ input:invalid+span:after {
position: absolute; position: absolute;
content: '✖'; content: '✖';
padding-left: 5px; padding-left: 5px;
<<<<<<< HEAD
}
input:valid+span:after {
=======
} }
input:valid+span:after { input:valid+span:after {
@ -260,6 +275,14 @@ input:invalid+span:after {
padding-left: 5px; padding-left: 5px;
} }
.errorMsg {
color: red;
}
.accountLabel {
text-align: left;
}
/* Footer section */ /* Footer section */
@ -268,13 +291,13 @@ input:invalid+span:after {
.social-icon { .social-icon {
margin: 20px 10px; margin: 20px 10px;
} }
.res { .res {
text-align: center; text-align: center;
} }
.rec { .rec {
text-align: center; text-align: center;
} }
@media (max-width: 1028px) { @media (max-width: 1028px) {

209
index.html
View file

@ -6,40 +6,24 @@
<link rel="icon" href="images/favicon.ico"> <link rel="icon" href="images/favicon.ico">
<title>Batuhan's Bikes</title> <title>Batuhan's Bikes</title>
<!-- Google fonts --> <!-- Google fonts -->
<link <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:wght@300;400;700&display=swap"
rel="stylesheet">
<!-- CSS stylesheet --> <!-- CSS stylesheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<!-- fontawesome --> <!-- fontawesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
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="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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> </head>
<body> <body>
<section class="colored-section2" id="title"> <section class="colored-section2" id="title">
<div class="container-fluid"> <div class="container-fluid">
@ -48,8 +32,7 @@
<!-- Nav Bar --> <!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark"> <nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">Batuhan's Bikes</a> <a class="navbar-brand" href="#">Batuhan's Bikes</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <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> <a class="nav-link" href="#pricing" id="test"> Repair Plans <i class="fas fa-toolbox"></i> </a>
</li> </li>
<li class="nav-item"> <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>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#appointment" id="test"> Appointment <i class="far fa-clock"></i> </a> <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="row">
<div class="col-lg-6"> <div class="col-lg-6">
<h1 class="big-heading">Nothing beats the high of a good bike ride. </h1> <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 <button type="button" onclick="toAppointment()" class="btn btn-lg btn-dark download-btn"><i class="fas fa-bicycle"></i> Book an
class="fas fa-bicycle"></i> Book an
Appointment</button> Appointment</button>
</div> </div>
@ -92,7 +74,7 @@
<div class="container-fluid"> <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>
<br> <br>
@ -228,10 +210,9 @@
<div class="card-body"> <div class="card-body">
<h2 class="price-text">$47.95</h2> <h2 class="price-text">$47.95</h2>
<img class="title-image" src="images/brake.jpg" alt="bike1"> <img class="title-image" src="images/brake.jpg" alt="bike1">
<p>Repair Using Standard kit</p>
<p>Part Replacement</p> <p> <br>Standard Kit | Part Replacement</p>
<button type="button" onclick="toAppointment()" <!-- <button type="button" onclick="toAppointment()" class="btn btn-block btn-outline-dark btn-lg">Select</button> -->
class="btn btn-block btn-outline-dark btn-lg">Select</button>
</div> </div>
</div> </div>
</div> </div>
@ -244,10 +225,8 @@
<div class="card-body"> <div class="card-body">
<h2 class="price-text">$59.95</h2> <h2 class="price-text">$59.95</h2>
<img class="title-image" src="images/tire.jpg" alt="bike2"> <img class="title-image" src="images/tire.jpg" alt="bike2">
<p> Repair Using Advanced Kit</p> <p > <br> Advanced Kit | Part Replacement</p>
<p> Part Replacement</p> <!-- <button type="button" onclick="toAppointment()" class="btn btn-block btn-outline-dark btn-lg">Select</button> -->
<button type="button" onclick="toAppointment()"
class="btn btn-block btn-outline-dark btn-lg">Select</button>
</div> </div>
</div> </div>
</div> </div>
@ -261,10 +240,8 @@
<div class="card-body"> <div class="card-body">
<h2 class="price-text">$79.95</h2> <h2 class="price-text">$79.95</h2>
<img class="title-image" src="images/maintenance.jpg" alt="bike3"> <img class="title-image" src="images/maintenance.jpg" alt="bike3">
<p>Full Part Replacement</p> <p> <br> Full Cleaning Kit | Full Part Replacement</p>
<p>Full Cleaning</p> <!-- <button type="button" onclick="toAppointment()" class="btn btn-block btn-outline-dark btn-lg">Select</button> -->
<button type="button" onclick="toAppointment()"
class="btn btn-block btn-outline-dark btn-lg">Select</button>
</div> </div>
</div> </div>
</div> </div>
@ -278,7 +255,7 @@
<div class="row"> <div class="row">
<div class="col-12"> <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> <p style="color:white;font-size:20px">5 Hawthorne Avenue <br>
Ottawa, Ontario <br> Ottawa, Ontario <br>
Phone: (613) 567-8180 <br> Phone: (613) 567-8180 <br>
@ -307,8 +284,7 @@
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
} }
</script> </script>
<script <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I&callback=myMap"></script>
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I&callback=myMap"></script>
</section> </section>
@ -319,152 +295,149 @@
<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--> <!-- Accordion for booking a service-->
<!-- -->
<form id="contactForm" method="post">
<div id="accordion"> <div id="accordion">
<!-- Service Accordion -->
<div class="card"> <div class="card">
<div class="card-header" id="headingOne"> <div class="card-header" id="headingOne">
<h5 class="mb-0"> <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"> <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 Book Services
</button> </button>
</h5> </h5>
</div> </div>
<!-- Service Accordion Content -->
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body"> <div class="card-body">
<h2><i class="fas fa-toolbox"></i> Services</h2> <h2><i class="fas fa-toolbox"></i> Services</h2>
<p>Please select services you require</p> <p>Please select services you require</p>
<select class="form-select form-select-sm" aria-label=".form-select-sm example"> <!-- 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 selected>Select Service</option>
<option value="1">Brake Repair</option> <option value="1">Brake Repair</option>
<option value="2">Fixing Punctures</option> <option value="2">Fixing Punctures</option>
<option value="3">Full Repair/Maintenance</option> <option value="3">Full Repair/Maintenance</option>
<option value="3">Other Inquiries</option> <option value="4">Other Inquiries</option>
</select> </select>
<span id="serviceError" class="errorMsg"></span>
<hr> <hr>
<h2><i class="fas fa-users"></i> Mechanics</h2> <h2><i class="fas fa-users"></i> Mechanics</h2>
<p>Please select your technican</p> <p>Please select your technican</p>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" onchange="getMechanic(this)"> <!-- 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 selected>Select technican</option>
<option value="1">Batuhan</option> <option value="1">Batuhan</option>
<option value="2">Mumen </option> <option value="2">Mumen </option>
<option value="3">Stewart</option> <option value="3">Stewart</option>
<option value="4">No preference</option> <option value="4">No preference</option>
</select> </select>
<p id="technicanError" class="errorMsg"></p>
<hr> <hr>
<!-- notify user of the availability of technican before selecting time, let them block dates that arent bookable and let users know--> <!-- 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> <h2><i class="fas fa-calendar-plus"></i> Appointment Time</h2>
<p>Please select an appointment time</p> <p>Please select an appointment time</p>
<!-- Select Appointment Date and Time -->
<div class="request-label"> <div class="request-label">
<label for="appTime">Choose an appointment date: </label> <label for="appTime">Choose an appointment date: </label>
<input type="text" id="datepicker"> <input type="text" id="datepicker">
<form> <p id="dateError" class="errorMsg"></p>
<div>
<label for="appt-time">Choose an appointment time (8:30am - 10:00pm): </label> <label for="appt-time">Choose an appointment time (8:30am - 10:00pm): </label>
<input id="appt-time" type="time" name="appt-time" <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00">
min="12:00" max="18:00">
<span class="validity"></span> <span class="validity"></span>
</form> <p id="timeError" class="errorMsg"></p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Payment Accordion -->
<div class="card"> <div class="card">
<div class="card-header" id="headingTwo"> <div class="card-header" id="headingTwo">
<h5 class="mb-0"> <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"> <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 Payment Details
</button> </button>
</h5> </h5>
</div> </div>
<!-- Payment Accordion content -->
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body"> <div class="card-body">
<h2><i class="far fa-address-book"></i> Contact Information</h2> <h2><i class="far fa-address-book"></i> Contact Information</h2>
<p>Please fill the spaces below with your contact information</p>
<form> <!-- <form> -->
<div class="form-group"> <div class="form-group">
<p class=class="res">Please leave us with your personal information.</p>
<div class="row"> <div class="row">
<div class="col-6 accountLabel" style="float: right;">
<div class="col-6" style="float: right;">
<label for="fnameLabel">First Name</label> <label for="fnameLabel">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="First Name"> <input type="text" id="fname" name="firstname" placeholder="First Name">
<p id="fnameError" class="errorMsg"></p>
</div> </div>
<div class="col-6"> <div class="col-6 accountLabel">
<label for="lnameLabel">Last Name</label> <label for="lnameLabel">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Last Name"> <input type="text" id="lname" name="lastname" placeholder="Last Name">
<p id="lnameError" class="errorMsg"></p>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="row"> <div class="row">
<div class="col-6" style="float: right;"> <div class="col-6 accountLabel" style="float: right;">
<label for="phoneNumLabel">Phone Number</label> <label for="phoneNumLabel">Phone Number</label>
<input type="text" id="phoneNum" name="phoneNumber" placeholder="Phone Number"> <input type="text" id="phoneNum" name="phoneNumber" placeholder="Phone Number">
<p id="phoneNumberError" class="errorMsg"></p>
</div> </div>
<div class="col-6"> <div class="col-6 accountLabel">
<label for="emailLabel">Email</label> <label for="emailLabel">Email</label>
<input type="text" id="email" name="email" placeholder="Email"> <input type="text" id="email" name="email" placeholder="Email">
<p id="emailError" class="errorMsg"></p>
</div> </div>
</div> </div>
</div> </div>
<hr> <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> <h2><i class="fas fa-money-check-alt"></i> Payment Information</h2>
<p>Please fill the spaces below with your payment information</p> <p>Please fill the spaces below with your payment information</p>
<div class="form-group"> <div class="form-group">
<div class="row"> <div class="row">
<div class="col-6" style="float: right;"> <div class="col-6 accountLabel" style="float: right;">
<label for="cardHolderLabel">Name on the card</label> <label for="cardHolderLabel">Name on the card</label>
<input type="text" id="cardHolder" name="cardHolder" placeholder="Name on the Card"> <input type="text" id="cardHolder" name="cardHolder" placeholder="Name on the Card">
<p id="cardHolderError" class="errorMsg"></p>
</div> </div>
<div class="col-6"> <div class="col-6 accountLabel">
<label for="creditCardLabel">Credit Card</label> <label for="creditCardLabel">Credit Card</label>
<input type="text" id="creditCard" name="creditCard" placeholder="Credit Card"> <input type="text" id="creditCard" name="creditCard" placeholder="Credit Card">
<p id="creditCardError" class="errorMsg"></p>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4 accountLabel">
<label for="expiryDateLabel">Expiry Date</label> <label for="expiryDateLabel">Expiry Date</label>
<input type="text" id="expiryDate" name="expiryDate" placeholder="Expiry Date"> <input type="text" id="expiryDate" name="expiryDate" placeholder="Expiry Date">
<p id="expiryDateError" class="errorMsg"></p>
</div> </div>
<div class="col-2"> <div class="col-2 accountLabel">
<label for="cvvLabel">CVV</label> <label for="cvvLabel">CVV</label>
<input type="text" id="expiryDate" name="cvv" placeholder="CVV"> <input type="text" id="cvv" name="cvv" placeholder="CVV">
<p id="cvvError" class="errorMsg"></p>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
<br>
<br>
<button type="button" class="btn btn-lg btn-outline-success" id="submitButton" onclick="validateForm()">Submit</button>
</form> </form>
</div> </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> </section>
@ -480,44 +453,10 @@
</div> </div>
</footer> </footer>
<!-- script to scroll to appointment--> <!--Scripts--->
<script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
function toAppointment() { <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
document.getElementById('appointment').scrollIntoView(); <script src="scripts/index.js" charset="utf-8"></script>
}
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>
</body> </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();
}