Neko E-com: A Vanilla JavaScript E-commerce Frontend

About

Neko E-com is a clean, responsive, and fully functional e-commerce landing page built entirely with vanilla HTML, CSS, and JavaScript.

The core functionalities are handled client-side, making it lightweight and easy to understand.

Key Features:

• Dynamic Product Rendering: Products are loaded from a JavaScript array and dynamically rendered onto the page, making the product list easily scalable.

• Interactive Shopping Cart: Users can add items to a shopping cart, which updates the total price in real-time.

• Cart Management: Items can be removed from the cart, and the UI reflects these changes instantly.

• Responsive Design: The layout is fully responsive and adapts seamlessly to mobile, tablet, and desktop screens using modern CSS Flexbox and Media Queries.

• Zero Dependencies: The entire project is self-contained and runs without any external libraries like jQuery, React, or Vue.

• Simulated Forms: A functional contact form that captures user input and simulates a submission.

🛠️ Technologies Used

• HTML5: For the structure and semantics of the webpage.

• CSS3: For all styling, layout, and responsiveness.

• JavaScript (ES6+): For all interactivity and logic.

⚙️ How to Set Up and Run

This project is very simple to set up as it has no build process or dependencies.

• Prerequisites

  A modern web browser (e.g., Google Chrome, Firefox, Microsoft Edge).

  A code editor (e.g., Visual Studio Code) for viewing or modifying the code.

• Running Locally

  Download or Clone the Project:

    Option A (ZIP): Download the project files as a ZIP and extract them to a folder on your computer.
  
    Option B (Git): Clone the repository to your local machine using the command:
  
    git clone [https://github.com/arjunharshana/my-ecom.git]
  

  Navigate to the Project Directory: Open the folder where you extracted or cloned the files. The folder should contain:

  • index.html
  • style.css
  • scripts.js
  • images folder

  Open the Application: Simply double-click the index.html file. It will open directly in your default web browser, and the application will be running.

📝 Special Instructions & Notes

Form Submissions

The contact form is for demonstration purposes only. When submitted, it prevents the default browser refresh and shows a JavaScript alert() message. It does not send data to a server or an email address.

Dependencies

This project has no external dependencies. Everything you need is included in the three main files (index.html, style.css, scripts.js).

🌐 Deployed URL

Here is the deployed URL of the project for direct viewing: Neko E-Com