From f58cd5ecafe2c4e03966b738cdcd1a62483fe658 Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Sun, 1 Dec 2024 15:27:15 +0200 Subject: [PATCH 1/6] almost finished --- index.html | 84 ++++++++++++++++++++++++--------- styles.css | 136 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 199 insertions(+), 21 deletions(-) create mode 100644 styles.css diff --git a/index.html b/index.html index 5c09e8d..bfc9b52 100644 --- a/index.html +++ b/index.html @@ -1,39 +1,81 @@ + - + + - + Frontend Mentor | Tip calculator app - - + + +
+
+

S P L I

+

T T E R

+
+ +
+
+
+

Bill

+
+ + 142.55 +
+
+
+

Select Tip %

+
+
5%
+
10%
+
15%
+
25%
+
50%
+
Custom
+
+
+
+

Number of People

+
+ + 5 +
+
+
+ - Bill +
+
+
+

Tip Amount

+

/ person

+
+
$4.27
+
+
+
+

Total

+

/ person

+
+
$32.79
+
- 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/styles.css b/styles.css new file mode 100644 index 0000000..358a71b --- /dev/null +++ b/styles.css @@ -0,0 +1,136 @@ +@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; +} + +.ptags { + padding-bottom: 30px; +} + +.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; + /* border: 1px solid pink; */ + padding: 10px; + border-radius: 7px; + background-color: hsla(180, 6%, 93%, 0.683); + box-sizing: border-box; + width: 100%; + margin-top: -10px; +} + +.bill-container , .people-container { + width: 100%; +} + +.currency-symbol { + color: gray; + margin-left: 10px; +} +.price { + color: hsl(183, 100%, 15%); + font-weight: 700; + font-size: 18px; +} +.icon-dollar , .icon-person{ + width: 10px; +} + +.tip-container { + display: flex; + justify-content: flex-start; + align-items: flex-start; + flex-direction: column; + margin-bottom: 10px; +} + +.tip-boxes { + display: flex; + flex-direction: row; + gap: 10px; + flex-wrap: wrap; + margin-top: -10px; + width: 100%; +} + + +.box { + padding: 10px; + width: 80px; + border-radius: 5px; + text-align: center; + font-weight: 700; + font-size: 18px; + background-color: hsl(183, 100%, 15%); + color: white; + +} + +#box15 { + background-color: hsl(172, 67%, 45%); + color: hsl(183, 100%, 15%); +} + +#custom { + background-color: hsl(189, 41%, 97%); + color: hsl(183, 100%, 15%); +} +/* +#bill , #people { + +} */ + + +.bill-container { + margin-bottom: 10px; +} \ No newline at end of file From 0441b20c3630228d4455ce0bec1ca3a6b29ac955 Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Sun, 1 Dec 2024 16:04:31 +0200 Subject: [PATCH 2/6] finished all --- index.html | 24 +++++++++-------- styles.css | 76 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 86 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index bfc9b52..c082a72 100644 --- a/index.html +++ b/index.html @@ -10,14 +10,16 @@ Frontend Mentor | Tip calculator app - +

S P L I

-

T T E R

+

T T E R

@@ -53,21 +55,21 @@
-

Tip Amount

-

/ person

-
-
$4.27
+

Tip Amount

+

/ person

+
+
$4.27
-

Total

-

/ person

-
-
$32.79
+

Total

+

/ person

+
+
$32.79
- + diff --git a/styles.css b/styles.css index 358a71b..b72a2da 100644 --- a/styles.css +++ b/styles.css @@ -10,12 +10,21 @@ body { 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; @@ -60,26 +69,29 @@ body { display: flex; justify-content: space-between; align-items: center; - /* border: 1px solid pink; */ padding: 10px; border-radius: 7px; background-color: hsla(180, 6%, 93%, 0.683); box-sizing: border-box; width: 100%; margin-top: -10px; + height: 35px; } .bill-container , .people-container { width: 100%; + font-size: 13px; + font-weight: 600; + color: hsl(186, 14%, 43%); } .currency-symbol { - color: gray; + color: hsl(186, 14%, 43%); margin-left: 10px; } .price { color: hsl(183, 100%, 15%); - font-weight: 700; + font-weight: 600; font-size: 18px; } .icon-dollar , .icon-person{ @@ -92,6 +104,9 @@ body { align-items: flex-start; flex-direction: column; margin-bottom: 10px; + font-size: 13px; + font-weight: 600; + color: hsl(186, 14%, 43%); } .tip-boxes { @@ -101,12 +116,18 @@ body { flex-wrap: wrap; margin-top: -10px; width: 100%; + justify-content: center; + align-items: center; } .box { + /* display: flex; + justify-content: center; + align-self: center; */ padding: 10px; width: 80px; + height: 20px; border-radius: 5px; text-align: center; font-weight: 700; @@ -133,4 +154,53 @@ body { .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; } \ No newline at end of file From cb93fd35928b43552f139f918c453738f8d685bf Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Sun, 1 Dec 2024 16:18:29 +0200 Subject: [PATCH 3/6] finished mobile design --- styles.css | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/styles.css b/styles.css index b72a2da..1abd9e4 100644 --- a/styles.css +++ b/styles.css @@ -203,4 +203,31 @@ body { color:hsl(183, 100%, 15%) ; font-weight: 800; border: none; +} + + + +@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; + } + } \ No newline at end of file From bc0c56aa3916a8bb1be63479667e26e69ad89cf1 Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Sun, 1 Dec 2024 16:38:23 +0200 Subject: [PATCH 4/6] finished mobile design --- index.html | 1 + styles.css | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 60 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index c082a72..6206aad 100644 --- a/index.html +++ b/index.html @@ -44,6 +44,7 @@

Number of People

+

Can't be zero

5 diff --git a/styles.css b/styles.css index 1abd9e4..7316e25 100644 --- a/styles.css +++ b/styles.css @@ -126,7 +126,7 @@ body { justify-content: center; align-self: center; */ padding: 10px; - width: 80px; + width: 75px; height: 20px; border-radius: 5px; text-align: center; @@ -203,6 +203,12 @@ body { 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%); } @@ -230,4 +236,55 @@ body { justify-content: space-around; } -} \ No newline at end of file +} + + +.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; /* Default border */ + 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 24% 0%); /* Highlighter shadow effect */ +} + From d81d524d381d54cb23a22ca0c034b04af2210fc3 Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Mon, 2 Dec 2024 13:35:20 +0200 Subject: [PATCH 5/6] finished js for the calculator --- index.html | 34 +++++++++++++++++---------------- script.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 26 ++++++++++++++++++-------- 3 files changed, 91 insertions(+), 24 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index 6206aad..87bddb9 100644 --- a/index.html +++ b/index.html @@ -26,29 +26,29 @@

