├── Screenshot_2.png
├── assets
├── dollar.png
├── logo.png
└── user.png
├── index.html
├── script.js
└── style.css
/Screenshot_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gabrielss97/tip-calculator/551aab7f6f2a1fd504f5510319170ac530f9abbf/Screenshot_2.png
--------------------------------------------------------------------------------
/assets/dollar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gabrielss97/tip-calculator/551aab7f6f2a1fd504f5510319170ac530f9abbf/assets/dollar.png
--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gabrielss97/tip-calculator/551aab7f6f2a1fd504f5510319170ac530f9abbf/assets/logo.png
--------------------------------------------------------------------------------
/assets/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gabrielss97/tip-calculator/551aab7f6f2a1fd504f5510319170ac530f9abbf/assets/user.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Tip Calculator
8 |
9 |
10 |
11 |
12 |
13 |
14 |

15 |
16 |
68 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const form = document.querySelector("#form")
2 |
3 | form.addEventListener("submit", (e) => {
4 | e.preventDefault()
5 | })
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
2 |
3 | :root {
4 | --title-text-color: #5e7a7d;
5 | }
6 |
7 | * {
8 | margin: 0;
9 | padding: 0;
10 | box-sizing: border-box;
11 | font-family: "Space Mono", monospace;
12 | font-weight: 700;
13 | color: var(--title-text-color);
14 | }
15 |
16 | body {
17 | background-color: aquamarine;
18 | min-height: 100vh;
19 | }
20 |
21 | .container {
22 | display: flex;
23 | flex-direction: column;
24 | }
25 |
26 | .container-title-wrapper {
27 | text-align: center;
28 | padding: 50px 144px;
29 | }
30 |
31 | .tip {
32 | border-radius: 25px 25px 0 0;
33 | background-color: white;
34 | padding: 2rem;
35 | }
36 | .tip__form {
37 | display: flex;
38 | flex-direction: column;
39 | row-gap: 2rem;
40 | }
41 |
42 | .tip__wrapper {
43 | display: flex;
44 | flex-direction: column;
45 | row-gap: 6px;
46 | }
47 |
48 | .tip__bill {
49 | }
50 | .tip__icon-wrapper {
51 | position: relative;
52 | }
53 |
54 | .tip__payout {
55 | width: 100%;
56 | border: 2px solid transparent;
57 | background-color: #f3f9fa;
58 | color: #00474b;
59 | font-size: 1.5rem;
60 | border-radius: 5px;
61 | text-align: right;
62 | padding: 0.5rem 1rem;
63 | }
64 |
65 | .tip__payout:focus,
66 | .tip__people:focus,
67 | .tip__custom:focus {
68 | border: 2px solid #26c2ae;
69 | outline: none;
70 | }
71 |
72 | .tip__dollar,
73 | .tip__user {
74 | position: absolute;
75 | top: 18px;
76 | left: 18px;
77 | }
78 | .tip__people {
79 | width: 100%;
80 | border: 2px solid transparent;
81 | background-color: #f3f9fa;
82 | color: #00474b;
83 | font-size: 1.5rem;
84 | border-radius: 5px;
85 | text-align: right;
86 | padding: 0.5rem 1rem;
87 | }
88 |
89 | .tip__select {
90 | }
91 | .tip__percentage-wrapper {
92 | display: flex;
93 | flex-wrap: wrap;
94 | gap: 1rem;
95 | }
96 | .tip__percentage {
97 | width: 45%;
98 | border: none;
99 | border-radius: 5px;
100 | font-size: 1.5rem;
101 | padding: .5rem 1rem;
102 | color: white;
103 | background-color: #00474b;
104 |
105 | }
106 |
107 | .tip__percentage:focus {
108 | background-color: #26c2ae;
109 | color: #00474b;
110 | border: none;
111 | outline: none;
112 |
113 | }
114 |
115 | .tip__custom {
116 | width: 45%;
117 | text-align: right;
118 | font-size: 1.5rem;
119 | border-radius: 5px;
120 | outline: none;
121 | border: 2px solid transparent;
122 | background-color: #f3f9fa;
123 | padding-right: 10px;
124 | }
125 |
126 | .tip__custom::placeholder {
127 | color: #547878;
128 | }
129 | .tip__wrapper-footer {
130 | background-color: #00474b;
131 | padding: 2rem 1rem;
132 | border-radius: 15px;
133 | display: flex;
134 | flex-direction: column;
135 | row-gap: 1.5rem;
136 | }
137 |
138 | .tip__amount-total {
139 | display: flex;
140 | justify-content: space-between;
141 | align-items: center;
142 | }
143 |
144 | .tip__person {
145 | display: flex;
146 | flex-direction: column;
147 | }
148 |
149 | .tip__person span:first-child {
150 | color: #f3f9fa;
151 | }
152 |
153 | .tip__person:last-child {
154 | font-size: 0.8rem;
155 | color: #7F9D9F;
156 | }
157 | .tip__result {
158 | font-size: 2rem;
159 | color: #26c2ae;
160 | }
161 | .tip__reset {
162 | background-color: #26c2ae;
163 | color: #00474b;
164 | border: none;
165 | border-radius: 5px;
166 | padding: 0.7rem 2rem;
167 | font-size: 1.25rem;
168 | margin-top: 1rem;
169 | }
170 |
--------------------------------------------------------------------------------