diff --git a/index.html b/index.html index 5c09e8d..8421223 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,8 @@ Frontend Mentor | Tip calculator app - + + +
+
+ +
+
+ +
+ +
+ dollar icon + +
+ +
+ + + + + + + +
+ +
+ person icon + +
+
- Bill - - Select Tip % - 5% - 10% - 15% - 25% - 50% - Custom - - Number of People - - Tip Amount - / person - - Total - / person - - Reset + +
+
+

Tip Amount
/person

+

$0.00

+
+
+

Total
/person

+

$0.00

+
+ +
+
+
+ \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..06bbfbd --- /dev/null +++ b/index.js @@ -0,0 +1,63 @@ +let tipPercentage = 0; + +const SetTip = (tip) => { + tipPercentage = tip; + resetCustom(); + calculate(); +}; + +const resetCustom=()=>{ + const customInput = document.getElementById('custom-tip'); + customInput.value = ''; + customInput.style.display = 'none'; + document.getElementById('custom-btn').style.display = 'inline'; +}; + +document.getElementById('custom-btn').addEventListener('click', () => { + const customInput = document.getElementById('custom-tip'); + document.getElementById('custom-btn').style.display = 'none'; + customInput.style.display = 'inline'; + customInput.focus(); + + customInput.addEventListener('input', () => { + const customTip = parseFloat(customInput.value) || 0; + tipPercentage = customTip; + calculate(); + }); + +}); + +// calculation and update +const calculate = () => { + const bill = parseFloat(document.getElementById('bill').value) || 0; + const people = parseInt(document.getElementById('people').value); + + if (bill > 0 && people > 0 && tipPercentage >= 0) { + const tipAmount = (bill * tipPercentage) / 100 / people; + const total = (bill / people) + tipAmount; + + document.getElementById('tip-amount').textContent = `$${tipAmount.toFixed(2)}`; + document.getElementById('total').textContent = `$${total.toFixed(2)}`; + + } + else { + // Reset values to $0.00 if bill or people are invalid + document.getElementById('tip-amount').textContent = '$0.00'; + document.getElementById('total').textContent = '$0.00'; + } +}; + +const resetCalculator = () => { + document.getElementById('bill').value = ''; + document.getElementById('people').value = ''; + document.getElementById('custom-tip').value = ''; + document.getElementById('tip-amount').textContent = '$0.00'; + document.getElementById('total').textContent = '$0.00'; + tipPercentage = 0; + document.getElementById('custom-tip').style.display = 'none'; // Hide custom input field + document.getElementById('custom-btn').style.display = 'inline'; // Show the "Custom" button again +}; + +document.getElementById('bill').addEventListener('input', calculate); +document.getElementById('people').addEventListener('input', calculate); +document.getElementById('reset-btn').addEventListener('click', resetCalculator); diff --git a/style.css b/style.css new file mode 100644 index 0000000..3d2bba8 --- /dev/null +++ b/style.css @@ -0,0 +1,252 @@ +/*easy access to the colors*/ + :root { + --strong-cyan: hsl(172, 67%, 45%); + --very-dark-cyan: hsl(183, 100%, 15%); + --dark-grayish-cyan: hsl(186, 14%, 43%); + --grayish-cyan: hsl(184, 14%, 56%); + --light-grayish-cyan: hsl(185, 41%, 84%); + --very-light-grayish-cyan: hsl(189, 41%, 97%); + --white: hsl(0, 0%, 100%); + } + + /*font,color, place*/ + body { + font-family: 'Space Mono', monospace; + background-color: var(--light-grayish-cyan); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + + } + + /*Main wrapper*/ + .container { + background-color: var(--white); + padding: 2rem; + border-radius: 1.5rem; + box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1); + width: 80%; + max-width: 800px; + position: relative; + } + + /*positioned Logo*/ + .splitter-logo { + display: block; + margin-bottom: 2rem; + position: absolute; + top: -4.5rem; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: auto; + z-index: 10; + } + + /*calculator with two + equal-width parts.*/ + .calculator { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + position: relative; + } + + /*Input(left side) Fields*/ + + .selection-section { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .selection-section label { + color: var(--dark-grayish-cyan); + font-size: 1rem; + } + + .selection-section input { + padding: 0.5rem 1rem; + font-size: 1.5rem; + font-family: inherit; + border: 2px solid var(--very-light-grayish-cyan); + border-radius: 0.5rem; + color: var(--very-dark-cyan); + } + + .selection-section input:focus { + outline: none; + border-color: var(--strong-cyan); + } + + /*three button columns*/ + .tip-percent-btn { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + } + + .tip-percent-btn button { + background-color: var(--very-dark-cyan); + color: var(--white); + padding: 0.5rem 1rem; + font-size: 1.5rem; + font-family: inherit; + border: none; + border-radius: 0.5rem; + cursor: pointer; + } + + .tip-percent-btn button.custom-btn { + background-color: var(--very-light-grayish-cyan); + color: var(--very-dark-cyan); + } + + .tip-percent-btn button:hover { + background-color: var(--strong-cyan); + color: var(--very-dark-cyan); + } + #custom-tip { + display: none; + width: 80px; /* Adjust the width of the input as needed */ + margin-top: 10px; /* Space between button and input */ + font-size: 16px; /* Font size for readability */ + text-align: center; /* Center align the text in the input */ + } + + /*icons inside the input fields .*/ + .input-person-container { + display: flex; + align-items: center; + background-color: var(--very-light-grayish-cyan); + padding: 0.5rem 1rem; + border-radius: 0.5rem; + + position: relative; + } + + .input-person-container .person-icon { + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + z-index: 1; + pointer-events: none; /* Prevents icon from interfering with input */ + + } + .input-person-container .dollar-icon { + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + z-index: 1; + pointer-events: none; /* Prevents icon from interfering with input */ + + } + + .input-person-container input { + flex: 1; + font-size: 1.5rem; + font-family: inherit; + border: none; + background-color: transparent; + color: var(--very-dark-cyan); + text-align: right; + padding-left: 2.5rem; + } + + .input-person-container input:focus { + outline: none; + } + + /*Results Display (right side)*/ + .output-section { + background-color: var(--very-dark-cyan); + padding: 2rem; + border-radius: 1rem; + display: flex; + flex-direction: column; + justify-content: space-between; + width: 80%; + max-width: 500px; + height: 400px; + margin: 0 auto; + + } + + .output-section .result { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 1rem; + } + + .output-section .result p { + color: var(--white); + margin: 0; + font-size: 1.2rem; + } + + .output-section .result p span { + color: var(--grayish-cyan); + font-size: 0.8rem; + } + + .output-section .result .value { + color: var(--strong-cyan); + font-size: 2rem; + } + + .output-section .reset-btn { + background-color: hsl(174, 52%, 24%); + color: var(--very-dark-cyan); + padding: 0.5rem 1rem; + font-size: 1.2rem; + font-family: inherit; + border: none; + border-radius: 0.5rem; + cursor: pointer; + } + + .output-section .reset-btn:hover { + background-color: var(--strong-cyan); + } + + /*Adjusts for a mobile-friendly experience*/ + @media (max-width: 768px) { + .body{ + background-color: var(--light-grayish-cyan); + display: flex; + } + + .container { + width: 100%; + height: inherit; + } + .top-section { + background-color: var(--light-grayish-cyan); + padding: 4rem; + border-radius: 0.3rem; + } + .splitter-logo { + display: block; + top: -3.4rem; + } + + + .calculator { + grid-template-columns: 1fr; + } + + .tip-percent-btn { + grid-template-columns: repeat(2, 1fr); + } + } + + @media (min-width: 1440px) { + .container { + width: 60%; + } + } \ No newline at end of file