Skip to content

Commit 01ffbd4

Browse files
Loule95450Loule95450
committed
✏️ - Adding comments, updating stocks
1 parent be6c836 commit 01ffbd4

2 files changed

Lines changed: 90 additions & 72 deletions

File tree

‎js/app.js‎

Lines changed: 76 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,57 @@
11
// On document load, execute the following code
2-
document.addEventListener('DOMContentLoaded', function () {
3-
console.image('https://avatars.githubusercontent.com/u/91029631')
4-
5-
showAllProducts('.courses__container', COURSES);
6-
2+
document.addEventListener('DOMContentLoaded', function () { // On document load, execute the following code
3+
console.image('https://avatars.githubusercontent.com/u/91029631') // Console log the image
74

85
for (var i = 0; i < COURSES.length; i++) { // Loop through all courses
9-
10-
if (localStorage.getItem(`inCart-${COURSES[i].id}`)) {
11-
productItemsInCart(COURSES[i], JSON.parse(localStorage.getItem(`inCart-${COURSES[i].id}`)));
6+
if (localStorage.getItem(`inCart-${COURSES[i].id}`)) { // Check if product is already in cart
7+
COURSES[i].stock = COURSES[i].stock - JSON.parse(localStorage.getItem(`inCart-${COURSES[i].id}`)).productsInCart; // Update the stock quantity
8+
productItemsInCart(COURSES[i], JSON.parse(localStorage.getItem(`inCart-${COURSES[i].id}`))); // Set the product in cart
129
}
1310
}
11+
12+
showAllProducts('.courses__container', COURSES); // Show all products
1413
});
1514

16-
function addToCart(id) {
15+
function addToCart(id) { // Add product to cart function
1716
console.log(`Tu as ajouté le produit ${id}`); // Console log the product i
1817

19-
// Get the product
20-
let product = getProductDetails(Number(id));
18+
let product = getProductDetails(Number(id)); // Get the product details
2119

22-
if (product.stock <= 0) {
23-
alert(`Ìl n'y a plus de stock dispo`);
24-
return;
25-
} else {
26-
product.stock--;
27-
document.querySelector(`.stock-${product.id}`).innerHTML = product.stock;
20+
if (product.stock <= 0) { // If stock is 0 or less
21+
notification(`Il n'y a plus de stock dispo`); // Alert the user with notification
22+
return; // Return
23+
} else { // Otherwise
24+
product.stock--; // Decrease 1 to the product in cart
25+
document.querySelector(`.stock-${product.id}`).innerHTML = product.stock; // Display the new stock
2826
}
2927

3028
// Check if product is already in cart
3129
const productCartName = `inCart-${product.id}`; // Set the product cart name
3230
let cart = localStorage.getItem(productCartName); // Get the product cart
3331
if (cart) { // If the product cart exists
34-
// Add product to cart
32+
3533
cart = JSON.parse(cart); // Parse the product cart
3634
cart.productsInCart++; // Add 1 to the product in cart
3735
localStorage.setItem(productCartName, JSON.stringify(cart)); // Set the product cart
3836

3937
// Update the cart
40-
console.log(product.slug + '-inCart');
38+
console.log(product.slug + '-inCart'); // Console log the product slug
4139
document.querySelector(`.${product.slug}-inCart`).innerHTML = cart.productsInCart; // Update the product in cart
4240

4341
} else { // If the product cart doesn't exist
4442
// Add product to cart
4543
cart = { "productsInCart": 1 }; // Create the product cart
4644
localStorage.setItem(productCartName, JSON.stringify(cart)); // Set the product cart
4745

48-
productItemsInCart(product, cart);
46+
productItemsInCart(product, cart); // Add the product in cart
4947
}
5048
// Show notification
5149
notification(`Vous avez ajouté ${product.title} au panier`); // Run notification function
5250
}
53-
//Pop up notification
51+
52+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
53+
// All Functions
54+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
5455

5556
function notification(message) { // Function to show notification
5657
// Show notification
@@ -66,7 +67,7 @@ function notification(message) { // Function to show notification
6667
}, 3000);
6768
}
6869

69-
function productItems(querySelector, product) {
70+
function productItems(querySelector, product) { // Function allowing to display in HTML the products in home page
7071
document.querySelector(querySelector).innerHTML += `
7172
<div class="course__item">
7273
<figure class="course_img">
@@ -91,13 +92,13 @@ function productItems(querySelector, product) {
9192
`;
9293
}
9394

94-
function showAllProducts(querySelector, products) {
95-
for (var i = 0; i < products.length; i++) {
96-
productItems(querySelector, products[i]);
95+
function showAllProducts(querySelector, products) { // Function allowing get All Products and Show them
96+
for (var i = 0; i < products.length; i++) { // Loop through all courses
97+
productItems(querySelector, products[i]); // Show all products
9798
}
9899
}
99100

100-
function productItemsInCart(product, cart) {
101+
function productItemsInCart(product, cart) { // Function allowing to display in HTML the products in the cart
101102
document.querySelector('#cart-table tbody').innerHTML += `
102103
<tr data-id="${product.id}" class="product-${product.id}">
103104
<td><img src="img/courses/${product.img}" alt="${product.title} image"></td>
@@ -109,53 +110,70 @@ function productItemsInCart(product, cart) {
109110
`;
110111
}
111112

112-
function getProductDetails(id) {
113-
for (var i = 0; i < COURSES.length; i++) {
114-
if (COURSES[i].id === id) {
115-
return COURSES[i];
113+
function getProductDetails(id) { // Function allowing to have the information of a product
114+
for (var i = 0; i < COURSES.length; i++) { // Loop through all courses
115+
if (COURSES[i].id === id) { // Check if the product correspond to the id
116+
return COURSES[i]; // Return the product
116117
}
117118
}
119+
120+
return null; // Or return null
118121
}
119122

120-
//vider le panier
123+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
124+
// All Buttons
125+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
126+
document.addEventListener('click', function (e) { // On click, execute the following code
127+
if (e.target.classList.contains('add-to-cart')) { // If the user clicks on the add-to-cart button, execute the following code
128+
//----------------------------------------------------//
129+
// This button allows you to add an item to the cart //
130+
//--------------------------------------------------//
121131

122-
// On button click add product to cart
123-
document.addEventListener('click', function (e) {
124-
if (e.target.classList.contains('add-to-cart')) {
125132
addToCart(e.target.dataset.id); // Add to cart
126-
} else if (e.target.classList.contains('empty-cart')) {
127-
for (var i = 0; i < COURSES.length; i++) {
128-
const getItem = JSON.parse(localStorage.getItem(`inCart-${COURSES[i].id}`));
129133

130-
if (getItem !== null) {
131-
COURSES[i].stock += getItem.productsInCart;
134+
} else if (e.target.classList.contains('empty-cart')) { // If the user clicks on the empty-cart button, execute the following code
135+
//----------------------------------------------------//
136+
// This button allows you to delete all the items in //
137+
// the cart. //
138+
//-------------------------------------------------//
139+
140+
for (var i = 0; i < COURSES.length; i++) { // Loop through all courses
141+
const getItem = JSON.parse(localStorage.getItem(`inCart-${COURSES[i].id}`)); // Get the product in cart
142+
143+
if (getItem !== null) { // Check if the product is already in the cart
144+
COURSES[i].stock += getItem.productsInCart; // Increment the quantity of the product in stock
132145
console.log("Stock " + COURSES[i].stock);
133146

134-
document.querySelector(`.stock-${COURSES[i].id}`).innerHTML = COURSES[i].stock;
147+
document.querySelector(`.stock-${COURSES[i].id}`).innerHTML = COURSES[i].stock; // Display the new stock
135148
}
136149
}
137150

138-
localStorage.clear();
139-
document.querySelector('#cart-table tbody').innerHTML = "";
140-
141-
} else if (e.target.classList.contains('fa-trash')) {
142-
let idTrash = e.target.parentNode.parentNode.dataset.id;
143-
let product = getProductDetails(Number(idTrash));
151+
localStorage.clear(); // Clear the localStorage
152+
document.querySelector('#cart-table tbody').innerHTML = ""; // Clear cart
153+
154+
} else if (e.target.classList.contains('fa-trash')) { // If the user clicks on the fr-trash button, execute the following code
155+
//----------------------------------------------------//
156+
// This button allows you to remove an item from //
157+
// your cart //
158+
//-------------------------------------------------//
159+
160+
let idTrash = e.target.parentNode.parentNode.dataset.id; // Get the product id
161+
let product = getProductDetails(Number(idTrash)); // Get the product details
144162

145-
product.stock++;
146-
document.querySelector(`.stock-${idTrash}`).innerHTML = product.stock;
163+
product.stock++; // Add 1 to the product stock
164+
document.querySelector(`.stock-${idTrash}`).innerHTML = product.stock; // Display the new stock
147165

148-
let getItem = JSON.parse(localStorage.getItem(`inCart-${idTrash}`));
166+
let getItem = JSON.parse(localStorage.getItem(`inCart-${idTrash}`)); // See how many times the product is in the cart
149167

150-
if (getItem.productsInCart <= 1) {
151-
localStorage.removeItem(`inCart-${idTrash}`);
152-
document.querySelector(`.${e.target.parentNode.parentNode.classList[0]}`).remove();
153-
} else {
154-
getItem.productsInCart--;
155-
localStorage.setItem(`inCart-${idTrash}`, JSON.stringify(getItem));
156-
document.querySelector(`.${product.slug}-inCart`).innerHTML = getItem.productsInCart;
168+
if (getItem.productsInCart <= 1) { // If only 1 product is in the cart
169+
localStorage.removeItem(`inCart-${idTrash}`); // Remove the product from the localStorage
170+
document.querySelector(`.${e.target.parentNode.parentNode.classList[0]}`).remove(); // Remove the product from the cart
171+
} else { // Otherwise
172+
getItem.productsInCart--; // Decrease 1 to the product in cart
173+
localStorage.setItem(`inCart-${idTrash}`, JSON.stringify(getItem)); // Remove the product from the localStorage
174+
document.querySelector(`.${product.slug}-inCart`).innerHTML = getItem.productsInCart; // Remove the product from the cart
157175
}
158-
159-
176+
} else if (e.target.classList.contains('ordre')){
177+
160178
}
161179
});

‎js/search.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
// search bar
22

3-
document.querySelector('form.search-form input').addEventListener('input', function (e) {
3+
document.querySelector('form.search-form input').addEventListener('input', function (e) { // If a change in the search bar is detected, run the function
44

5-
var input, filter;
6-
input = e.target.value;
7-
filter = input.toUpperCase();
5+
var input, filter; // Inizialize variables
6+
input = e.target.value; // Get the value of the search bar
7+
filter = input.toUpperCase(); // Convert the value to uppercase
88

9-
document.querySelector("#courses-list .courses__container").innerHTML = "";
9+
document.querySelector("#courses-list .courses__container").innerHTML = ""; // Clear results
1010

11-
if(input){
12-
for(let i = 0; i < COURSES.length; i++){
13-
if(COURSES[i].title.toUpperCase().includes(filter)){
14-
productItems('#courses-list .courses__container', COURSES[i]);
11+
if(input){ // If the input is not empty
12+
for(let i = 0; i < COURSES.length; i++){ // Loop through all courses
13+
if(COURSES[i].title.toUpperCase().includes(filter)){ // If the course title includes the value of the search bar
14+
productItems('#courses-list .courses__container', COURSES[i]); // Show the product
1515

16-
document.querySelector('#no_course').classList.add('hidden');
17-
} else if(!document.querySelector("#courses-list .courses__container").innerHTML){
18-
document.querySelector('#no_course').classList.remove('hidden');
16+
document.querySelector('#no_course').classList.add('hidden'); // Hide the no results message
17+
} else if(!document.querySelector("#courses-list .courses__container").innerHTML){ // Otherwise, if there are no results
18+
document.querySelector('#no_course').classList.remove('hidden'); // Show the no results message
1919
}
2020
}
21-
} else {
22-
showAllProducts('.courses__container', COURSES);
21+
} else { // Otherwise, if the input is empty
22+
showAllProducts('.courses__container', COURSES); // Show all products
2323
}
2424
});
2525

0 commit comments

Comments
 (0)