Skip to content

Solved Lab by Saqhib #86

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.

Sign up for GitHub

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

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

Solved Lab by Saqhib #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,4 +64,4 @@ h1,
h2,
.calculate-total {
text-align: center;
}
}
117 changes: 66 additions & 51 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="./css/style.css" />
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Root Cart</title>
</head>
<body>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>Root Cart</h1>

<!-- Cart Table -->
<table id="cart">
<thead>
<tr>
<th>Product Name</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Subtotal</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="product">
<td class="name">
<span>Root Rubber Duck</span>
</td>
<td class="price">$<span>25.00</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">
<td>
<input type="text" placeholder="Product Name" />
</td>
<td>
<input type="number" min="0" value="0" placeholder="Product Price" />
</td>
<td></td>
<td></td>
<td>
<button id="create" class="btn">Create Product</button>
</td>
</tr> -->
</tfoot>
<thead>
<tr>
<th>Product Name</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Subtotal</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="product">
<td class="name">
<span>Root Rubber Duck</span>
</td>
<td class="price">$<span>25.00</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>

<tr class="product">
<td class="name">
<span>Root T-shirt</span>
</td>
<td class="price">$<span>15.00</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>
</tbody>
</table>
<p class="calculate-total">
<button id="calculate" class="btn btn-success">Calculate Prices</button>
<button id="calculate" class="btn btn-success">Calculate Prices</button>
<h2>Total: $<span id="total">0</span></h2>
</p>
<h2 id="total-value">Total: $<span>0</span></h2>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>

<!-- Form to Add New Products -->
<h2>Add a new product</h2>
<form id="add-product-form">
<label for="product-name">Product Name:</label>
<input type="text" id="product-name" required placeholder="Enter product name" />

<label for="product-price">Unit Price:</label>
<input type="number" id="product-price" required placeholder="Enter unit price" min="0.01" step="0.01" />

<button type="submit">Add Product</button>
</form>



<script src="js/index.js"></script>
</body>
</html>
72 changes: 56 additions & 16 deletions js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,81 @@

function updateSubtotal(product) {
console.log('Calculating subtotal, yey!');
const price = product.querySelector('.price span').innerText;
const quantity = product.querySelector('.quantity input').value;
const subtotal = parseFloat(price) * parseInt(quantity);

const subtotalElement = product.querySelector('.subtotal span');
subtotalElement.innerText = subtotal.toFixed(2);

return subtotal;

//... your code goes here
}

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);
// end of test
const products = document.getElementsByClassName('product');
let total = 0;

// ITERATION 2
//... your code goes here
for (let product of products) {
total += updateSubtotal(product);
}

// ITERATION 3
//... your code goes here
document.getElementById('total').innerText = total.toFixed(2);
}

// ITERATION 4

function removeProduct(event) {
const target = event.currentTarget;
console.log('The target in remove is:', target);
//... your code goes here
const productRow = event.currentTarget.parentNode.parentNode;
productRow.remove();
calculateAll(); // Update total after removing a product
}

// ITERATION 5

function createProduct() {
//... your code goes here
event.preventDefault();

const nameInput = document.getElementById('product-name');
const priceInput = document.getElementById('product-price');

const productName = nameInput.value;
const productPrice = parseFloat(priceInput.value).toFixed(2);

const tableBody = document.querySelector('#cart tbody');

const newRow = document.createElement('tr');
newRow.classList.add('product');

newRow.innerHTML = `
<td class="name"><span>${productName}</span></td>
<td class="price">$<span>${productPrice}</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>
`;

// Add the new product row to the cart
tableBody.appendChild(newRow);

// Add event listener for the new remove button
newRow.querySelector('.btn-remove').addEventListener('click', removeProduct);

// Clear input fields after adding
nameInput.value = '';
priceInput.value = '';
}

window.addEventListener('load', () => {
const calculatePricesBtn = document.getElementById('calculate');
calculatePricesBtn.addEventListener('click', calculateAll);

//... your code goes here
});
const removeButtons = document.querySelectorAll('.btn-remove');
removeButtons.forEach(button => {
button.addEventListener('click', removeProduct);
});

// Event listener for adding new products
const addProductForm = document.getElementById('add-product-form');
addProductForm.addEventListener('submit', addProduct);
});