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.

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

Root cart lab assignment complete #80

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

Root cart lab assignment complete #80

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: 2 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,5 @@ h2,
.calculate-total {
text-align: center;
}


115 changes: 65 additions & 50 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>

<!-- 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>
81 changes: 59 additions & 22 deletions js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,79 @@
// ITERATION 1

// Function to update the subtotal of a product
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);

//... your code goes here
return subtotal;
}

// Function to calculate the total of all products
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 to remove a product from the cart
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 to create a new product row and append to the table
function addProduct(event) {
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);

function createProduct() {
//... your code goes here
// Add event listener for the new remove button
newRow.querySelector('.btn-remove').addEventListener('click', removeProduct);

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

// Setup event listeners on page load
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);
});