Skip to content

Commit 2466a7a

Browse files
Code-BeakerCode-Beaker
committed
first commit
0 parents  commit 2466a7a

File tree

5 files changed

+380
-0
lines changed

5 files changed

+380
-0
lines changed

‎assets/fonts/RobotoFlex-Regular.woff2

30.1 KB
Binary file not shown.

‎css/fonts.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/* Roboto Flex */
2+
@font-face {
3+
font-family: "Roboto-Variable";
4+
src: url("../assets/fonts/RobotoFlex-Regular.woff2") format("woff2");
5+
font-variation-settings: "wght" 400;
6+
}
7+
@font-face {
8+
font-family: "Roboto-Variable";
9+
src: url("../assets/fonts/RobotoFlex-Regular.woff2") format("woff2");
10+
font-variation-settings: "wght" 500;
11+
}
12+
13+
@font-face {
14+
font-family: "Roboto-Variable";
15+
src: url("../assets/fonts/RobotoFlex-Regular.woff2") format("woff2");
16+
font-variation-settings: "wght" 400;
17+
}
18+
19+
@font-face {
20+
font-family: "Roboto-Variable";
21+
src: url("../assets/fonts/RobotoFlex-Regular.woff2") format("woff2");
22+
font-variation-settings: "wght" 400;
23+
}
24+
25+
@font-face {
26+
font-family: "Roboto-Variable";
27+
src: url("../assets/fonts/RobotoFlex-Regular.woff2") format("woff2");
28+
font-variation-settings: "wght" 400;
29+
}

