Skip to content

Commit 51b65be

Browse files
RanitManikRanitManik
committed
added challenges
1 parent 2aca56a commit 51b65be

File tree

5 files changed

+158
-36
lines changed

5 files changed

+158
-36
lines changed

‎FrontendMentor30—tip-calculator-app/index.html

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,23 @@
1919
/>
2020
</head>
2121
<body
22-
class="grid min-h-screen place-items-center content-center gap-10 bg-neutral-lightGrayishCyan p-4 font-mono text-neutral-darkGrayishCyan"
22+
class="grid min-h-screen place-items-center content-center gap-10 bg-neutral-lightGrayishCyan font-mono text-neutral-darkGrayishCyan"
2323
>
2424
<header>
2525
<h1 class="font-mono text-form-input tracking-[0.5rem]">
2626
SPLI<br />TTER
2727
</h1>
2828
</header>
29-
<main class="grid gap-10 rounded-3xl bg-neutral-white p-10 md:grid-cols-2">
29+
<main
30+
class="mobile:min-w-full grid gap-10 rounded-3xl bg-neutral-white p-6 sm:min-w-[min(90%,_900px)] md:grid-cols-2"
31+
>
3032
<div class="grid gap-8">
3133
<div>
3234
<label class="legacyLabel" for="bill">Bill</label>
3335
<input
3436
class="legacyInput"
3537
min="1"
36-
max="100000"
38+
max="10000"
3739
type="number"
3840
id="bill"
3941
name="bill"
@@ -66,7 +68,7 @@ <h1 class="font-mono text-form-input tracking-[0.5rem]">
6668
<input
6769
class="legacyInput"
6870
min="1"
69-
max="100000"
71+
max="100"
7072
type="number"
7173
id="people"
7274
name="people"
@@ -77,23 +79,25 @@ <h1 class="font-mono text-form-input tracking-[0.5rem]">
7779
<div
7880
class="flex flex-col content-start gap-6 rounded-xl bg-neutral-veryDarkCyan p-8"
7981
>
80-
<div class="flex items-center justify-between gap-12 sm:gap-20 ">
82+
<div class="flex items-center justify-between gap-6">
8183
<p class="text-sm text-neutral-white">
8284
Tip Amount
8385
<span class="block text-xs text-neutral-grayishCyan">/ person</span>
8486
</p>
85-
<p class="text-[1.5rem] sm:text-[2.25rem] text-primary-cyan">$<span>0.00</span></p>
87+
<p class="text-[1.5rem] text-primary-cyan sm:text-[2.25rem]">
88+
$<span id="tipPerPerson">0.00</span>
89+
</p>
8690
</div>
87-
<div class="flex items-center justify-between gap-12 sm:gap-20 ">
91+
<div class="flex items-center justify-between gap-6">
8892
<p class="text-sm text-neutral-white">
8993
Total
9094
<span class="block text-xs text-neutral-grayishCyan">/ person</span>
9195
</p>
92-
<p class="text-[1.5rem] sm:text-[2.25rem] text-primary-cyan">$<span>0.00</span></p>
96+
<p class="text-[1.5rem] text-primary-cyan sm:text-[2.25rem]">
97+
$<span id="billPerPerson">0.00</span>
98+
</p>
9399
</div>
94-
<button
95-
class="mt-auto rounded bg-primary-cyan/20 p-2 text-neutral-veryDarkCyan"
96-
>
100+
<button id="resetBtn" class="inactiveResetBtn mt-auto rounded p-2">
97101
Reset
98102
</button>
99103
</div>

