Skip to content

Clever Niwagaba - Internship #85

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
Clever-Niwagaba wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Clever Niwagaba - Internship #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
69d1594
Solved Lab
Clever-Niwagaba Oct 31, 2024
4b1cbf2
Solved lab
Clever-Niwagaba Oct 31, 2024
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
131 changes: 72 additions & 59 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="./css/style.css" />
<title>Root Cart</title>
</head>
<body>
<h1>Root Cart</h1>
<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>
</table>
<p class="calculate-total">
<button id="calculate" class="btn btn-success">Calculate Prices</button>
</p>
<h2 id="total-value">Total: $<span>0</span></h2>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="./css/style.css" />
<title>Root Cart</title>
</head>
<body>
<h1>Root Cart</h1>
<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 -->
<tr class="product">
<td class="name">
<span>Root PlayStation</span>
</td>
<td class="price">$<span>500</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>
<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>
</table>
<p class="calculate-total">
<button id="calculate" class="btn btn-success">Calculate Prices</button>
</p>
<h2 id="total-value">Total: $<span>0</span></h2>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
129 changes: 87 additions & 42 deletions js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,87 @@
// ITERATION 1

function updateSubtotal(product) {
console.log('Calculating subtotal, yey!');

//... 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

// ITERATION 2
//... your code goes here

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

// ITERATION 4

function removeProduct(event) {
const target = event.currentTarget;
console.log('The target in remove is:', target);
//... your code goes here
}

// ITERATION 5

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

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

//... your code goes here
});
// ITERATION 1

function updateSubtotal(product) {
console.log('Calculating subtotal, yey!');

//... your code goes here
const price = parseFloat(product.querySelector('.price span').textContent);
const quantity = parseInt(product.querySelector('.quantity input').value);
const subtotal = price * quantity;
const subtotalElement = product.querySelector('.subtotal span');
subtotalElement.textContent = subtotal.toFixed(2);
return subtotal;
}

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

// ITERATION 2
//... your code goes here
const products = document.querySelectorAll('.product');
let total = 0;

// ITERATION 3
//... your code goes here
products.forEach((product) => {
total += updateSubtotal(product);
});

document.querySelector('#total-value span').textContent = total.toFixed(2);
}

// ITERATION 4
function addRemoveEventListeners() {
const removeButtons = document.querySelectorAll('.btn-remove');
removeButtons.forEach((button) => {
button.addEventListener('click', removeProduct);
});
}

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.parentNode.removeChild(productRow);
calculateAll();
}

// ITERATION 5

function createProduct() {
//... your code goes here
const nameInput = document.querySelector('.create-product input[type="text"]');
const priceInput = document.querySelector('.create-product input[type="number"]');

const name = nameInput.value;
const price = 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>${name}</span></td>
<td class="price">$<span>${price}</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>
`;
tableBody.appendChild(newRow);
const removeButton = newRow.querySelector('.btn-remove');
removeButton.addEventListener('click', removeProduct);
nameInput.value = '';
priceInput.value = 0;
}

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

//... your code goes here
const createProductBtn = document.getElementById('create');
createProductBtn.addEventListener('click', createProduct);
});