diff --git a/projects/tip-calculator/index.html b/projects/tip-calculator/index.html index 029457b..a4a3aa8 100644 --- a/projects/tip-calculator/index.html +++ b/projects/tip-calculator/index.html @@ -1,28 +1,63 @@ - - - - + + + + Tip Calculator - - - + + +
-

Tip Calculator

-

Enter the bill amount and tip percentage to calculate the total.

- - -
- - -
- -
- - - +

Tip Calculator

+

Enter the bill amount and tip percentage to calculate the total.

+ + + + + + + + + + + + + + + + + + + +
NamePriceUnitMoneyAction
+ + + + + + + + + +
+ +
+ + +
+ + +
+ + +
+ + +
+ +
- - \ No newline at end of file + + diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js index 98cb079..7be25f1 100644 --- a/projects/tip-calculator/index.js +++ b/projects/tip-calculator/index.js @@ -1,13 +1,143 @@ -const btnEl = document.getElementById("calculate"); -const billInput = document.getElementById("bill"); +const productTable = document.getElementById("product-table"); +const productRows = productTable.children; + +const btnAddProduct = document.getElementById("add-product"); const tipInput = document.getElementById("tip"); + +const btnCalculate = document.getElementById("calculate"); +const btnClean = document.getElementById("clean"); + +const subtotalSpan = document.getElementById("subtotal"); +const finalTipSpan = document.getElementById("final-tip"); const totalSpan = document.getElementById("total"); +function addRow() { + const htmlString = ` + + + + + + + + + + + + + + + + `; + + const row = document.createElement("tr"); + row.innerHTML = htmlString; + const priceInput = row.children[1].firstElementChild; + const unitInput = row.children[2].firstElementChild; + const btnRemove = row.children[4].firstElementChild; + priceInput.addEventListener("focusout", () => calculateRow(row)); + unitInput.addEventListener("focusout", () => calculateRow(row)); + btnRemove.addEventListener("click", () => removeRow(row)); + + productTable.appendChild(row); +} + +function removeRow(row) { + productTable.removeChild(row); +} + +function calculateRow(row) { + const priceValue = row.children[1].firstElementChild.value; + const unitValue = row.children[2].firstElementChild.value; + const totalValue = priceValue * unitValue; + const moneySpan = row.children[3].firstElementChild; + moneySpan.innerText = totalValue; +} + function calculateTotal() { - const billValue = billInput.value; + let subTotal = 0; + for (let row = 0; row < productRows.length; row++) { + const priceValue = productRows[row].children[1].firstElementChild.value; + const unitValue = productRows[row].children[2].firstElementChild.value; + subTotal += priceValue * unitValue; + } + + subtotalSpan.innerText = subTotal; + const tipValue = tipInput.value; - const totalValue = billValue * (1 + tipValue / 100); - totalSpan.innerText = totalValue.toFixed(2); + + if (tipValue < 20) { + const finalTipValue = (subTotal * tipValue) / 100; + const totalValue = subTotal * (1 + tipValue / 100); + finalTipSpan.innerText = finalTipValue.toFixed(2); + totalSpan.innerText = totalValue.toFixed(2); + finalTipSpan.classList.remove("error-highlight"); + totalSpan.classList.remove("error-highlight"); + } else { + finalTipSpan.innerText = "The tip is abusive"; + totalSpan.innerText = "The tip is abusive"; + finalTipSpan.classList.add("error-highlight"); + totalSpan.classList.add("error-highlight"); + } + + const order = { products: [], tip: parseFloat(tipValue) }; + + for (let row = 0; row < productRows.length; row++) { + const productId = parseInt( + productRows[row].children[0].firstElementChild.value + ); + const units = parseInt( + productRows[row].children[2].firstElementChild.value + ); + const product = { productId, units }; + order.products.push(product); + } + sendOrder(order); +} + +const sendOrder = (order) => { + const url = "http://127.0.0.1:8000/order/"; + + fetch(url, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(order), + }) + .then((response) => response.json()) + .then((data) => { + console.log("Success:", data); + }) + .catch((error) => { + console.error("Error:", error); + }); +}; + +function cleanTotal() { + for (let row = 0; row < productRows.length; row++) { + productRows[row].children[0].firstElementChild.value = null; + productRows[row].children[1].firstElementChild.value = null; + productRows[row].children[2].firstElementChild.value = null; + productRows[row].children[3].firstElementChild.innerText = null; + } + + tipInput.value = null; + subtotalSpan.innerText = null; + finalTipSpan.innerText = null; + totalSpan.innerText = null; +} + +for (let rowNumber = 0; rowNumber < productRows.length; rowNumber++) { + const row = productRows[rowNumber]; + const priceInput = row.children[1].firstElementChild; + const unitInput = row.children[2].firstElementChild; + const btnRemove = row.children[4].firstElementChild; + priceInput.addEventListener("focusout", () => calculateRow(row)); + unitInput.addEventListener("focusout", () => calculateRow(row)); + btnRemove.addEventListener("click", () => removeRow(row)); } -btnEl.addEventListener("click", calculateTotal); +btnAddProduct.addEventListener("click", addRow); +btnCalculate.addEventListener("click", calculateTotal); +btnClean.addEventListener("click", cleanTotal); diff --git a/projects/tip-calculator/style.css b/projects/tip-calculator/style.css index 786e129..1dff52d 100644 --- a/projects/tip-calculator/style.css +++ b/projects/tip-calculator/style.css @@ -2,6 +2,19 @@ box-sizing: border-box; } +table { + font-family: arial, sans-serif; + border-collapse: collapse; + width: 100%; +} + +td, +th { + border: 1px solid #dddddd; + text-align: left; + padding: 15px; +} + body { background-color: #f2f2f2; font-family: "Helvetica", sans-serif; @@ -30,7 +43,6 @@ input { } button { - background-color: #4caf50; color: white; padding: 10px; border: none; @@ -42,12 +54,28 @@ button { transition: background-color 0.2s ease; } -button:hover { - background-color: #45a049; +.btn-success { + background-color: #4caf50; +} + +.btn-success:hover { + background-color: #021f02; +} + +.btn-danger { + background-color: #890303; +} + +.btn-danger:hover { + background-color: #220202; +} + +.error-highlight { + color: #890303; } #total { font-size: 24px; font-weight: bold; margin-top: 10px; -} +} \ No newline at end of file