diff --git a/css/styles.css b/css/styles.css index 607914d..7d7b3a2 100644 --- a/css/styles.css +++ b/css/styles.css @@ -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) { diff --git a/index.html b/index.html index 2a568df..7ede4cb 100644 --- a/index.html +++ b/index.html @@ -5,40 +5,24 @@ Batuhan's Bikes - + - + - - - - - - + - - - + + + + + - -
@@ -47,8 +31,7 @@
@@ -317,151 +293,150 @@
-

Book an Appointment

+

Book an Appointment

+
-
-
-
-
- -
-
+ +
-
-
-

Services

-

Please select services you require

- -
-

Mechanics

-

Please select your technican

- -
- -

Appointment Time

-

Please select an appointment time

-
- - - - - - - -
-
-
-
-
-
-
- -
-
-
-
-

Contact Information

-
-
-
- -
- - - +
+ +
+
+
+ +
-
- - + +
+
+

Services

+

Please select services you require

+ + + +
+

Mechanics

+

Please select your technican

+ + +

+
+ +

Appointment Time

+

Please select an appointment time

+ +
+ + +

+
+ + + +

+
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+

Contact Information

+

Please fill the spaces below with your contact information

+ +
+
+
+ + +

+
+
+ + +

+
+
+
+
+
+
+ + +

+
+
+ + +

+
+
+
+
+

Payment Information

+

Please fill the spaces below with your payment information

+
+
+
+ + +

+
+
+ + +

+
+
+
+
+
+
+ + +

+
+
+ + +

+
+
+
+
-
-
-
- - -
-
- - -
-
-
-
- -

Please provide your credit card information to guarantee your service appointment.

-

Account Details

- -

Payment Information

-

Please fill the spaces below with your payment information

- -
-
-
- - -
-
- - -
-
-
-
-
-
- - -
-
- - -
-
- -
+
+
+
-
-
- -
-
-
- - - -
@@ -477,44 +452,10 @@
- - - - + + + + diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 0000000..f5e884d --- /dev/null +++ b/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(); + +}