‎css/style.css

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
@import "./fonts.css";
2+
3+
:root {
4+
--font-main: "Roboto-Variable";
5+
6+
--weight-regular: 400;
7+
--weight-medium: 500;
8+
--weight-semibold: 600;
9+
--weight-bold: 700;
10+
--weight-extrabold: 900;
11+
12+
--step--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
13+
--step--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
14+
--step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
15+
--step-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);
16+
--step-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);
17+
--step-3: clamp(1.944rem, 1.771rem + 0.8651vi, 2.4414rem);
18+
--step-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);
19+
--step-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);
20+
--step-6: clamp(3.3592rem, 2.8691rem + 2.4507vi, 4.7684rem);
21+
--step-7: clamp(4.0311rem, 3.36rem + 3.3555vi, 5.9605rem);
22+
23+
/* colors */
24+
--increment-default: #edcd82;
25+
--increment-hover: #ebc670;
26+
--increment-active: #e8bf5e;
27+
28+
--decrement-default: #cbbeee;
29+
--decrement-hover: #beaeea;
30+
--decrement-active: #b19ee6;
31+
32+
--reset-default: #f6958e;
33+
--reset-hover: #f4837b;
34+
--reset-active: #f37168;
35+
36+
--color-dark: #3c1626;
37+
}
38+
39+
* {
40+
margin: 0;
41+
padding: 0;
42+
box-sizing: border-box;
43+
font-family: var(--font-main), system-ui, -apple-system, BlinkMacSystemFont,
44+
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
45+
sans-serif;
46+
}
47+
48+
main {
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
min-height: 100vh;
53+
background-color: #fffec2;
54+
}
55+
56+
.container {
57+
text-align: center;
58+
padding: 2rem;
59+
background-color: white;
60+
border-radius: 2rem;
61+
max-width: 45rem;
62+
max-height: auto;
63+
box-shadow: 0px 1rem 1rem -0.125rem rgba(0, 0, 0, 0.1);
64+
}
65+
66+
h1 {
67+
color: var(--color-dark);
68+
/* letter-spacing: 2px; */
69+
font-weight: var(--weight-bold);
70+
font-size: var(--step-3);
71+
}
72+
73+
h2 {
74+
font-size: var(--step-6);
75+
display: block;
76+
margin: 2rem auto;
77+
font-weight: var(--weight-extrabold);
78+
/* font-weight: var(--weight-medium); */
79+
}
80+
81+
p {
82+
color: grey;
83+
margin: 2rem 0;
84+
font-size: var(--step-0);
85+
}
86+
87+
.btn-flex {
88+
display: flex;
89+
/* flex-wrap: wrap; */
90+
justify-content: space-between;
91+
align-items: center;
92+
gap: 1rem;
93+
}
94+
95+
button {
96+
padding: 1.25rem 2rem;
97+
font-size: var(--step-1);
98+
font-weight: var(--weight-medium);
99+
/* border: 2px solid darkblue; */
100+
border-radius: 5rem;
101+
cursor: pointer;
102+
display: inline-flex;
103+
align-items: center;
104+
justify-content: center;
105+
gap: 1rem;
106+
transition: 250ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
107+
transition-property: font-weight, font-size, background-color, color,
108+
border-radius, box-shadow;
109+
}
110+
111+
.additional-info-container {
112+
display: flex;
113+
flex-direction: column;
114+
text-align: left;
115+
gap: 1rem;
116+
justify-content: space-between;
117+
align-items: center;
118+
padding-block: 2rem;
119+
}
120+
121+
.additional-text {
122+
display: flex;
123+
justify-content: space-between;
124+
align-items: center;
125+
126+
flex-grow: 1;
127+
width: 100%;
128+
font-size: var(--step-0);
129+
}
130+
131+
.square {
132+
border-radius: 5rem;
133+
padding: 1rem 1.5rem;
134+
background-color: #d8eefd;
135+
margin-bottom: 0.5rem;
136+
}
137+
138+
.squareRoot {
139+
border-radius: 5rem;
140+
padding: 1rem 1.5rem;
141+
background-color: #b1defb;
142+
margin-bottom: 0.5rem;
143+
}
144+
145+
.error {
146+
font-size: var(--step-0);
147+
color: #e32636;
148+
display: none;
149+
margin-block: 0.5rem;
150+
}
151+
152+
/* specific button styles */
153+
#incrementBtn {
154+
background-color: var(--increment-default);
155+
font-weight: var(--weight-bold);
156+
letter-spacing: 0;
157+
border: none;
158+
}
159+
160+
#incrementBtn:hover {
161+
background-color: var(--increment-hover);
162+
}
163+
164+
#incrementBtn:active {
165+
background-color: var(--increment-active);
166+
scale: 0.985;
167+
font-weight: var(--weight-regular);
168+
box-shadow: 0px 1rem 1rem -0.125rem rgba(0, 0, 0, 0.1);
169+
border-radius: 0.5rem;
170+
}
171+
172+
#decrementBtn {
173+
background-color: var(--decrement-default);
174+
font-weight: var(--weight-bold);
175+
letter-spacing: 0;
176+
border: none;
177+
}
178+
179+
#decrementBtn:hover {
180+
background-color: var(--decrement-hover);
181+
}
182+
183+
#decrementBtn:active {
184+
background-color: var(--decrement-active);
185+
scale: 0.985;
186+
font-weight: var(--weight-regular);
187+
border-radius: 0.5rem;
188+
box-shadow: 0px 1rem 1rem -0.125rem rgba(0, 0, 0, 0.1);
189+
}
190+
191+
#resetBtn {
192+
background-color: var(--reset-default);
193+
font-weight: var(--weight-bold);
194+
letter-spacing: 0;
195+
border: none;
196+
}
197+
198+
#resetBtn:hover {
199+
background-color: var(--reset-hover);
200+
}
201+
202+
#resetBtn:active {
203+
background-color: var(--reset-active);
204+
scale: 0.985;
205+
font-weight: var(--weight-regular);
206+
border-radius: 0.5rem;
207+
box-shadow: 0px 1rem 1rem -0.125rem rgba(0, 0, 0, 0.1);
208+
}
209+
210+
#incrementBtn:focus-within,
211+
#decrementBtn:focus-within,
212+
#resetBtn:focus-within {
213+
outline: 0.125rem solid var(--color-dark);
214+
}
215+
216+
@media (width < 50rem) {
217+
.container {
218+
max-width: 20rem;
219+
border-radius: 1rem;
220+
padding: 1rem;
221+
}
222+
223+
.btn-flex {
224+
flex-direction: row;
225+
}
226+
227+
.btn-text {
228+
display: none;
229+
}
230+
231+
.additional-info-container {
232+
text-align: left;
233+
}
234+
235+
.additional-text {
236+
flex-direction: column;
237+
gap: 0.5rem;
238+
justify-content: space-between;
239+
align-items: auto;
240+
}
241+
242+
.square,
243+
.squareRoot {
244+
min-width: fit-content;
245+
}
246+
}

