From 2d06256445dc32ef607316dd03a5457c442f8cb9 Mon Sep 17 00:00:00 2001 From: VictorMartins Date: Thu, 26 Sep 2024 00:43:54 +0200 Subject: [PATCH 1/2] Final 1 --- css/style.css | 4 ++ index.html | 32 +++++++++------ src/index.js | 112 ++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 132 insertions(+), 16 deletions(-) diff --git a/css/style.css b/css/style.css index 573203ac9..caf1baae4 100644 --- a/css/style.css +++ b/css/style.css @@ -65,3 +65,7 @@ h2, .calculate-total { text-align: center; } + +#create { + background-color: forestgreen; +} diff --git a/index.html b/index.html index 883839837..15fc2680e 100644 --- a/index.html +++ b/index.html @@ -20,22 +20,29 @@

Ironhack Cart

- - Ironhack Rubber Duck - + Ironhack Rubber Duck $25.00 - - - + $0 - - - + + + + Ironhack Rubber Dog + $13.00 + + $0 + + + + Spotify + $7.00 + + $0 + - - +

@@ -55,5 +62,6 @@

Ironhack Cart

Total: $0

+ diff --git a/src/index.js b/src/index.js index 75405d6cf..dae605d03 100644 --- a/src/index.js +++ b/src/index.js @@ -4,20 +4,32 @@ function updateSubtotal(product) { console.log('Calculating subtotal, yey!'); //... your code goes here + const price = product.querySelector('.price span'); + const quantity = product.querySelector('.quantity input'); + let total = quantity.value * price.innerText; + let totalHTML = product.querySelector('.subtotal span'); + totalHTML.innerText = total; + return total; } function calculateAll() { // code in the following two lines is added just for testing purposes. // it runs when only iteration 1 is completed. at later point, it can be removed. - const singleProduct = document.querySelector('.product'); - updateSubtotal(singleProduct); + // const singleProduct = document.querySelector('.product'); + // updateSubtotal(singleProduct); // end of test // ITERATION 2 - //... your code goes here + let total = 0; + const multipleProducts = document.getElementsByClassName("product"); + for (let i = 0; i < multipleProducts.length; i++) { + total += updateSubtotal(multipleProducts[i]); + } + // ITERATION 3 - //... your code goes here + document.querySelector('#total-value span').innerText = total; + } // ITERATION 4 @@ -26,12 +38,96 @@ function removeProduct(event) { const target = event.currentTarget; console.log('The target in remove is:', target); //... your code goes here + const elementRemove = target.parentNode.parentNode; + elementRemove.remove(); } // ITERATION 5 +function addLine(name, cost){ + let table = document.getElementById('cart'); + let line; + + line = document.createElement('tr'); + line.setAttribute("class", "product"); + + let cell = document.createElement('td'); + cell.setAttribute("class", "name"); + + let input = document.createElement('span'); + input.innerText = name + + cell.appendChild(input); + line.appendChild(cell); + + cell = document.createElement('td'); + cell.innerText = "$"; + cell.setAttribute("class", "price"); + + + input = document.createElement('span'); + input.innerText = parseFloat(cost).toFixed(2); + + + cell.appendChild(input); + line.appendChild(cell); + + + cell = document.createElement('td'); + cell.setAttribute("class", "quantity"); + + input = document.createElement('input'); + input.setAttribute("type", "number"); + input.setAttribute("min", "0"); + input.value = 0; + + + cell.appendChild(input); + line.appendChild(cell); + + + cell = document.createElement('td'); + cell.innerText = "$" + cell.setAttribute("class", "subtotal"); + input = document.createElement('span'); + input.innerText = 0; + + cell.appendChild(input); + line.appendChild(cell); + + + cell = document.createElement('td'); + cell.setAttribute("class", "action"); + + input = document.createElement('button'); + input.innerText = "Remove"; + input.setAttribute("class", "btn btn-remove"); + input.addEventListener('click', createProduct) + + cell.appendChild(input); + line.appendChild(cell); + + table.appendChild(line); + +} + + function createProduct() { //... your code goes here + const newProduct = document.getElementsByClassName("create-product"); + let productName = newProduct[0].querySelectorAll('td input')[0]; + let productValue = newProduct[0].querySelectorAll('td input')[1]; + + + if (productName.value !== "" && productValue.value !== ""){ + console.log(productName.value + " and costs " + productValue.value); + + let newLine = document.createElement('h3'); + addLine(productName.value, productValue.value); + + productName.value = ""; + productValue.value = ""; + } } window.addEventListener('load', () => { @@ -39,4 +135,12 @@ window.addEventListener('load', () => { calculatePricesBtn.addEventListener('click', calculateAll); //... your code goes here + + const removeButtons = document.querySelectorAll('.action .btn.btn-remove'); + for (let i = 0; i < removeButtons.length; i++) { + removeButtons[i].addEventListener('click', removeProduct); + } + + const addProductButton = document.getElementById("create"); + addProductButton.addEventListener('click', createProduct) }); From 7049e403cdf6087837c0734130f2b896f23aa144 Mon Sep 17 00:00:00 2001 From: Victor Martins Date: Fri, 27 Sep 2024 00:50:00 +0200 Subject: [PATCH 2/2] Solved lab --- index.html | 14 +++++++------- src/index.js | 20 ++++++++++++-------- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 15fc2680e..eacaf5655 100644 --- a/index.html +++ b/index.html @@ -23,21 +23,21 @@

Ironhack Cart

Ironhack Rubber Duck $25.00 - $0 + $0.00 Ironhack Rubber Dog $13.00 - $0 + $0.00 Spotify $7.00 - $0 + $0.00 @@ -47,12 +47,12 @@

Ironhack Cart

- + - + @@ -60,8 +60,8 @@

Ironhack Cart

-

Total: $0

+

Total: $0.00

- + diff --git a/src/index.js b/src/index.js index dae605d03..be1d52077 100644 --- a/src/index.js +++ b/src/index.js @@ -46,20 +46,23 @@ function removeProduct(event) { function addLine(name, cost){ let table = document.getElementById('cart'); - let line; + let line, cell, input; + // Defining a line of the Table line = document.createElement('tr'); line.setAttribute("class", "product"); - let cell = document.createElement('td'); + //First Cell + cell = document.createElement('td'); cell.setAttribute("class", "name"); - let input = document.createElement('span'); + input = document.createElement('span'); input.innerText = name cell.appendChild(input); line.appendChild(cell); + // Second Cell cell = document.createElement('td'); cell.innerText = "$"; cell.setAttribute("class", "price"); @@ -72,20 +75,20 @@ function addLine(name, cost){ cell.appendChild(input); line.appendChild(cell); - + // Third Cell cell = document.createElement('td'); cell.setAttribute("class", "quantity"); input = document.createElement('input'); input.setAttribute("type", "number"); - input.setAttribute("min", "0"); + input.setAttribute("min", "0.00"); input.value = 0; cell.appendChild(input); line.appendChild(cell); - + // Fourth Cell cell = document.createElement('td'); cell.innerText = "$" cell.setAttribute("class", "subtotal"); @@ -95,18 +98,19 @@ function addLine(name, cost){ cell.appendChild(input); line.appendChild(cell); - + // Fith Cell cell = document.createElement('td'); cell.setAttribute("class", "action"); input = document.createElement('button'); input.innerText = "Remove"; input.setAttribute("class", "btn btn-remove"); - input.addEventListener('click', createProduct) + input.addEventListener('click', removeProduct) cell.appendChild(input); line.appendChild(cell); + console.log(line); table.appendChild(line); }