Scribd
Upload
4 views4 pages

Final Shop Management JS Report

The Simple Shop Management System project demonstrates the application of JavaScript fundamentals in a real-world context, focusing on managing shop transactions. It addresses the lack of practical opportunities for beginner JavaScript learners by incorporating essential features such as data handling, logic control, and asynchronous functions. The project aims to enhance programming skills and confidence through the development of a multi-page system with interactive functionalities.

Uploaded by

eyuelmengistub
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views4 pages

Final Shop Management JS Report

The Simple Shop Management System project demonstrates the application of JavaScript fundamentals in a real-world context, focusing on managing shop transactions. It addresses the lack of practical opportunities for beginner JavaScript learners by incorporating essential features such as data handling, logic control, and asynchronous functions. The project aims to enhance programming skills and confidence through the development of a multi-page system with interactive functionalities.

Uploaded by

eyuelmengistub
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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 = document.getElementById("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(p.sold || 0);
const isToday = p.date === 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
products.forEach(p => { ... });
const filtered = records.filter(p => p.product.toLowerCase().includes(filter));
```
F. Control Structures
Conditional checks are used for filtering and logic branching.

```javascript
if (editIndex !== null) { ... } else { ... }
if (!map.has(p.date)) map.set(p.date, []);
```

G. Looping Structures
The project uses loops via `forEach()` and `map()`.

```javascript
records.forEach((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
form.onsubmit = 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

You might also like