From 2ec0cf8baa2f6e488d1802a893cc8ad1500465e1 Mon Sep 17 00:00:00 2001 From: zaira Date: Tue, 18 Mar 2025 22:10:54 +0500 Subject: [PATCH 1/5] add prototype and user stories --- coding-challenges/tip-calculator/index.html | 38 +++++++++ coding-challenges/tip-calculator/script.js | 38 +++++++++ coding-challenges/tip-calculator/styles.css | 78 +++++++++++++++++++ .../tip-calculator/user-stories.md | 11 +++ 4 files changed, 165 insertions(+) create mode 100644 coding-challenges/tip-calculator/index.html create mode 100644 coding-challenges/tip-calculator/script.js create mode 100644 coding-challenges/tip-calculator/styles.css create mode 100644 coding-challenges/tip-calculator/user-stories.md diff --git a/coding-challenges/tip-calculator/index.html b/coding-challenges/tip-calculator/index.html new file mode 100644 index 00000000..0bb90ab7 --- /dev/null +++ b/coding-challenges/tip-calculator/index.html @@ -0,0 +1,38 @@ + + + + + + Tip Calculator + + + + +
+

Tip Calculator

+
+

Tip: $0.00

+

Tip Per Person: $0.00

+

Total Amount: $0.00

+

Amount Per Person: $0.00

