STEM Center JavaScript Project Report
Project Title: Simple Shop Management System
1. Introduction
JavaScript is a fundamental language in modern web development, offering interactivity and
logic control on the client side. This project, Simple Shop Management System,
demonstrates how core JavaScript concepts can be applied to create a real-world mini-
market management tool. The project is designed to manage daily shop transactions such as
adding products, tracking sales and supplies, and analyzing product performance.
2. Statement of the Problem
Most beginner JavaScript learners lack opportunities to apply what they’ve learned in
practical, real-world projects. This project addresses that gap by applying JavaScript’s
essential features in the context of a mini-market management application. It simulates
realistic use cases like form handling, data grouping, and visualization.
3. Objectives
The objective of this project is to apply and demonstrate mastery over JavaScript
fundamentals. Specifically:
- Use variable declarations with `var`, `let`, and `const`
- Handle string, numeric, and object data types
- Build and reuse functions (traditional and arrow)
- Create and manipulate objects and arrays
- Use array and string methods
- Control logic with if-else and switch-case
- Implement loop structures (forEach)
- Explore Sets and Maps for data summarization
- Understand hoisting and scope
- Implement asynchronous functions with `async/await`
- Use modern JS (arrow functions, DOM interaction, localStorage)
4. Significance of the Project
This project is significant for reinforcing JavaScript programming skills through real
application. It also helps improve logical reasoning by letting users build a multi-page
system with data persistence, interactive form handling, conditional logic, chart generation,
and date-based filtering. It empowers learners to become more confident and project-ready.
5. Explanation of JavaScript Concepts (A–L)
A. Variable Declarations
`var`, `let`, and `const` are all demonstrated. `var` is shown for historical reference.
```javascript
let products = [...];
const form = [Link]("product-form");
var oldVariable = "This is var";
```
B. Data Types and Operators
String, number, and object types are used. Operators like `+=`, `||`, and comparison
operators are applied.
```javascript
totalSold += parseFloat([Link] || 0);
const isToday = [Link] === today;
```
C. Functions
Both traditional and arrow functions are used.
```javascript
function updateTable() { ... }
const saveToStorage = () => { ... }
```
D. Objects
Each product is stored as a JS object with keys like product, quantity, date, etc.
```javascript
const newProduct = { product, quantity, supplier, ... };
```
E. String and Array Methods
Includes `forEach()`, `map()`, `push()`, `splice()`, `join()`, and `toLowerCase()`.
```javascript
[Link](p => { ... });
const filtered = [Link](p => [Link]().includes(filter));
```
F. Control Structures
Conditional checks are used for filtering and logic branching.
```javascript
if (editIndex !== null) { ... } else { ... }
if () [Link]([Link], []);
```
G. Looping Structures
The project uses loops via `forEach()` and `map()`.
```javascript
[Link]((p, i) => { ... });
```
H. Sets and Maps
Used for tracking unique values and grouping.
```javascript
const productTypes = new Set();
const productSalesMap = new Map();
```
J. Hoisting
Functions are defined before use to avoid hoisting issues. The `var` example shows hoisting
implicitly.
```javascript
var oldVariable = "demo";
```
K. Arrow Functions
Used for conciseness and cleaner syntax.
```javascript
[Link] = async (e) => { ... };
const deleteProduct = (index) => { ... };
```
L. Async/Await & Asynchronous Code
Asynchronous saving is simulated using a delay and `await`.
```javascript
const fakeAsyncSave = async () => {
await new Promise(resolve => setTimeout(resolve, 300));
};
```
Submitted by: Eyuel
Date: May 12, 2025