‎FrontendMentor30—tip-calculator-app/src/input.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,11 @@ input[type="number"] {
5252
.tipInput {
5353
@apply w-full rounded bg-neutral-veryLightGrayishCyan px-4 py-2 text-right tracking-widest text-neutral-veryDarkCyan caret-primary-cyan outline outline-transparent invalid:outline-red-600 focus:border-none focus:outline-primary-cyan invalid:focus:outline-red-600;
5454
}
55+
56+
.inactiveResetBtn {
57+
@apply bg-primary-cyan/20 text-neutral-veryDarkCyan;
58+
}
59+
60+
.activeResetBtn {
61+
@apply bg-primary-cyan text-neutral-veryDarkCyan hover:bg-primary-cyan/80;
62+
}

‎FrontendMentor30—tip-calculator-app/src/output.css

Lines changed: 51 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -578,6 +578,10 @@ video {
578578
min-height: 100vh;
579579
}
580580

581+
.max-w-\[1000px\] {
582+
max-width: 1000px;
583+
}
584+
581585
.grid-cols-3 {
582586
grid-template-columns: repeat(3, minmax(0, 1fr));
583587
}
@@ -610,10 +614,6 @@ video {
610614
gap: 2.5rem;
611615
}
612616

613-
.gap-12 {
614-
gap: 3rem;
615-
}
616-
617617
.gap-2 {
618618
gap: 0.5rem;
619619
}
@@ -653,20 +653,12 @@ video {
653653
background-color: hsl(0 0% 100% / var(--tw-bg-opacity));
654654
}
655655

656-
.bg-primary-cyan\/20 {
657-
background-color: hsl(172 67% 45% / 0.2);
658-
}
659-
660-
.p-10 {
661-
padding: 2.5rem;
662-
}
663-
664656
.p-2 {
665657
padding: 0.5rem;
666658
}
667659

668-
.p-4 {
669-
padding: 1rem;
660+
.p-6 {
661+
padding: 1.5rem;
670662
}
671663

672664
.p-8 {
@@ -709,11 +701,6 @@ video {
709701
color: hsl(184 14% 56% / var(--tw-text-opacity));
710702
}
711703

712-
.text-neutral-veryDarkCyan {
713-
--tw-text-opacity: 1;
714-
color: hsl(183 100% 15% / var(--tw-text-opacity));
715-
}
716-
717704
.text-neutral-white {
718705
--tw-text-opacity: 1;
719706
color: hsl(0 0% 100% / var(--tw-text-opacity));
@@ -863,9 +850,38 @@ input[type="number"] {
863850
outline-color: #dc2626;
864851
}
865852

853+
.inactiveResetBtn {
854+
background-color: hsl(172 67% 45% / 0.2);
855+
--tw-text-opacity: 1;
856+
color: hsl(183 100% 15% / var(--tw-text-opacity));
857+
}
858+
859+
.activeResetBtn {
860+
--tw-bg-opacity: 1;
861+
background-color: hsl(172 67% 45% / var(--tw-bg-opacity));
862+
--tw-text-opacity: 1;
863+
color: hsl(183 100% 15% / var(--tw-text-opacity));
864+
}
865+
866+
.activeResetBtn:hover {
867+
background-color: hsl(172 67% 45% / 0.8);
868+
}
869+
866870
@media (min-width: 640px) {
867-
.sm\:gap-20 {
868-
gap: 5rem;
871+
.sm\:min-w-\[90\%\] {
872+
min-width: 90%;
873+
}
874+
875+
.sm\:min-w-\[min\(90\%\2c _1440px\)\] {
876+
min-width: min(90%, 1440px);
877+
}
878+
879+
.sm\:min-w-\[min\(90\%\2c _1000px\)\] {
880+
min-width: min(90%, 1000px);
881+
}
882+
883+
.sm\:min-w-\[min\(90\%\2c _900px\)\] {
884+
min-width: min(90%, 900px);
869885
}
870886

871887
.sm\:text-\[2\.25rem\] {
@@ -880,7 +896,21 @@ input[type="number"] {
880896
}
881897

882898
@media (min-width: 1024px) {
899+
.lg\:max-w-\[1440px\] {
900+
max-width: 1440px;
901+
}
902+
903+
.lg\:max-w-\[1600px\] {
904+
max-width: 1600px;
905+
}
906+
883907
.lg\:gap-3 {
884908
gap: 0.75rem;
885909
}
886910
}
911+
912+
@media (max-width: 650px) {
913+
.mobile\:min-w-full {
914+
min-width: 100%;
915+
}
916+
}

‎FrontendMentor30—tip-calculator-app/src/script.js

Lines changed: 81 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,91 @@
11
const tipPercentButtons = document.querySelectorAll(".tip-percent-btn");
2+
const tipInput = document.getElementById("tipInput");
3+
const resetBtn = document.getElementById("resetBtn");
4+
const allInputs = document.querySelectorAll("input");
5+
const billInput = document.getElementById("bill");
6+
const peopleInput = document.getElementById("people");
7+
const tipPerPersonSpan = document.getElementById("tipPerPerson");
8+
const billPerPersonSpan = document.getElementById("billPerPerson");
29

310
let tipPercent = 0;
11+
let bill = 0;
12+
let people = 0;
413

514
tipPercentButtons.forEach((tipPercentButton) => {
615
tipPercentButton.addEventListener("click", (e) => {
716
e.preventDefault();
8-
tipPercentButtons.forEach((tipPercentButton) => {
9-
tipPercentButton.classList.remove("tip-percent-btn-active");
17+
tipInput.value = "";
18+
tipPercentButtons.forEach((btn) => {
19+
btn.classList.remove("tip-percent-btn-active");
1020
});
11-
tipPercentButton.classList.toggle("tip-percent-btn-active");
12-
tipPercent = tipPercentButton.value;
21+
tipPercentButton.classList.add("tip-percent-btn-active");
22+
tipPercent = parseFloat(tipPercentButton.value);
23+
calculateBillAndTip();
1324
});
1425
});
26+
27+
tipInput.addEventListener("focus", () => {
28+
tipPercentButtons.forEach((button) => {
29+
button.classList.remove("tip-percent-btn-active");
30+
});
31+
});
32+
33+
tipInput.addEventListener("input", () => {
34+
tipPercent = parseFloat(tipInput.value) || 0;
35+
calculateBillAndTip();
36+
});
37+
38+
allInputs.forEach((input) => {
39+
input.addEventListener("input", () => {
40+
if (resetBtn.classList.contains("inactiveResetBtn")) {
41+
resetBtn.classList.remove("inactiveResetBtn");
42+
resetBtn.classList.add("activeResetBtn");
43+
}
44+
calculateBillAndTip();
45+
});
46+
});
47+
48+
resetBtn.addEventListener("click", () => {
49+
allInputs.forEach((input) => {
50+
input.value = "";
51+
});
52+
tipPercentButtons.forEach((btn) => {
53+
btn.classList.remove("tip-percent-btn-active");
54+
});
55+
tipPercent = 0;
56+
bill = 0;
57+
people = 0;
58+
tipPerPersonSpan.innerHTML = "0.00";
59+
billPerPersonSpan.innerHTML = "0.00";
60+
resetBtn.classList.remove("activeResetBtn");
61+
resetBtn.classList.add("inactiveResetBtn");
62+
});
63+
64+
billInput.addEventListener("input", () => {
65+
bill = parseFloat(billInput.value) || 0;
66+
calculateBillAndTip();
67+
});
68+
69+
peopleInput.addEventListener("input", () => {
70+
people = parseInt(peopleInput.value) || 0;
71+
calculateBillAndTip();
72+
});
73+
74+
function calculateBillAndTip() {
75+
if (
76+
bill > 0 &&
77+
bill <= 10000 &&
78+
people > 0 &&
79+
people <= 100 &&
80+
tipPercent >= 0 &&
81+
tipPercent <= 100
82+
) {
83+
const tipPerPerson = (bill * tipPercent) / (100 * people);
84+
const billPerPerson = bill / people + tipPerPerson;
85+
tipPerPersonSpan.innerHTML = tipPerPerson.toFixed(2);
86+
billPerPersonSpan.innerHTML = billPerPerson.toFixed(2);
87+
} else {
88+
tipPerPersonSpan.innerHTML = "0.00";
89+
billPerPersonSpan.innerHTML = "0.00";
90+
}
91+
}

‎FrontendMentor30—tip-calculator-app/tailwind.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ module.exports = {
2222
fontSize: {
2323
"form-input": "24px",
2424
},
25+
screens: {
26+
mobile: { max: "650px" },
27+
},
2528
},
2629
},
2730
variants: {},

0 commit comments

Comments
 (0)