Harmony Home Designs, a simulated interior design service provider, is built using Express.js, jQuery, HTML, and CSS. This endeavor serves as a practical playground for refining skills in jQuery, a widely-used JavaScript library.
- Homepage: Animated counting numbers using jQuery was applied under the 'hero' section of the homepage. The code iterates over each selected element using
each() function and retrieves the target count value from it's 'data-count' attribute. Then animates the count from the current value of the element to the target count value using jQuery'sanimate() function'. - Homepage: jQuery slick carousel was applied to the "services" section of the homepage. A customizable carousel/slider plugin that allows you to create responsive, touch-enabled carousels with smooth transitions.
- Homepage: In the last section before the footer section, Magnific Popup, a jQuery lightbox plugin was added to display a variety of photos. A fun way to make the gallery capture the user's attention.
- Responsive Design: Harmony Home Designs is designed to be responsive across various devices and screen sizes. Enjoy a consistent and user-friendly experience!
- HTML
- CSS
- jQUERY
- EXPRESS JS
Harmony Home Designs is deployed on render. Check it out here.
- Lightbox plugin: a type of JS plugin used to create modal windows or overlays that display contents: images or videos, on top of the main webpage.
It took nearly a week to finish this frontend project. I enjoyed learning about jQuery as it provided a concise and easy-to-use syntax for selecting and manipulating HTML elements in the DOM. I particularly enjoyed jQuery's extensive beginner-friendly plugin ecosystem.