Bill

-
+ - 142.55 -
+ +

Select Tip %

-
5%
-
10%
-
15%
-
25%
-
50%
-
Custom
+ + + + + +

Number of People

-

Can't be zero

-
+ + - 5 -
+ +
@@ -59,17 +59,17 @@

Tip Amount

/ person

-
$4.27
+
$4.27

Total

/ person

-
$32.79
+
$32.79
- + @@ -79,6 +79,8 @@ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..628eded --- /dev/null +++ b/script.js @@ -0,0 +1,55 @@ +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"; +} \ No newline at end of file diff --git a/styles.css b/styles.css index 7316e25..644e21c 100644 --- a/styles.css +++ b/styles.css @@ -76,6 +76,7 @@ body { width: 100%; margin-top: -10px; height: 35px; + position: relative; } .bill-container , .people-container { @@ -83,11 +84,15 @@ body { 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%); @@ -118,23 +123,25 @@ body { width: 100%; justify-content: center; align-items: center; + } .box { - /* display: flex; - justify-content: center; - align-self: center; */ + padding: 10px; - width: 75px; - height: 20px; + width: 80px; + 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; } #box15 { @@ -143,7 +150,7 @@ body { } #custom { - background-color: hsl(189, 41%, 97%); + background-color: hsl(172, 100%, 93%); color: hsl(183, 100%, 15%); } /* @@ -287,4 +294,7 @@ body { border: 1px solid hsl(0, 100%, 62%); box-shadow: 0 0 5px hwb(0 24% 0%); /* Highlighter shadow effect */ } - +/* +.people-container #hover { + display: none; +} */ From 7150e1d4e9426138a6f892bd0bb25715484d105c Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Mon, 2 Dec 2024 15:30:25 +0200 Subject: [PATCH 6/6] finished JS for calculator --- index.html | 4 ++-- script.js | 13 ++++++++++++- styles.css | 53 ++++++++++++++++++++++++++++++++--------------------- 3 files changed, 46 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 87bddb9..d547bf1 100644 --- a/index.html +++ b/index.html @@ -39,12 +39,12 @@ - +

Number of People

- + diff --git a/script.js b/script.js index 628eded..ce62a6a 100644 --- a/script.js +++ b/script.js @@ -50,6 +50,17 @@ customTip=()=> { custom.addEventListener("blur", customTip); reset=()=>{ + + tipAmountResult.innerText="$0.00"; totalAmountResult.innerText="$0.00"; -} \ No newline at end of file + + 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 index 644e21c..3d9e82a 100644 --- a/styles.css +++ b/styles.css @@ -101,11 +101,14 @@ body { } .icon-dollar , .icon-person{ width: 10px; + position: relative; + top: -25px; + left: 10px; } .tip-container { display: flex; - justify-content: flex-start; + justify-content: center; align-items: flex-start; flex-direction: column; margin-bottom: 10px; @@ -121,16 +124,15 @@ body { flex-wrap: wrap; margin-top: -10px; width: 100%; - justify-content: center; + justify-content: flex-start; align-items: center; - } .box { padding: 10px; - width: 80px; + width: 31%; height:35px; border-radius: 5px; text-align: center; @@ -144,19 +146,33 @@ body { cursor: pointer; } -#box15 { - background-color: hsl(172, 67%, 45%); +.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%); } -#custom { - background-color: hsl(172, 100%, 93%); +.boxcustom::placeholder { + color: hsl(186, 14%, 43%); +} + +#box15 { + background-color: hsl(172, 67%, 45%); color: hsl(183, 100%, 15%); } -/* -#bill , #people { - -} */ + + .bill-container { @@ -279,22 +295,17 @@ body { .tip-boxes #box15:hover { background-color: hsl(172, 100%, 79%); - } - - .people-container .input-box { cursor: pointer; - border: 1px solid #ccc; /* Default border */ + 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 24% 0%); /* Highlighter shadow effect */ + box-shadow: 0 0 5px hwb(0 5% 0%); } -/* -.people-container #hover { - display: none; -} */ + +