🛠️Tech Stack HTML 5 - for constructing the frontend CSS - For styling UI components Font Awesome- For adding UI icons Javascript- for implementing interactive functionalities Github Pages- For deploying the project
HTML Structure The HTML file (index.html) establishes the framework of the SmartCart web application. It encompasses various sections, each fulfilling a distinct function:
Navigation Bar: The navigation bar includes links to different sections of the application and features,Categories,Mens,Electronics,Womens etc buttons for user registration and Log in, now including a new Subscription Plan. Search Bar: Users can utilize the search bar to explore various products and services. Header: The header segment highlights the primary message of the application alongside an image and additional content.
Game: A new Gaming feature has been introduced, providing users with access to coupon codes.
CSS Styling The styles.css file contains styling directives aimed at enhancing the visual appeal and layout of the web application. These CSS rules ensure adaptability across diverse screen sizes, thereby ensuring a consistent user experience. Additionally, they enhance the presentation of category options.
JavaScript Functionality The script.js file encompasses JavaScript functions that introduce interactivity and functionality to the SmartCart web application:
🙌 Overview
On the landing page, users encounter various statistics and can interact with certain features. Users can seamlessly navigate to sections such as Sign-in, Sign-up, About Us, and Contact. Upon clicking the Registration button, users are directed to the login page. Clicking on the Sign-up button redirects users to the sign-up page, where they can input their details. When users click on a product, they are directed to the checkout form. Users can explore different elements of the page to discover various products and services.
🙌 Key Highlights Contact Functionality: The submit button's click event listener captures user input (name, phone number, email, and message) from the contact form. It constructs a mailto link with the user's information and the recipient's email address. Upon clicking the submit button, the function redirects the user to their default email client with the pre-filled message, allowing them to contact the SmartCart team effortlessly. This "Contact Us" functionality is implemented without relying on any backend technology, utilizing only JavaScript ,ensuring that customer queries are directly sent to the provided email address.
Navigation Links: Event listeners are integrated into the navigation links to facilitate smooth scrolling to different sections of the webpage. Clicking on a navigation link triggers a smooth scroll to the corresponding section.
Special Focus: Contact Functionality The "Contact Us" feature enables users to reach out to the SmartCart team directly from the web application. It enhances user engagement and streamlines communication between users and the application creators. The associated JavaScript function simplifies the process of submitting inquiries or concerns, making it convenient for users to connect with the SmartCart team.
To experience the live demo of SmartCart, please visit: https://octoecho.github.io/Sharangha-EC/ 🌊Contributors Crafted with ❤️ by team SHARANGHA Conclusion The SmartCart Final project showcases the fusion of HTML, CSS, and JavaScript to develop a responsive and interactive web application. Each component serves a specific role, contributing to the overall functionality and user experience of the application, enabling seamless communication between users and the application creators.