BATO

Description of the project:

   This project is an illustration of my web development skills, including the use of HTML, CSS, JavaScript and PHP to create a functional online store aimed at selling tool boxes and related tools.

Main Characteristics of the Project:

  1. Dynamic Loading of Goods.
  2. Filtering and Searching.
  3. Use of Cookies.
  4. Filling boxes.
  5. Order processing.
  6. Processing Changes and
  7. Returns.

   The front page of the site uses PHP to retrieve data from the database and converts the data into JSON. Using fetch API methods in JavaScript, this data is loaded asynchronously and the products displayed on the page are dynamically formed.

   The ability to filter products based on various characteristics, such as color, size, and the presence of wheels near the drawer, has been implemented. This is achieved using event handlers that respond to the client’s selection of filters.

   To ensure that customer choices are saved between pages and sessions, we use the cookie mechanism. Information about selected boxes and tools is stored in cookies, allowing customers to comfortably work with the site. Thanks to this approach, visitors to the site can not worry about losing their data due to accidental closing of the tab, all information will be saved.

   On the second page of our online store, users have the option to customize the contents of their selected toolboxes. This functionality was developed using the JavaScript programming language and cookie mechanisms to create a more flexible and user-friendly environment.

   Selection Uniqueness: One of the important technical aspects of this page is to guarantee the uniqueness of the tool selection for filling boxes. This is achieved by carefully managing cookies and checking the presence of the tool in selected boxes. If the tool is already on one of the shelves of the selected box, it becomes unavailable to add to the others. This prevents unwanted duplication of tools.

   Dynamic Update: When users select tools to fill the bin, the page dynamically updates to reflect the current status of the selected shelves. This includes adding and removing tools from the shelves and locking the shelf when it is completely full. Users see changes in real time, making the process more interactive.

Saving selections: We use cookies to store information about the selected tools, the selected tools on the shelves and the total cost. This allows users to save their progress even if the page is accidentally reloaded. When the user returns to the page, their selection is reset and they can continue in the same state.

This aspect of development demonstrates data processing and session management skills, which are essential elements of creating interactive Internet applications. Such functionality provides user comfort and confidence in the selection of goods, making the whole process more intuitive and satisfying.

The third page gives customers the opportunity to place an order by filling out a form with contact information. After sending the form, the order is transferred to the seller, and the cookies are cleared.

At all stages of development, we provided mechanisms for returning customers to previous pages and changing the selection of products, as well as processing their actions.

This project is proof of my ability to create interactive and functional web applications using advanced methods and technologies. If you are interested in discussing the technical aspects of this project in detail or are considering new web development challenges, please feel free to contact me.

Click here

My works

  • All
  • HTML/CSS/JavaScript
  • WordPress