Building a Product Management System Using JavaScript 🛒💻

My JavaScript learning project involved creating a simple Product Management System using HTML, CSS, and JavaScript. This exercise allowed me to grasp essential concepts such as arrays, objects, functions, and CRUD operations. The project featured four fundamental operations: adding, viewing, updating, and deleting a product. These actions are collectively referred to as CRUD operations.

To create a product, an object was used to store its details. For instance, a Laptop with a price of 50000 was defined as follows: let product = { name : "Laptop", price : 50000 }; The object was then logged to the console to view its contents: console.log(product);

Multiple products were stored in an array. This array contained objects, each representing a product with its name and price, like so: let products = [ { name : "Laptop", price : 50000 }, { name : "Mouse", price : 500 } ]; The console was once again utilized to display the array: console.log(products);

Adding a product was accomplished by utilizing the push() method, which appends a new product to the end of the array. In this case, a Keyboard priced at 1000 was added: products.push({ name : "Keyboard", price : 1000 });

Updating a product's price was straightforward. By referencing the desired product within the array and assigning a new value to its price property, the Laptop's price was adjusted from 50000 to 45000: products[0].price = 45000;

To delete a product, the splice() method was employed. This method removes a specified number of elements from the array, starting at a given index. For example, the second product was removed from the array: products.splice(1, 1);

Throughout this project, I reinforced my understanding of key JavaScript concepts, including objects, arrays, functions, and the CRUD operations. These operations were accomplished using methods such as push() and splice(). Additionally, I practiced employing loops to manage product data efficiently.

In summary, this project served as a practical demonstration of how JavaScript fundamentals can be combined to create a functional Product Management System. By following the structured learning approach of Learn → Practice → Build, I was able to gain valuable insights into the integration of various JavaScript concepts in a real-world application. This hands-on experience was instrumental in solidifying my understanding of JavaScript and its practical applications in web development.