Skip to content

Commit aa90159

Browse files
panvickapanvicka
committed
reviews own solution
1 parent 3e00e1b commit aa90159

9 files changed

Lines changed: 604 additions & 13 deletions

File tree

‎1-color-flipper-own/app.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
function hello() {
2+
3+
console.log("hi");
4+
5+
}
6+
7+
hello();
8+
9+

‎1-color-flipper-own/index.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset='utf-8'>
6+
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
7+
<title>Page Title</title>
8+
<meta name='viewport' content='width=device-width, initial-scale=1'>
9+
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
10+
11+
</head>
12+
13+
<body>
14+
15+
16+
<div class="parent">
17+
<header class="header">Header</header>
18+
<main class="main">
19+
20+
<div class="content">
21+
<h2></h2>
22+
<button class="click-to-change">Click me</button>
23+
</div>
24+
25+
</main>
26+
</div>
27+
28+
29+
30+
31+
32+
<script>
33+
34+
function changeColor() {
35+
36+
const body = document.querySelector('main');
37+
const color = "#" + ((1 << 24) * Math.random() | 0).toString(16)
38+
body.style.backgroundColor = color;
39+
const textWithColor = document.querySelector('h2');
40+
textWithColor.textContent = `Background color: ${color}`;
41+
42+
43+
}
44+
45+
46+
const button = document.querySelector('.click-to-change');
47+
48+
button.addEventListener('click', changeColor);
49+
50+
window.addEventListener('load', changeColor);
51+
52+
53+
54+
55+
56+
57+
58+
59+
60+
61+
62+
63+
</script>
64+
65+
66+
67+
</body>
68+
69+
</html>

‎1-color-flipper-own/style.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
2+
3+
4+
header {
5+
background: whitesmoke;
6+
padding: 2rem;
7+
box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.43);
8+
9+
}
10+
11+
main {
12+
background: coral;
13+
flex-direction: row;
14+
flex-wrap: wrap;
15+
justify-content: center;
16+
align-items: center;
17+
min-height: 100vh;
18+
display: flex;
19+
box-shadow: 2px 4px 6px -1px rgba(0,0,0,0.43);
20+
min-height: 100vh;
21+
transition: background-color 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
22+
}
23+
24+
.content {
25+
padding: 0.5rem;
26+
border-radius: 10px;
27+
border: 1px solid red;
28+
font-size: 2rem;
29+
text-align: center;
30+
align-content: center;
31+
position: relative;
32+
}
33+
34+
button {
35+
align-content: center;
36+
}
37+
38+
39+

‎1-color-flipper/setup/hex.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
2+

‎1-color-flipper/setup/index.html‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,42 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Color Flipper || Simple</title>
73

8-
<!-- styles -->
9-
<link rel="stylesheet" href="styles.css" />
10-
</head>
11-
<body>
12-
<h1>color flipper</h1>
13-
<!-- javascript -->
14-
<script src="app.js"></script>
15-
</body>
16-
</html>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Color Flipper || Simple</title>
8+
9+
<!-- styles -->
10+
<link rel="stylesheet" href="styles.css" />
11+
</head>
12+
13+
<body>
14+
<nav>
15+
<div class="nav-center">
16+
<h4>color flipper</h4>
17+
<ul class="nav-links">
18+
<li>
19+
<a href="index.html">simple</a>
20+
</li>
21+
<li>
22+
<a href="hex.html">hex</a>
23+
</li>
24+
</ul>
25+
</div>
26+
</nav>
27+
28+
<main>
29+
<div class="container">
30+
<h2>background color: <span class="color">
31+
#f1f5f8
32+
</span></h2>
33+
<button class="btn btn-hero" id="btn">Click me</button>
34+
35+
</div>
36+
</main>
37+
<h1>color flipper</h1>
38+
<!-- javascript -->
39+
<script src="app.js"></script>
40+
</body>
41+
42+
</html>

‎2-couter-own/index.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset='utf-8'>
6+
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
7+
<title>Page Title</title>
8+
<meta name='viewport' content='width=device-width, initial-scale=1'>
9+
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
10+
</head>
11+
12+
<body>
13+
14+
15+
<div class="box">
16+
17+
<h1>Couter</h1>
18+
<span class="number">0</span>
19+
<div class="button-holder">
20+
<button class="btn" data-type="increase">Increase</button>
21+
<button class="btn" data-type="reset">Reset</button>
22+
<button class="btn" data-type="decrease">Decrease</button>
23+
</div>
24+
</div>
25+
26+
27+
<script>
28+
let number = 0;
29+
30+
const allButtons = document.querySelectorAll('button');
31+
console.log(allButtons);
32+
const numberDisplay = document.querySelector('.number')
33+
34+
function displayNumber() {
35+
36+
37+
console.log(this.dataset.type);
38+
39+
switch (this.dataset.type) {
40+
case 'increase':
41+
number++;
42+
break;
43+
case 'decrease':
44+
number--
45+
break;
46+
case 'reset':
47+
number = 0;
48+
break;
49+
default:
50+
break;
51+
}
52+
53+
console.log(number);
54+
55+
56+
if (number < 0) {
57+
numberDisplay.style.color = 'red'
58+
}
59+
else if (number > 0) {
60+
numberDisplay.style.color = 'green'
61+
} else {
62+
numberDisplay.style.color = 'black';
63+
}
64+
65+
numberDisplay.textContent = number;
66+
}
67+
68+
allButtons.forEach(panel => panel.addEventListener('click', displayNumber));
69+
70+
71+
72+
73+
74+
</script>
75+
76+
</body>
77+
78+
79+
80+
</html>

