Skip to content

Commit 2aca56a

Browse files
RanitManikRanitManik
committed
added challenges
1 parent c59562c commit 2aca56a

18 files changed

+1180
-0
lines changed

‎FrontendMentor30—tip-calculator-app/design/active-states.jpg

36.8 KB
Loading

‎FrontendMentor30—tip-calculator-app/design/desktop-design-empty.jpg

30.7 KB
Loading

‎FrontendMentor30—tip-calculator-app/design/desktop-design.jpg

32.5 KB
Loading

‎FrontendMentor30—tip-calculator-app/design/desktop-preview.jpg

36.3 KB
Loading

‎FrontendMentor30—tip-calculator-app/design/mobile-design.jpg

21.9 KB
Loading

‎FrontendMentor30—tip-calculator-app/design/style-guide.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Front-end Style Guide
2+
3+
## Layout
4+
5+
The designs were created to the following widths:
6+
7+
- Mobile: 375px
8+
- Desktop: 1440px
9+
10+
> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.
11+
12+
## Colors
13+
14+
### Primary
15+
16+
- Strong cyan: hsl(172, 67%, 45%)
17+
18+
### Neutral
19+
20+
- Very dark cyan: hsl(183, 100%, 15%)
21+
- Dark grayish cyan: hsl(186, 14%, 43%)
22+
- Grayish cyan: hsl(184, 14%, 56%)
23+
- Light grayish cyan: hsl(185, 41%, 84%)
24+
- Very light grayish cyan: hsl(189, 41%, 97%)
25+
- White: hsl(0, 0%, 100%)
26+
27+
## Typography
28+
29+
### Body Copy
30+
31+
- Font size (form inputs): 24px
32+
33+
### Font
34+
35+
- Family: [Space Mono](https://fonts.google.com/specimen/Space+Mono)
36+
- Weights: 700
37+
38+
> 💎 [Upgrade to Pro](https://www.frontendmentor.io/pro?ref=style-guide) for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma.

‎FrontendMentor30—tip-calculator-app/images/favicon-32x32.png

1.04 KB
Loading

‎FrontendMentor30—tip-calculator-app/images/icon-dollar.svg

Lines changed: 1 addition & 0 deletions
Loading

‎FrontendMentor30—tip-calculator-app/images/icon-person.svg

Lines changed: 1 addition & 0 deletions
Loading

‎FrontendMentor30—tip-calculator-app/images/logo.svg

Lines changed: 1 addition & 0 deletions
Loading

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

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="icon"
8+
type="image/png"
9+
sizes="32x32"
10+
href="./images/favicon-32x32.png"
11+
/>
12+
<title>Frontend Mentor | Tip calculator app</title>
13+
<link rel="stylesheet" href="./src/output.css" />
14+
<link rel="preconnect" href="https://fonts.googleapis.com" />
15+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16+
<link
17+
href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap"
18+
rel="stylesheet"
19+
/>
20+
</head>
21+
<body
22+
class="grid min-h-screen place-items-center content-center gap-10 bg-neutral-lightGrayishCyan p-4 font-mono text-neutral-darkGrayishCyan"
23+
>
24+
<header>
25+
<h1 class="font-mono text-form-input tracking-[0.5rem]">
26+
SPLI<br />TTER
27+
</h1>
28+
</header>
29+
<main class="grid gap-10 rounded-3xl bg-neutral-white p-10 md:grid-cols-2">
30+
<div class="grid gap-8">
31+
<div>
32+
<label class="legacyLabel" for="bill">Bill</label>
33+
<input
34+
class="legacyInput"
35+
min="1"
36+
max="100000"
37+
type="number"
38+
id="bill"
39+
name="bill"
40+
placeholder="0"
41+
/>
42+
</div>
43+
44+
<div>
45+
<p class="mb-2">Select Tip %</p>
46+
<div class="grid grid-cols-3 gap-2 lg:gap-3">
47+
<button value="5" class="tip-percent-btn">5%</button>
48+
<button value="10" class="tip-percent-btn">10%</button>
49+
<button value="15" class="tip-percent-btn">15%</button>
50+
<button value="25" class="tip-percent-btn">25%</button>
51+
<button value="50" class="tip-percent-btn">50%</button>
52+
<label>
53+
<input
54+
id="tipInput"
55+
class="tipInput"
56+
min="1"
57+
max="100"
58+
placeholder="Custom"
59+
type="number"
60+
/>
61+
</label>
62+
</div>
63+
</div>
64+
<div>
65+
<label class="legacyLabel" for="people">Number of People</label>
66+
<input
67+
class="legacyInput"
68+
min="1"
69+
max="100000"
70+
type="number"
71+
id="people"
72+
name="people"
73+
placeholder="0"
74+
/>
75+
</div>
76+
</div>
77+
<div
78+
class="flex flex-col content-start gap-6 rounded-xl bg-neutral-veryDarkCyan p-8"
79+
>
80+
<div class="flex items-center justify-between gap-12 sm:gap-20 ">
81+
<p class="text-sm text-neutral-white">
82+
Tip Amount
83+
<span class="block text-xs text-neutral-grayishCyan">/ person</span>
84+
</p>
85+
<p class="text-[1.5rem] sm:text-[2.25rem] text-primary-cyan">$<span>0.00</span></p>
86+
</div>
87+
<div class="flex items-center justify-between gap-12 sm:gap-20 ">
88+
<p class="text-sm text-neutral-white">
89+
Total
90+
<span class="block text-xs text-neutral-grayishCyan">/ person</span>
91+
</p>
92+
<p class="text-[1.5rem] sm:text-[2.25rem] text-primary-cyan">$<span>0.00</span></p>
93+
</div>
94+
<button
95+
class="mt-auto rounded bg-primary-cyan/20 p-2 text-neutral-veryDarkCyan"
96+
>
97+
Reset
98+
</button>
99+
</div>
100+
</main>
101+
102+
<script src="./src/script.js"></script>
103+
</body>
104+
</html>

‎FrontendMentor30—tip-calculator-app/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"scripts": {
3+
"start": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
4+
},
5+
"devDependencies": {
6+
"prettier": "^3.2.5",
7+
"prettier-plugin-tailwindcss": "^0.5.14",
8+
"tailwindcss": "^3.4.3"
9+
},
10+
"prettier": {
11+
"plugins": [
12+
"prettier-plugin-tailwindcss"
13+
]
14+
}
15+
}

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
/* Chrome, Safari, Edge, Opera */
6+
input[type="number"]::-webkit-outer-spin-button,
7+
input[type="number"]::-webkit-inner-spin-button {
8+
-webkit-appearance: none;
9+
margin: 0;
10+
}
11+
12+
/* Firefox */
13+
input[type="number"] {
14+
-moz-appearance: textfield;
15+
}
16+
17+
#bill {
18+
background-image: url("../images/icon-dollar.svg");
19+
background-repeat: no-repeat;
20+
background-position: 1rem center;
21+
background-size: 10px;
22+
}
23+
24+
#people {
25+
background-image: url("../images/icon-person.svg");
26+
background-repeat: no-repeat;
27+
background-position: 1rem center;
28+
background-size: 10px;
29+
}
30+
31+
#tipInput::placeholder {
32+
text-align: center;
33+
color: hsl(186, 14%, 43%);
34+
}
35+
36+
.legacyLabel {
37+
@apply mb-2 block;
38+
}
39+
40+
.legacyInput {
41+
@apply block w-full rounded bg-neutral-veryLightGrayishCyan py-2 pl-10 pr-4 text-right tracking-widest text-neutral-veryDarkCyan caret-primary-cyan outline outline-transparent invalid:outline-red-400 focus:border-none focus:outline-primary-cyan invalid:focus:outline-red-600;
42+
}
43+
44+
.tip-percent-btn {
45+
@apply rounded bg-neutral-veryDarkCyan px-4 py-2 text-neutral-veryLightGrayishCyan hover:bg-primary-cyan/50 hover:text-neutral-veryDarkCyan focus-visible:bg-primary-cyan focus-visible:text-neutral-veryDarkCyan focus-visible:outline-neutral-veryDarkCyan;
46+
}
47+
48+
.tip-percent-btn-active {
49+
@apply bg-primary-cyan text-neutral-veryDarkCyan;
50+
}
51+
52+
.tipInput {
53+
@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;
54+
}

0 commit comments

Comments
 (0)