Added the files.

README.md

@@ -0,0 +1,18 @@
+# SEG3125-LAB5
+
+The validated service company website made by Ruchira Perrera, Sam Oyediran, Batuhan Basoglu, and Kene Ojukwu
+
+https://arctichawk1.github.io/SEG3125-LAB5/
+
+
+Noteable bugs in the website 
+the time selection does not work on Safari when trying to select date for appointment 
+Please kindly test on Chrome
+
+
+# Authors
+
+- Batuhan Basoglu, 300001274 - ArcticHawk1
+- Ruchira Perera, 8714992 - ruchirawp
+- Sam Oyediran, 300016349 - soyed
+- Kene Ojukwu, 300027974 - kene17

css/styles.css

@@ -0,0 +1,357 @@
+body {
+    font-family: 'Montserrat', sans-serif;
+    text-align: center;
+}
+
+
+/* Headings */
+
+.big-heading {
+    font-family: 'Montserrat-Black';
+    font-size: 3.5rem;
+    line-height: 1.5;
+}
+
+.big-heading-2 {
+    font-family: 'Montserrat-Black';
+    font-size: 2.0rem;
+    line-height: 1.5;
+    padding-top: 80px;
+}
+
+.container-fluid {
+    padding: 7% 15%;
+}
+
+
+/* Sections */
+
+.colored-section#title {
+    background-image: url("images/biking.jpg");
+}
+
+.colored-section {
+    background-color: #a77a32;
+    color: #ffffff;
+}
+
+.colored-section2 {
+    background-color: #34626c;
+    color: #ffffff;
+}
+
+.colored-section3 {
+    background-color: #cfd3ce;
+    color: #ffffff;
+}
+
+.white-section {
+    background-color: #ffffff;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: 'Montserrat-Bold';
+}
+
+h3 {
+    font-size: 1.5rem;
+}
+
+h5 {
+    font-size: 23px;
+}
+
+p {
+    color: rgb(77, 77, 77);
+    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 */
+
+.navbar {
+    padding: 0 0 4.5rem;
+}
+
+.section-heading {
+    font-size: 3rem;
+    line-height: 1.5;
+    color: #34626c
+}
+
+.navbar-brand {
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 2.5rem;
+    font-weight: bold;
+}
+
+.navbar-item {
+    padding: 0px 18px;
+}
+
+.navbar-link {
+    font-size: 1.2rem;
+    font-family: 'Montserrat-light', sans-serif;
+}
+
+#test {
+    color: rgb(236, 236, 236);
+}
+
+#test:hover {
+    color: rgb(216, 181, 24);
+}
+
+
+/* Download Buttons */
+
+.download-btn {
+    margin: 5% 3% 5% 0;
+}
+
+
+/* Title Section */
+
+#title .container-fluid {
+    padding: 3% 15% 7%;
+    text-align: left;
+}
+
+
+/* Title Image */
+
+.title-image {
+    width: 100%;
+    position: right;
+    right: 30%;
+}
+
+#features .container-fluid {
+    padding: 3% 5%;
+    text-align: left;
+}
+
+
+/* Worker profiles  */
+
+.profile {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+}
+
+.profile_names {
+    font-size: 25px;
+}
+
+.name_text {
+    font-weight
+}
+
+
+/* Features section */
+
+#features {
+    position: relative;
+    z-index: 1;
+}
+
+.feature-title {
+    font-size: 1.5rem;
+}
+
+.feature-box {
+    padding: 4%;
+}
+
+.feature-icon {
+    color: #34626c;
+    margin-bottom: 1rem;
+}
+
+.feature-icon:hover {
+    color: #839b97;
+}
+
+
+/* testimonial section */
+
+#testimonials {
+    background-color: #ef8172;
+}
+
+.testimonial-text {
+    font-size: 3rem;
+    line-height: 1.5;
+}
+
+.testimonial-img {
+    width: 10%;
+    border-radius: 100%;
+    margin: 20px;
+}
+
+.carousel-item {}
+
+
+/* Press section */
+
+#press {
+    background-color: #81ef72;
+    padding-bottom: 3%;
+}
+
+.press-img {
+    width: 15%;
+    margin: 20px 20px 50px;
+}
+
+
+/* Pricing Section */
+
+#pricing {
+    padding: 100px;
+}
+
+.price-text {
+    font-size: 3rem;
+    line-height: 1.5;
+}
+
+.pricing-col {
+    padding: 3% 2%;
+}
+
+
+/* CTA Section */
+
+#cta {
+    padding: 3% 7%
+}
+
+.map-img {
+    width: 70%;
+    height: 400px;
+    margin: 3% auto;
+}
+
+
+/*****Appointment Section *****/
+
+.request-label {
+    text-align: left;
+}
+
+input:invalid+span:after {
+    position: absolute;
+    content: '✖';
+    padding-left: 5px;
+    <<<<<<< HEAD
+}
+
+input:valid+span:after {
+    =======
+}
+
+input:valid+span:after {
+    position: absolute;
+    content: '✓';
+    padding-left: 5px;
+}
+
+.errorMsg {
+    color: red;
+}
+
+.accountLabel {
+    text-align: left;
+}
+
+
+/* Footer section */
+
+#footer {}
+
+.social-icon {
+    margin: 20px 10px;
+}
+
+.res {
+    text-align: center;
+}
+
+.rec {
+    text-align: center;
+}
+
+@media (max-width: 1028px) {
+    #title {
+        text-align: center;
+    }
+    .title-image {
+        position: static;
+        transform: rotate(0);
+    }
+}
+
+.colored-section#title {
+    background-image: url("images/biking.jpg");
+}
+
+
+/* Style inputs with type="text", select elements and textareas */
+
+input[type=text],
+select,
+textarea {
+    width: 100%;
+    /* Full width */
+    padding: 12px;
+    /* Some padding */
+    border: 1px solid #ccc;
+    /* Gray border */
+    border-radius: 4px;
+    /* Rounded borders */
+    box-sizing: border-box;
+    /* Make sure that padding and width stays in place */
+    margin-top: 6px;
+    /* Add a top margin */
+    margin-bottom: 16px;
+    /* Bottom margin */
+    resize: vertical/* Allow the user to vertically resize the textarea (not horizontally) */
+}
+
+
+/* Style the submit button with a specific background color etc */
+
+input[type=submit] {
+    background-color: #d60024;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+
+/* When moving the mouse over the submit button, add a darker green color */
+
+input[type=submit]:hover {
+    background-color: #fa4664;
+}

index.html

@@ -0,0 +1,464 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <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">
+  <!-- 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="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" />
+  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+  <link rel="stylesheet" href="/resources/demos/style.css">
+
+  <!-- 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">
+      <img src="images/logo2.png" style="float:left;width:42px;height:42px; margin-right:20px; margin-top:10px">
+
+      <!-- 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">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item">
+              <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-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>
+            </li>
+          </ul>
+        </div>
+      </nav>
+
+      <!-- Title -->
+
+      <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
+            Appointment</button>
+        </div>
+
+        <div class="col-lg-6">
+          <img class="title-image" src="images/bike_repair1.jpg" alt="bike repair">
+        </div>
+      </div>
+    </div>
+
+  </section>
+
+
+  <!-- Owner Bio -->
+
+  <section class="white-section" id="features">
+
+    <div class="container-fluid">
+
+      <h2 class="section-heading" style="text-align:center;"><i class="fas fa-users"></i> Meet the Team</h2>
+      <br>
+      <br>
+
+
+      <div class="row">
+
+        <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\owner_pic.jpg" alt="" class="profile">
+              </div>
+              <div class="col-md-8">
+                <div class="card-body">
+                  <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>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+        <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\mumen.jpg" alt="" class="profile">
+              </div>
+              <div class="col-md-8">
+                <div class="card-body">
+                  <h5 class="card-title"><i class="fas fa-id-card"></i> Mumem</h5>
+                  <p class="card-text">Without biking, my life has no meaning. I am
+                    the best at fixing punctures in town.</p>
+                  <p class="card-text"><small class="text-muted">Availability: Tuesday-Wednesday</small></p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+        <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>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+
+
+  </section>
+
+
+  <!-- Testimonials -->
+
+  <section class="colored-section2" id="colored-section2">
+    <div id="testimonial-carousel" class="carousel slide" data-ride="carousel">
+      <div class="carousel-inner">
+
+        <div class="carousel-item active container-fluid">
+          <h2 class="testimonial-text"> "Strong 10 from me. The service here is phenomenal." </h2>
+          <img class="testimonial-img" src="images\customers\Anthony.png" alt="dog-profile">
+          <em>Anthony Green</em>
+        </div>
+
+        <div class="carousel-item container-fluid">
+          <h2 class="testimonial-text">"Thanks to the folks over at Batuhan's Bikes, I just upgraded my old bike to a
+            new mountain bike. Love it!" </h2>
+          <img class="testimonial-img" src="images\customers\Dottie.jpg" alt="lady-profile">
+          <em>Dottie Bean</em>
+        </div>
+
+        <div class="carousel-item container-fluid">
+          <h2 class="testimonial-text">"Most people don't know me. If you ask any of my friends they will say I bike.
+            And the only place I trust to get my bikes are Batuhan's Bikes"</h2>
+          <img class="testimonial-img" src="images\customers\bobby.jpg" alt="lady-profile">
+          <em>Bob </em>
+        </div>
+
+        <div class="carousel-item container-fluid">
+          <h2 class="testimonial-text">"The squeeze has not squoze." </h2>
+          <img class="testimonial-img" src="images\customers\keith.png" alt="lady-profile">
+          <em>Keith Value</em>
+        </div>
+
+      </div>
+
+      <a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+      </a>
+    </div>
+
+
+  </section>
+
+  <!-- Pricing -->
+
+  <section class="white-section" id="pricing">
+
+    <h2 class="section-heading"><i class="fas fa-toolbox"></i> Our Services</h2>
+    <p>Simple and affordable price plans for your bike.</p>
+
+
+    <div class="row">
+      <div class="pricing-col col-lg-4 col-md-6">
+        <div class="card">
+          <div class="card-header">
+            <h3><i class="fas fa-screwdriver"></i> Brake Repair</h3>
+          </div>
+          <div class="card-body">
+            <h2 class="price-text">$47.95</h2>
+            <img class="title-image" src="images/brake.jpg" alt="bike1">
+
+            <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>
+
+      <div class="pricing-col col-lg-4 col-md-6">
+        <div class="card">
+          <div class="card-header">
+            <h3><i class="fas fa-wrench"></i> Fixing Punctures</h3>
+          </div>
+          <div class="card-body">
+            <h2 class="price-text">$59.95</h2>
+            <img class="title-image" src="images/tire.jpg" alt="bike2">
+            <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>
+
+
+      <div class="pricing-col col-lg-4 ">
+        <div class="card">
+          <div class="card-header">
+            <h3><i class="fas fa-tools"></i> Full Repair/Maintenance</h3>
+          </div>
+          <div class="card-body">
+            <h2 class="price-text">$79.95</h2>
+            <img class="title-image" src="images/maintenance.jpg" alt="bike3">
+            <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>
+    </div>
+  </section>
+
+
+  <!-- Call to Action -->
+
+  <section class="colored-section2" id="cta">
+    <div class="row">
+
+      <div class="col-12">
+        <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>
+          Email: info@cycosport.ca <br>
+        <p style="font-weight: bold; color: white;font-size:25px ">Buisness Hours: 8:30 - 22:00, Monday to Friday
+        <p>
+        </p>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-12">
+        <div id="googleMap" class="map-img"></div>
+      </div>
+
+
+    </div>
+
+
+    <script>
+      function myMap() {
+        var mapProp = {
+          center: new google.maps.LatLng(45.412085720162494, -75.68236814266143),
+          zoom: 18,
+        };
+        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>
+
+  </section>
+
+
+  <!--- Book an Appointment -->
+  <section class="white-section" id="appointment">
+    <div class="container-fluid">
+
+
+      <h2 class="big-heading"> <i class="far fa-clock"></i> Book an Appointment </h2>
+      <br>
+      <!-- Accordion for booking a service-->
+      <!--  -->
+      <form id="contactForm" method="post">
+
+        <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>
+            <!-- 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>
+        <br>
+        <br>
+        <button type="button" class="btn btn-lg btn-outline-success" id="submitButton" onclick="validateForm()">Submit</button>
+      </form>
+    </div>
+  </section>
+
+
+  <!-- Footer -->
+
+  <footer class="colored-section2" id="footer">
+    <div class="container-fluid">
+      <i class="social-icon fab fa-twitter"></i>
+      <i class="social-icon fab fa-facebook"></i>
+      <i class="social-icon fab fa-instagram"></i>
+      <i class="social-icon fas fa-envelope"></i>
+      <p style="color:white;">© Copyright SEG3125 - Group 3</p>
+    </div>
+  </footer>
+
+  <!--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>
+
+
+
+</html>

scripts/index.js

@@ -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();
+
+}