JavaScript Project Breakdown Report
Project Title: Simple Shop Management
1. Project Description
The Simple Shop Management project is a web-based JavaScript application designed to
help small shops record daily transactions such as sales, supplies, and product summaries.
It provides a responsive interface to input, edit, and delete product records. It saves data
permanently using localStorage, auto-separates each day’s data, and includes a date selector
to view older records. It also features a visual bar chart to show which products were sold
most. The system works completely offline and does not require a backend.
2. JavaScript Code Explanation
1. Get Elements from the Page (DOM)
These lines find and store references to HTML elements so JavaScript can interact with
them.
```javascript
const form = document.getElementById("product-form");
const list = document.getElementById("product-list");
const summary = document.getElementById("summary");
const currentDay = document.getElementById("current-day");
const dateSelect = document.getElementById("date-select");
const chartCanvas = document.getElementById("salesChart");
```
2. Initial Data Setup
Load previously saved data and setup current variables.
```javascript
let products = JSON.parse(localStorage.getItem("products") || "[]");
let editIndex = null;
const today = new Date().toISOString().slice(0, 10);
```
3. Show Current Date
Displays today's date in readable format.
```javascript
currentDay.textContent = `Day ${today.replace(/-/g, '/')}`;
```
4. Save Data to Browser
Stores all product data in localStorage.
```javascript
const saveToStorage = () => {
localStorage.setItem("products", JSON.stringify(products));
};
```
5. Fill the Date Dropdown
Collects all unique days and fills the selector so older records can be accessed.
```javascript
const uniqueDates = [...new Set(products.map(p => p.date))];
dateSelect.innerHTML = ...;
```
6. Main Function: updateTable()
Displays product list, totals, and chart for selected day.
Handles:
- Resetting the UI
- Filtering records by date
- Calculating totals
- Generating table rows
- Creating the bar graph
7. Edit Product Function
Loads a product into the form so it can be modified.
```javascript
const editProduct = index => {
const p = products[index];
...
editIndex = index;
};
```
8. Delete Product Function
Removes a record and updates everything.
```javascript
products.splice(index, 1);
saveToStorage();
populateDateSelector();
updateTable();
```
9. Draw the Bar Chart
Shows visual comparison of total sold per product.
```javascript
new Chart(chartCanvas, {
type: 'bar',
data: { labels, datasets: [...] }
})
```
10. Form Submission Handling
Saves new or updated product to the data list and refreshes display.
```javascript
if (editIndex !== null) {
products[editIndex] = newProduct;
} else {
products.push(newProduct);
}
```
11. When You Change the Date Dropdown
Changes the current view to show that day's records.
```javascript
dateSelect.addEventListener('change', updateTable);
```
12. Initial Setup (Runs When Page Loads)
Loads saved data and sets up the view when the page is first opened.
```javascript
populateDateSelector();
updateTable();
```
Submitted by: Eyuel
Date: May 09, 2025
