diff --git a/coding-challenges/tip-calculator/index.html b/coding-challenges/tip-calculator/index.html new file mode 100644 index 00000000..2cdd74aa --- /dev/null +++ b/coding-challenges/tip-calculator/index.html @@ -0,0 +1,51 @@ + + + + + + + Tip Calculator + + + + + +
+

Tip Calculator

+
+

Tip: $0.00

+

Tip Per Person: $0.00

+

Total Amount: $0.00

+

Amount Per Person: $0.00

+
+ +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ + + +
+ +
+
+ + + + + \ No newline at end of file diff --git a/coding-challenges/tip-calculator/script.js b/coding-challenges/tip-calculator/script.js new file mode 100644 index 00000000..f96aa88c --- /dev/null +++ b/coding-challenges/tip-calculator/script.js @@ -0,0 +1,56 @@ +document.addEventListener("DOMContentLoaded", function () { + + const priceInput = document.getElementById("price"); + const tipPercentageInput = document.getElementById("tipPercentage"); + const numPeopleInput = document.getElementById("numPeople"); + + const tipAmountDisplay = document.getElementById("tipAmount"); + const tipPerPersonDisplay = document.getElementById("tipPerPerson"); + const totalAmountDisplay = document.getElementById("totalAmount"); + const amountPerPersonDisplay = document.getElementById("amountPerPerson"); + + const calculateButton = document.getElementById("calculateBtn"); + const clearButton = document.getElementById("clearBtn"); + + calculateButton.addEventListener("click", function (event) { + event.preventDefault(); + calculateTip(); + }); + + clearButton.addEventListener("click", function (event) { + event.preventDefault(); + clearFields(); + }); + + function calculateTip() { + let price = parseFloat(priceInput.value); + let tipPercentage = parseFloat(tipPercentageInput.value); + let numPeople = parseInt(numPeopleInput.value); + + if (isNaN(price) || isNaN(tipPercentage) || isNaN(numPeople) || numPeople <= 0) { + alert("Please enter valid values."); + return; + } + + let totalTip = (price * (tipPercentage / 100)).toFixed(2); + let tipPerPerson = (totalTip / numPeople).toFixed(2); + let totalAmount = (price + parseFloat(totalTip)).toFixed(2); + let amountPerPerson = (totalAmount / numPeople).toFixed(2); + + tipAmountDisplay.innerText = `$${totalTip}`; + tipPerPersonDisplay.innerText = `$${tipPerPerson}`; + totalAmountDisplay.innerText = `$${totalAmount}`; + amountPerPersonDisplay.innerText = `$${amountPerPerson}`; + } + + function clearFields() { + priceInput.value = ""; + tipPercentageInput.value = ""; + numPeopleInput.value = "1"; + + tipAmountDisplay.innerText = "$0.00"; + tipPerPersonDisplay.innerText = "$0.00"; + totalAmountDisplay.innerText = "$0.00"; + amountPerPersonDisplay.innerText = "$0.00"; + } +}); diff --git a/coding-challenges/tip-calculator/styles.css b/coding-challenges/tip-calculator/styles.css new file mode 100644 index 00000000..b2a64c85 --- /dev/null +++ b/coding-challenges/tip-calculator/styles.css @@ -0,0 +1,115 @@ +body { + font-family: Arial, sans-serif; + background-color: #d5d1d1; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 320px; +} + +h1 { + background: #1e1a2e; + color: white; + padding: 10px; + border-radius: 5px; + margin-bottom: 20px; + text-align: center; + font-size: 1.5rem; +} + +.result { + background: #e0e5d7; + padding: 10px; + margin-bottom: 15px; + border-radius: 5px; +} + +.result p { + margin: 5px 0; + font-size: 1rem; +} + +.calculator { + display: flex; + flex-direction: column; +} + +.form-group { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; +} + +label { + font-weight: bold; + font-size: 1rem; + flex: 1; + margin-right: 10px; +} + +input { + padding: 8px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 1rem; + flex: 2; +} + +button { + padding: 10px; + margin-top: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 1rem; + font-weight: bold; + width: 100%; +} + +button:first-of-type { + background: #1e1a2e; + color: white; +} + +button:last-of-type { + background: #a59898; + color: black; +} + +button:hover { + opacity: 0.9; +} + +@media (max-width: 480px) { + .container { + width: 90%; + padding: 15px; + } + + h1 { + font-size: 1.25rem; + } + + input, button { + font-size: 0.9rem; + } + + .form-group { + flex-direction: column; + align-items: flex-start; + } + + label { + margin-bottom: 5px; + } +} diff --git a/coding-challenges/tip-calculator/user-stories.md b/coding-challenges/tip-calculator/user-stories.md new file mode 100644 index 00000000..9f1681d6 --- /dev/null +++ b/coding-challenges/tip-calculator/user-stories.md @@ -0,0 +1,11 @@ +Fulfill the below user stories. Feel free to give it your own personal style. + +1. As a user, I should be able to enter a bill amount, tip percentage, and the number of people sharing the bill so that I can calculate the total cost per person. + +1. As a user, I should be able to click a "Calculate" button to compute the tip and total cost so that I can get the results. + +1. As a user, I should be able to to see the calculated tip amount, tip per person, total amount including the tip, and the total amount per person so that I can understand the cost breakdown. + +1. As a user, I should be able to to reset all input fields and calculated values by clicking a "Clear" button so that I can start a new calculation easily. + +1. As a user, I should see the results calculated to 2 decimal places. \ No newline at end of file