Description
This project is a website designed to provide comprehensive health services and consultations for individuals seeking a healthier lifestyle. The project incorporates HTML, CSS, and JavaScript to create a responsive and interactive user experience.
Technologies Used: HTML, CSS, JavaScript
Challenges and Solutions
Lazy Loading Images: To optimize page loading times, lazy loading images were implemented. This required incorporating the Intersection Observer API in JavaScript to load images only when they come into the viewport.
Navigation: Implementing smooth scrolling and active navigation highlighting for the menu involved handling click events and using scrollIntoView. The navigation menu also features a fade animation on hover, achieved through CSS.
Modal Implementation: Creating a modal for appointment booking involved handling events for opening, closing, and submitting the form. JavaScript was utilized to manage modal interactions, including event listeners and dynamic content.
Tabbed Component: The consultations section features a tabbed component. JavaScript event handling ensures the correct content is displayed when a tab is clicked, enhancing the user experience.
Sticky Navigation: The navigation bar becomes sticky when scrolling down. The Intersection Observer API was employed to trigger this behavior based on the user’s scroll position.
Slider for Testimonials: Implementing a slider for testimonials required JavaScript functions to navigate between slides and dynamically update the active dot. This enhances the presentation of user testimonials on the website.