‎index.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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+
<title>Counter App</title>
7+
<link rel="stylesheet" href="css/style.css" />
8+
<!-- Font Awesome -->
9+
<script
10+
src="https://kit.fontawesome.com/983cbf0e6e.js"
11+
crossorigin="anonymous"
12+
></script>
13+
</head>
14+
<body>
15+
<main>
16+
<div class="container">
17+
<h1>Javascript Counter</h1>
18+
<h2 class="count" id="count">0</h2>
19+
<p>Click the buttons to change the default value!</p>
20+
<div class="btn-flex">
21+
<button
22+
aria-hidden="false"
23+
aria-label="increment"
24+
class="btn increase"
25+
id="incrementBtn"
26+
>
27+
<span class="btn-text">Increment</span>
28+
<span class="btn-icon"><i class="fa-solid fa-plus"></i></span>
29+
</button>
30+
<button
31+
aria-hidden="false"
32+
aria-label="reset"
33+
class="btn reset"
34+
id="resetBtn"
35+
>
36+
<span class="btn-text">Reset</span>
37+
<span class="btn-icon"
38+
><i class="fa-solid fa-arrows-rotate"></i
39+
></span>
40+
</button>
41+
<button
42+
aria-hidden="false"
43+
aria-label="decrement"
44+
class="btn decrease"
45+
id="decrementBtn"
46+
>
47+
<span class="btn-text">Decrement</span>
48+
<span class="btn-icon"><i class="fa-solid fa-minus"></i></span>
49+
</button>
50+
</div>
51+
<div class="additional-info-container">
52+
<h3 class="additional-text">
53+
<span class="square">Square:</span> <span id="square">0</span>
54+
</h3>
55+
<h3 class="additional-text">
56+
<span class="squareRoot">Square root:</span>
57+
<span id="squareRoot">0</span>
58+
<p class="error" id="error">Unable to display</p>
59+
</h3>
60+
</div>
61+
</div>
62+
</main>
63+
<script type="module" src="index.js"></script>
64+
</body>
65+
</html>

‎index.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
let count = 0;
2+
3+
const value = document.getElementById("count");
4+
const buttons = document.querySelectorAll(".btn");
5+
const square = document.getElementById("square");
6+
const squareRoot = document.getElementById("squareRoot");
7+
8+
buttons.forEach(function (item) {
9+
item.addEventListener("click", function (e) {
10+
const styles = e.currentTarget.classList;
11+
12+
if (styles.contains("decrease")) {
13+
count--;
14+
} else if (styles.contains("increase")) {
15+
count++;
16+
} else {
17+
count = 0;
18+
}
19+
20+
const sq = Math.pow(count, 2);
21+
const root = Math.sqrt(count);
22+
square.textContent = sq;
23+
squareRoot.textContent = root;
24+
25+
if (count < 0) {
26+
value.style.color = "#EB5C68";
27+
squareRoot.style.display = "none";
28+
document.getElementById("error").style.display = "block";
29+
} else if (count > 0) {
30+
value.style.color = "#1D7486";
31+
squareRoot.style.display = "block";
32+
document.getElementById("error").style.display = "none";
33+
} else {
34+
value.style.color = "currentColor";
35+
document.getElementById("error").style.display = "none";
36+
}
37+
38+
value.textContent = count;
39+
});
40+
});

0 commit comments

Comments
 (0)