/Kanap

Primary LanguageJavaScript

Image

Kanap

Build an e-commerce Website with JavaScript



JavaScript

About the project

The Kanap E-commerce Website project involved the development of a fully functional e-commerce website. The backend has already been developed, and the goal was to dynamically integrate API elements into the different web pages using JavaScript.

Techonologies

  • JavaScript Methods: setAttribute(name, value), appendChild(), createElement() were employed for manipulating the DOM.
  • Fetch Method: Used for making GET and POST requests to the API.
  • Window Location: The window.location.search and urlSearchParams.get methods were used for working with URL parameters.
  • LocalStorage: Utilized methods such as localStorage.getItem(), localStorage.setItem(), JSON.parse(), and JSON.stringify() for storing and retrieving data.

Backend Prerequisites and Installation

Before proceeding with the project, ensure that you have Node.js and npm (Node Package Manager) installed on your local machine.

To set up the backend, please follow these steps:

Clone this repository to your local machine. Navigate to the "back" folder of the project. Run the command npm install to install the necessary dependencies. Start the server by running node server. By default, the server should run on localhost with port 3000. If the server is running on a different port, the specific port number will be displayed in the console when the server starts (e.g., "Listening on port 3001").

API Usage and Functionality

Throughout the development of the Kanap E-commerce Website, the following features and functionalities were implemented:

  • Utilization of API endpoints through GET and POST requests.
  • Manipulation of the Document Object Model (DOM) to add, delete, and modify various elements dynamically.
  • Implementation of URLSearchParams for working with URL parameters.
  • Usage of LocalStorage methods to store and retrieve data.

Project Documentation

For detailed information about the project, including functional specifications and requirements, please refer to the Functional Specifications document.