Scribd
Upload
5 views2 pages

JS Concepts Breakdown Report

The document outlines the implementation of various JavaScript concepts in a Simple Shop Management project. Key concepts include variable declarations, data types, functions, and control structures, all applied to manage product data effectively. It highlights the use of modern JavaScript features like arrow functions, sets, and maps for enhanced functionality.

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
5 views2 pages

JS Concepts Breakdown Report

The document outlines the implementation of various JavaScript concepts in a Simple Shop Management project. Key concepts include variable declarations, data types, functions, and control structures, all applied to manage product data effectively. It highlights the use of modern JavaScript features like arrow functions, sets, and maps for enhanced functionality.

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/ 2

STEM Center JavaScript Project

Breakdown
Project: Simple Shop Management
Below is a detailed explanation of how each JavaScript concept (A–K) was applied in the
project.

A. Variable Declarations
We used `let` and `const` properly across the project:
- `const form = document.getElementById('product-form')` defines fixed references to DOM
elements.
- `let products = []` is declared with `let` since the array will be updated.
- `let editIndex = null` is used to track the editing state.

B. Data Types and Operators


- String inputs from form fields (like product name, supplier, type) are handled.
- Numbers are parsed using `parseFloat()` before arithmetic operations (like summing sold
quantities).
- Operators are used to increment total sales and total revenue: `+=` inside loops.

C. Functions
- Traditional function: `function updateTable() {...}` handles table rendering.
- Arrow function: `form.onsubmit = (e) => {...}` is used for event handling.
- Other arrow functions handle product editing and chart rendering.

D. Objects
- Products are stored as JavaScript objects in an array. Each object has keys like:
`{ product, quantity, supplier, type, sold, soldPrice, date, soldTime, suppliedTime }`.
- New product objects are pushed to the `products[]` array.

E. String and Array Methods


- `.value` is used to get string input values from form fields.
- `.forEach()` loops through the products array to populate the table.
- `.push()` adds new items; `.splice()` removes items by index.

F. Control Structures
- `if (editIndex !== null)` determines whether to edit or add a new entry.
- `if (p.date !== today) return;` ensures only today's data is shown.
G. Looping Structures
- `forEach()` is used to process product data.
- Looping helps calculate totals and fill the chart data.

H. Sets and Maps


- `Set` is used to count unique product types: `new Set(products.map(p => p.product))`.
- `Map` is used to group total quantity sold per product for the chart.

J. Hoisting
- Variables are declared at the top before use to avoid hoisting issues.
- Functions like `updateTable()` and `renderChart()` are defined before they are used to
maintain clarity.

K. Arrow Functions
- Used extensively for concise function expressions:
`const deleteProduct = index => {...}`, `form.onsubmit = e => {...}`

Submitted by: Eyuel


Date: May 09, 2025

You might also like