‎2-couter-own/style.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
2+
3+
4+
:root {
5+
/* dark shades of primary color*/
6+
--clr-primary-1: hsl(205, 86%, 17%);
7+
--clr-primary-2: hsl(205, 77%, 27%);
8+
--clr-primary-3: hsl(205, 72%, 37%);
9+
--clr-primary-4: hsl(205, 63%, 48%);
10+
/* primary/main color */
11+
--clr-primary-5: hsl(205, 78%, 60%);
12+
/* lighter shades of primary color */
13+
--clr-primary-6: hsl(205, 89%, 70%);
14+
--clr-primary-7: hsl(205, 90%, 76%);
15+
--clr-primary-8: hsl(205, 86%, 81%);
16+
--clr-primary-9: hsl(205, 90%, 88%);
17+
--clr-primary-10: hsl(205, 100%, 96%);
18+
/* darkest grey - used for headings */
19+
--clr-grey-1: hsl(209, 61%, 16%);
20+
--clr-grey-2: hsl(211, 39%, 23%);
21+
--clr-grey-3: hsl(209, 34%, 30%);
22+
--clr-grey-4: hsl(209, 28%, 39%);
23+
/* grey used for paragraphs */
24+
--clr-grey-5: hsl(210, 22%, 49%);
25+
--clr-grey-6: hsl(209, 23%, 60%);
26+
--clr-grey-7: hsl(211, 27%, 70%);
27+
--clr-grey-8: hsl(210, 31%, 80%);
28+
--clr-grey-9: hsl(212, 33%, 89%);
29+
--clr-grey-10: hsl(210, 36%, 96%);
30+
--clr-white: #fff;
31+
--clr-red-dark: hsl(360, 67%, 44%);
32+
--clr-red-light: hsl(360, 71%, 66%);
33+
--clr-green-dark: hsl(125, 67%, 44%);
34+
--clr-green-light: hsl(125, 71%, 66%);
35+
--clr-black: #222;
36+
--ff-primary: "Roboto", sans-serif;
37+
--ff-secondary: "Open Sans", sans-serif;
38+
--transition: all 0.3s linear;
39+
--spacing: 0.1rem;
40+
--radius: 0.25rem;
41+
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
42+
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
43+
--max-width: 1170px;
44+
--fixed-width: 620px;
45+
}
46+
47+
48+
.box {
49+
border-radius: 10px;
50+
padding: 5px;
51+
display: block;
52+
margin: 0 auto;
53+
border-width: 1px;
54+
border-color: black;
55+
border-style: solid;
56+
position: absolute;
57+
top: 50%;
58+
left: 50%;
59+
transform: translate(-50%, -50%);
60+
width: 30em;
61+
height: 30em;
62+
63+
}
64+
65+
.button-holder {
66+
position: absolute;
67+
bottom: 0;
68+
width: 100%;
69+
border: 1px solid black;
70+
align-items: stretch;
71+
}
72+
73+
.btn {
74+
text-transform: uppercase;
75+
background: transparent;
76+
color: var(--clr-black);
77+
padding: 0.375rem 0.75rem;
78+
letter-spacing: var(--spacing);
79+
display: inline-block;
80+
transition: var(--transition);
81+
font-size: 0.875rem;
82+
border: 2px solid var(--clr-black);
83+
cursor: pointer;
84+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
85+
border-radius: var(--radius);
86+
margin: 0.5rem;
87+
}
88+
.btn:hover {
89+
color: var(--clr-white);
90+
background: var(--clr-black);
91+
}
92+
93+
.number {
94+
font-size: 6rem;
95+
font-weight: bold;
96+
}
97+
98+
h1,
99+
h2,
100+
h3,
101+
h4 {
102+
letter-spacing: var(--spacing);
103+
text-transform: capitalize;
104+
line-height: 1.25;
105+
margin-bottom: 0.75rem;
106+
font-family: var(--ff-primary);
107+
}
108+
h1 {
109+
font-size: 3rem;
110+
}

0 commit comments

Comments
 (0)