+
+ +
+ + + + + + + + + + + + +
+
+ + + + diff --git a/coding-challenges/tip-calculator/script.js b/coding-challenges/tip-calculator/script.js new file mode 100644 index 00000000..643f417f --- /dev/null +++ b/coding-challenges/tip-calculator/script.js @@ -0,0 +1,38 @@ +document.addEventListener("DOMContentLoaded", function () { + const calculateButton = document.getElementById("calculateBtn"); + const clearButton = document.getElementById("clearBtn"); + + calculateButton.addEventListener("click", calculateTip); + clearButton.addEventListener("click", clearFields); +}); + +function calculateTip() { + let price = parseFloat(document.getElementById("price").value); + let tipPercentage = parseFloat(document.getElementById("tipPercentage").value); + let numPeople = parseInt(document.getElementById("numPeople").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); + + document.getElementById("tipAmount").innerText = `$${totalTip}`; + document.getElementById("tipPerPerson").innerText = `$${tipPerPerson}`; + document.getElementById("totalAmount").innerText = `$${totalAmount}`; + document.getElementById("amountPerPerson").innerText = `$${amountPerPerson}`; +} + +function clearFields() { + document.getElementById("price").value = ""; + document.getElementById("tipPercentage").value = ""; + document.getElementById("numPeople").value = "1"; + document.getElementById("tipAmount").innerText = "$0.00"; + document.getElementById("tipPerPerson").innerText = "$0.00"; + document.getElementById("totalAmount").innerText = "$0.00"; + document.getElementById("amountPerPerson").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..950e17ce --- /dev/null +++ b/coding-challenges/tip-calculator/styles.css @@ -0,0 +1,78 @@ +body { + font-family: Arial, sans-serif; + background-color: #d5d1d1; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + width: 300px; + +} + +h2 { + background: #1e1a2e; + color: white; + padding: 10px; + border-radius: 5px; + margin-bottom: 20px; + text-align: center; +} + +.result { + background: #e0e5d7; + padding: 10px; + margin-bottom: 15px; + border-radius: 5px; +} + +.result p { + margin: 5px 0; +} + +.calculator { + display: flex; + flex-direction: column; +} + +label { + text-align: left; + margin-bottom: 5px; + font-weight: bold; +} + +input { + padding: 8px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + padding: 10px; + margin-top: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; +} + +button:first-of-type { + background: #1e1a2e; + color: white; +} + +button:last-of-type { + background: #a59898; + color: black; +} + +button:hover { + opacity: 0.9; +} diff --git a/coding-challenges/tip-calculator/user-stories.md b/coding-challenges/tip-calculator/user-stories.md new file mode 100644 index 00000000..0d36875d --- /dev/null +++ b/coding-challenges/tip-calculator/user-stories.md @@ -0,0 +1,11 @@ +Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. + +1. As a user, I want 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 want 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 want to click a "Calculate" button to compute the tip and total cost so that I can get the results. + +1. As a user, I want to reset all input fields and calculated values by clicking a "Clear" button so that I can start a new calculation easily. + +1. want to see the results calculated to 2 decimal places. \ No newline at end of file From 6e7d9653eeae583498e7d679a89fb501fe95a0af Mon Sep 17 00:00:00 2001 From: zaira Date: Wed, 19 Mar 2025 16:15:19 +0500 Subject: [PATCH 2/5] swap user stories --- coding-challenges/tip-calculator/user-stories.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/coding-challenges/tip-calculator/user-stories.md b/coding-challenges/tip-calculator/user-stories.md index 0d36875d..a5acc15e 100644 --- a/coding-challenges/tip-calculator/user-stories.md +++ b/coding-challenges/tip-calculator/user-stories.md @@ -2,10 +2,10 @@ Fulfill the below user stories and get all of the tests to pass. Use whichever l 1. As a user, I want 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 want 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 want to click a "Calculate" button to compute the tip and total cost so that I can get the results. +1. As a user, I want 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 want to reset all input fields and calculated values by clicking a "Clear" button so that I can start a new calculation easily. 1. want to see the results calculated to 2 decimal places. \ No newline at end of file From cf5cc13e3ef6e437fe8a1a67afaae34eb3aa7e69 Mon Sep 17 00:00:00 2001 From: zaira Date: Tue, 25 Mar 2025 19:58:58 +0500 Subject: [PATCH 3/5] modify user stories --- coding-challenges/tip-calculator/user-stories.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/coding-challenges/tip-calculator/user-stories.md b/coding-challenges/tip-calculator/user-stories.md index a5acc15e..9f1681d6 100644 --- a/coding-challenges/tip-calculator/user-stories.md +++ b/coding-challenges/tip-calculator/user-stories.md @@ -1,11 +1,11 @@ -Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. +Fulfill the below user stories. Feel free to give it your own personal style. -1. As a user, I want 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 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 want 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 click a "Calculate" button to compute the tip and total cost so that I can get the results. -1. As a user, I want 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 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 want 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 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. want to see the results calculated to 2 decimal places. \ No newline at end of file +1. As a user, I should see the results calculated to 2 decimal places. \ No newline at end of file From e6110c7b2534780e57a44889ad6bb2e2e383ff57 Mon Sep 17 00:00:00 2001 From: zaira Date: Wed, 2 Apr 2025 13:52:09 +0500 Subject: [PATCH 4/5] apply changes to structure --- coding-challenges/tip-calculator/index.html | 39 ++++++++++----- coding-challenges/tip-calculator/styles.css | 53 +++++++++++++++++---- 2 files changed, 71 insertions(+), 21 deletions(-) diff --git a/coding-challenges/tip-calculator/index.html b/coding-challenges/tip-calculator/index.html index 0bb90ab7..2cdd74aa 100644 --- a/coding-challenges/tip-calculator/index.html +++ b/coding-challenges/tip-calculator/index.html @@ -1,38 +1,51 @@ + Tip Calculator +
-

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/styles.css b/coding-challenges/tip-calculator/styles.css index 950e17ce..b2a64c85 100644 --- a/coding-challenges/tip-calculator/styles.css +++ b/coding-challenges/tip-calculator/styles.css @@ -5,24 +5,25 @@ body { justify-content: center; align-items: center; height: 100vh; + margin: 0; } .container { background: white; padding: 20px; border-radius: 10px; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); - width: 300px; - + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 320px; } -h2 { +h1 { background: #1e1a2e; color: white; padding: 10px; border-radius: 5px; margin-bottom: 20px; text-align: center; + font-size: 1.5rem; } .result { @@ -34,6 +35,7 @@ h2 { .result p { margin: 5px 0; + font-size: 1rem; } .calculator { @@ -41,17 +43,26 @@ h2 { flex-direction: column; } +.form-group { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; +} + label { - text-align: left; - margin-bottom: 5px; font-weight: bold; + font-size: 1rem; + flex: 1; + margin-right: 10px; } input { padding: 8px; - margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; + font-size: 1rem; + flex: 2; } button { @@ -60,7 +71,9 @@ button { border: none; border-radius: 5px; cursor: pointer; - font-size: 16px; + font-size: 1rem; + font-weight: bold; + width: 100%; } button:first-of-type { @@ -76,3 +89,27 @@ button:last-of-type { 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; + } +} From f21b6c9ff6bcbec167da994afc99c2e71a8c4afb Mon Sep 17 00:00:00 2001 From: zaira Date: Wed, 2 Apr 2025 13:56:22 +0500 Subject: [PATCH 5/5] cache global variables --- coding-challenges/tip-calculator/script.js | 78 +++++++++++++--------- 1 file changed, 48 insertions(+), 30 deletions(-) diff --git a/coding-challenges/tip-calculator/script.js b/coding-challenges/tip-calculator/script.js index 643f417f..f96aa88c 100644 --- a/coding-challenges/tip-calculator/script.js +++ b/coding-challenges/tip-calculator/script.js @@ -1,38 +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", calculateTip); - clearButton.addEventListener("click", clearFields); -}); + calculateButton.addEventListener("click", function (event) { + event.preventDefault(); + calculateTip(); + }); + + clearButton.addEventListener("click", function (event) { + event.preventDefault(); + clearFields(); + }); -function calculateTip() { - let price = parseFloat(document.getElementById("price").value); - let tipPercentage = parseFloat(document.getElementById("tipPercentage").value); - let numPeople = parseInt(document.getElementById("numPeople").value); + 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; + 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}`; } - 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); - - document.getElementById("tipAmount").innerText = `$${totalTip}`; - document.getElementById("tipPerPerson").innerText = `$${tipPerPerson}`; - document.getElementById("totalAmount").innerText = `$${totalAmount}`; - document.getElementById("amountPerPerson").innerText = `$${amountPerPerson}`; -} - -function clearFields() { - document.getElementById("price").value = ""; - document.getElementById("tipPercentage").value = ""; - document.getElementById("numPeople").value = "1"; - document.getElementById("tipAmount").innerText = "$0.00"; - document.getElementById("tipPerPerson").innerText = "$0.00"; - document.getElementById("totalAmount").innerText = "$0.00"; - document.getElementById("amountPerPerson").innerText = "$0.00"; -} + 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"; + } +});