diff --git a/index.html b/index.html index 5c09e8d..d547bf1 100644 --- a/index.html +++ b/index.html @@ -1,39 +1,86 @@ + - + + - + Frontend Mentor | Tip calculator app - + +
+
+

S P L I

+

T T E R

+
+ +
+
+
+

Bill

+ + + + +
+
+

Select Tip %

+
+ + + + + + +
+
+
+

Number of People

+ + + + + +
+
+ + +
+
+
+

Tip Amount

+

/ person

+
+
$4.27
+
+
+
+

Total

+

/ person

+
+
$32.79
+
- Bill + - Select Tip % - 5% - 10% - 15% - 25% - 50% - Custom +
- Number of People - Tip Amount - / person - Total - / person - Reset +
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..ce62a6a --- /dev/null +++ b/script.js @@ -0,0 +1,66 @@ +const price=document.getElementById("price"); +const numOfpeople=document.getElementById("numOfpeople"); +const hoverWarning = document.getElementById("hover"); +const tipAmountResult = document.getElementById("tipRes"); +const totalAmountResult = document.getElementById("totalRes"); +const custom=document.getElementById("custom"); +const resetBtn=document.getElementById("resetBtn"); + + + +let tipAmout; +let total; + +calcTip= (x) =>{ + const priceValue=parseFloat(price.value); + const peopleValue=parseFloat(numOfpeople.value); + + if(!priceValue || !peopleValue || priceValue<=0 || peopleValue<=0){ + hoverWarning.style.display="block"; + return; + } + hoverWarning.style.display="none"; + + tipAmount=(priceValue*x)/peopleValue; + total=(priceValue*(1+x))/peopleValue; + + tipAmountResult.innerText="$"+tipAmount.toFixed(2); + totalAmountResult.innerText="$"+total.toFixed(2); +} + +customTip=()=> { + const priceValue=parseFloat(price.value); + const peopleValue=parseFloat(numOfpeople.value); + const customValue= parseFloat(custom.value/100); + + if(!customValue || customValue<=0){ + hoverWarning.style.display="block"; + return; + } + hoverWarning.style.display="none"; + + tipAmount=(priceValue*customValue)/peopleValue; + total=(priceValue*(1+customValue))/peopleValue; + + + tipAmountResult.innerText="$"+tipAmount.toFixed(2); + totalAmountResult.innerText="$"+total.toFixed(2); +}; + +custom.addEventListener("blur", customTip); + +reset=()=>{ + + + tipAmountResult.innerText="$0.00"; + totalAmountResult.innerText="$0.00"; + + price.value = ''; + numOfpeople.value = ''; + custom.value = ''; + + + hoverWarning.style.display = "none"; + +}; +resetBtn.addEventListener("click", reset); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3d9e82a --- /dev/null +++ b/styles.css @@ -0,0 +1,311 @@ +@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); + +html { + font-size: 16px; +} + +body { + background-color: hsl(185, 41%, 84%); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-family: 'Space Mono', monospace; + + +} + +.ptags { + padding-bottom: 30px; + font-weight: 900; + color: hsl(186, 14%, 43%); + +} + +#p1 { + margin-top: -15px; +} +.container { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + gap: 20px; + width: 700px; + padding-right: 30px; + padding-left: 30px; + height: 350px; + border-radius: 20px; + background-color: white; + margin: 0 auto; +} + +.left { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + /* padding-left: 30px; */ + padding-top: 10px; + width: 320px; + box-sizing: border-box; +} + +.right { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + padding-left: 30px; + padding-top: 10px; + width: 320px; + box-sizing: border-box; + height: 90%; + border-radius: 10px; + background-color:hsl(183, 100%, 15%) ; +} + +.input-box { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + border-radius: 7px; + background-color: hsla(180, 6%, 93%, 0.683); + box-sizing: border-box; + width: 100%; + margin-top: -10px; + height: 35px; + position: relative; +} + +.bill-container , .people-container { + width: 100%; + font-size: 13px; + font-weight: 600; + color: hsl(186, 14%, 43%); + +} + +.currency-symbol { + color: hsl(186, 14%, 43%); + margin-left: 10px; + display: flex; + align-items: center; + position: absolute; +} +.price { + color: hsl(183, 100%, 15%); + font-weight: 600; + font-size: 18px; +} +.icon-dollar , .icon-person{ + width: 10px; + position: relative; + top: -25px; + left: 10px; +} + +.tip-container { + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; + margin-bottom: 10px; + font-size: 13px; + font-weight: 600; + color: hsl(186, 14%, 43%); +} + +.tip-boxes { + display: flex; + flex-direction: row; + gap: 10px; + flex-wrap: wrap; + margin-top: -10px; + width: 100%; + justify-content: flex-start; + align-items: center; +} + + +.box { + + padding: 10px; + width: 31%; + height:35px; + border-radius: 5px; + text-align: center; + justify-content: center; + border: none; + text-align: center; + font-weight: 700; + font-size: 18px; + background-color: hsl(183, 100%, 15%); + color: white; + cursor: pointer; +} + +.boxcustom { + padding: 10px; + width: 25%; + height:15px; + border-radius: 5px; + text-align: center; + justify-content: center; + border: none; + text-align: center; + font-weight: 700; + font-size: 15px; + color: white; + cursor: pointer; + background-color: hsla(180, 6%, 93%, 0.683); + color: hsl(183, 100%, 15%); +} + +.boxcustom::placeholder { + color: hsl(186, 14%, 43%); +} + +#box15 { + background-color: hsl(172, 67%, 45%); + color: hsl(183, 100%, 15%); +} + + + + +.bill-container { + margin-bottom: 10px; +} + + + +.right { + display: flex; + justify-content: flex-start; + flex-direction: column; + gap: 20px; + padding-top: 30px; + padding-right: 30px; + +} + +.top , .bottom { + display: flex; + justify-content: space-between; + width: 100%; + align-items: center; +} + +.text { + display: inline-block; + color: white; + font-size: 14px; +} + +.green-price { + display: inline-block; + color: hsl(172, 67%, 45%); + font-size: 30px; + font-weight: 800; + +} +.gray-txt { + margin-top: -10px; + color: hsl(180, 3%, 70%); + font-size: 10px; +} + +.reset { + width: 100%; + padding: 10px; + margin-top: 50px; + border-radius: 7px; + background-color:hsl(172, 67%, 45%) ; + color:hsl(183, 100%, 15%) ; + font-weight: 800; + border: none; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.reset:hover { + background-color: hsl(172, 100%, 79%); +} + + + +@media (max-width: 375px) { + .container { + flex-direction: column; + width: 100%; + height: 100%; + padding-bottom: 30px; + gap: 30px; + } + .reset { + margin-top: -10px; + } + .right { + padding-bottom: 20px; + } + .box { + width: 120px; + } + .tip-boxes { + /* gap: 15px; */ + padding-top: 10px; + justify-content: space-around; + } + +} + + +.bill-container .input-box { + cursor: pointer; + border: 1px solid #ccc; /* Default border */ + transition: border 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for border and shadow */ +} + +.bill-container .input-box:hover { + border: 1px solid hsl(172, 100%, 62%); + box-shadow: 0 0 5px hwb(172 24% 0%); /* Highlighter shadow effect */ +} + + + +.tip-boxes #custom { + cursor: pointer; + border: 1px solid transparent; + transition: border 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for border and shadow */ +} + +.tip-boxes #custom:hover { + border: 1px solid hsl(172, 100%, 62%); + box-shadow: 0 0 5px hwb(172 24% 0%); /* Highlighter shadow effect */ +} + + + +.tip-boxes #box15 { + cursor: pointer; + transition: background-color 0.3s ease; +} + +.tip-boxes #box15:hover { + background-color: hsl(172, 100%, 79%); +} + +.people-container .input-box { + cursor: pointer; + border: 1px solid #ccc; + transition: border 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for border and shadow */ +} + +.people-container .input-box:hover { + border: 1px solid hsl(0, 100%, 62%); + box-shadow: 0 0 5px hwb(0 5% 0%); +} + +