Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

text #3237

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

text #3237

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,23 @@ <h1>Ironhack Cart</h1>
<button class="btn btn-remove">Remove</button>
</td>
</tr>
<tr class="product">
<td class="name">
<span>Ironhack Beach Towel</span>
</td>
<td class="price">$<span>12.50</span></td>
<td class="quantity">
<input type="number" value="0" min="0" placeholder="Quantity" />
</td>
<td class="subtotal">$<span>0</span></td>
<td class="action">
<button class="btn btn-remove">Remove</button>
</td>
</tr>
<!-- Iteration 2: Add more products here -->
</tbody>
<tfoot>
<!-- <tr class="create-product">
<tr class="create-product">
<td>
<input type="text" placeholder="Product Name" />
</td>
Expand All @@ -47,7 +60,7 @@ <h1>Ironhack Cart</h1>
<td>
<button id="create" class="btn">Create Product</button>
</td>
</tr> -->
</tr>
</tfoot>
</table>
<p class="calculate-total">
Expand Down
47 changes: 42 additions & 5 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,45 @@
function updateSubtotal(product) {
console.log('Calculating subtotal, yey!');

//... your code goes here
let priceElement = product.querySelector(".price span");
let quantityElement = product.querySelector(".quantity input");

let price = priceElement.innerText;
let quantity = quantityElement.value;

let subtotalPrice = price * quantity;

let subtotalElement = product.querySelector(".subtotal span");
subtotalElement.innerText = subtotalPrice;
}

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


const products = document.querySelectorAll(".product");

for (let i = 0; i < products.length; i++){
updateSubtotal(products[i]);
}

// ITERATION 3
//... your code goes here

let total = 0

for(let i = 0; i < products.length; i++){
let subtotal = Number(products[i].querySelector('.subtotal span').innerText);
total += subtotal
}

let totalElement = document.querySelector("#total-value span");
totalElement.innerText = total
}

// ITERATION 4
Expand All @@ -26,12 +50,25 @@ function removeProduct(event) {
const target = event.currentTarget;
console.log('The target in remove is:', target);
//... your code goes here

const buttonClicked = target;
const productElement = buttonCliked.closest(".product");
let totalPrice = document.querySelector("#total-value span");
let productSubtotal = productElement.querySelector(".subtotal span");

newPrice = Number(totalPrice.innerText) - number(productSubtotal.innerText);
totalPrice.innerText = newPrice
productElement.remove();

}

// ITERATION 5

function createProduct() {
//... your code goes here

const newProductInput = document.querySelector(`tfoot tr td input[type="text"]`);
const newPriceInput = document.querySelector(`tfoot tr td input[type="number"]`);
}

window.addEventListener('load', () => {
Expand Down