Skip to content

Commit b1bcaf9

Browse files
jen67jen67
authored
Merge pull request #4 from jen67/develop
added more functions
2 parents 10ca798 + 445feca commit b1bcaf9

File tree

5 files changed

+85
-43
lines changed

5 files changed

+85
-43
lines changed

‎tip-calculator-app-main/dist/css/main.css

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tip-calculator-app-main/dist/css/main.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tip-calculator-app-main/index.html

Lines changed: 63 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,79 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="author" content="Gift Amachree">
8+
<meta name="description" content="frontend-mentor.io Tip calculator app">
79
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
8-
<link rel="stylesheet" href="style.css">
10+
<link rel="stylesheet" href="dist/css/main.css">
911
<title>Frontend Mentor | Tip calculator app</title>
10-
11-
12-
1312
</head>
13+
1414
<body>
15-
<main>
16-
17-
Bill
18-
19-
Select Tip %
20-
5%
21-
10%
22-
15%
23-
25%
24-
50%
25-
Custom
26-
27-
Number of People
28-
29-
Tip Amount
30-
/ person
31-
32-
Total
33-
/ person
34-
35-
Reset
36-
37-
</main>
15+
<main>
16+
<header>
17+
<h1>SPILITTER</h1>
18+
</header>
19+
20+
<section class="bill-section">
21+
<div class="white-background">
22+
<h2>Bill</h2>
23+
<div class="screen">
24+
<img src="./images/icon-dollar.svg" alt="dollar Icon">
25+
<p>145.55</p>
26+
</div>
27+
28+
<div class="amounts">
29+
<h3>Select Tip %</h3>
30+
<div class="discounts">
31+
<div>5%</div>
32+
<div>10%</div>
33+
<div>15%</div>
34+
<div>25%</div>
35+
<div>50%</div>
36+
<div>Custom</div>
37+
</div>
38+
</div>
39+
40+
<div class="No-of-people">
41+
<h4>Number of People</h4>
42+
<div>
43+
<img src="./images/icon-person.svg" alt="person icon">
44+
<p>5</p>
45+
</div>
46+
</div>
47+
</div>
48+
49+
<div class="green-background">
50+
<div>
51+
<div>
52+
<h5>Tip Amount</h5>
53+
<span>/ person</span>
54+
</div>
55+
<div>$0.00</div>
56+
</div>
57+
58+
<div>
59+
<div>
60+
<h5>Total</h5>
61+
<span>/ person</span>
62+
</div>
63+
<div>$0.00</div>
64+
</div>
65+
66+
<button>RESET</button>
67+
</div>
68+
</section>
69+
</main>
3870

3971
<footer>
4072
<div class="attribution">
4173
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
42-
Coded by <a href="#">Your Name Here</a>.
74+
Coded by <a href="https://www.linkedin.com/in/gift-amachree-8a523623b/">Gift Amachree</a>.
4375
</div>
4476
</footer>
4577
</body>
78+
4679
</html>

‎tip-calculator-app-main/src/scss/main.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
@use 'base/reset';
1+
@import './base/reset';
2+
@import './utils/variables';
23

34
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap');
45

@@ -15,6 +16,11 @@ body {
1516
align-items: center;
1617
justify-content: center;
1718
min-height: 100vh;
19+
background-color: $Light-grayish-cyan;
20+
}
21+
22+
section{
23+
background-color:$white;
1824
}
1925

2026
.attribution {

‎tip-calculator-app-main/src/scss/utils/_variables.scss

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
:root {
2-
/* primary color */
3-
--Strong-cyan: hsl(172, 67%, 45%);
4-
/* neutral colors */
5-
--Very-dark-cyan: hsl(183, 100%, 15%);
6-
--Dark-grayish-cyan: hsl(186, 14%, 43%);
7-
--Grayish-cyan: hsl(184, 14%, 56%);
8-
--Light-grayish-cyan: hsl(185, 41%, 84%);
9-
--Very-light-grayish-cyan: hsl(189, 41%, 97%);
10-
--white: hsl(0, 0%, 100%);
11-
}
1+
$Strong-cyan: hsl(172, 67%, 45%);
2+
$Very-dark-cyan: hsl(183, 100%, 15%);
3+
$Dark-grayish-cyan: hsl(186, 14%, 43%);
4+
$Grayish-cyan: hsl(184, 14%, 56%);
5+
$Light-grayish-cyan: hsl(185, 41%, 84%);
6+
$Very-light-grayish-cyan: hsl(189, 41%, 97%);
7+
$white: hsl(0, 0%, 100%);

0 commit comments

Comments
 (0)