Bright Dental is a website project made to market an established
dental clinic in the Chicago area.
The website has a bright and crisp theme that creates a pristine
vibe for the visitor. Blue and white color theme is used to
showcase hygiene and professionalism to attract potential clients.
This is a mobile friendly website and employs responsive design.
Main sections of the Bright Dental website inlude Hero carousel,
Who We Are, Services, Team, Facilities, FAQ, Contact, and a
Appointment Booking Form with a submission confirmation modal.
Bootstrap and jQuery libraries have been used for light animations
and form validations to enhance user experience.
This form validates on both fast feedback and submit button
click. Fast feedback validation is triggered on blurring of the
inputs: as focus is lost, green border will appear for valid
input, and red border along with error message will appear for
invalid input. Upon submitting the form, inputs will be checked
again with the 'Book Appointment' button click under the same
validation criteria.
The form will only submit if all
input fields are valid, a confirmation modal will appear after
submission and input fields will return to the default state.
jQuery and Javascript are used to implement this form
validation.
Fading animation is triggered when visitor scrolls down the
website. Select elements that come into view upon scrolling will
fade in.
To implement this feature, a 'fadein' class
with initial 'opacity' value of 0 is created in CSS and added to
the select elements that will fade in. Using jQuery, the
'fadein' class elements will then fade in upon entering the
viewport via scrolling.
Mobile navigation button will show up on the top right corner
when media query hits mobile navigation width. Mobile menu will
slide in from the top upon clicking the mobile navigation
button.
To collapse the mobile menu, simply click the
mobile navigation button again. Note that by clicking on one of
the nav links on the mobile menu, the mobile menu will
automatically collapse upon jumping to that nav link.
Bootstrap
and jQuery are used to implement this feature.
Bright Dental was designed and built from scratch. Bootstrap and jQuery libraries were utilized to improve development effiency and enhance user experience. Of all the features, developing the appointment booking form validation algorithm in jQuery was the most enjoyable experience. Below summaries the potential improvements to add to the project in the future:
Create more content such as detailed webpages for services and dentists to generate a more complete website experience.
Consider adding more interative features such as multimedia, animated Call-to-Action and loading images in sequence, etc.
Consider employing content management system to build dynamic features such as account database and patient history, etc.