Skip to content

Commit a417ffd

Browse files
codebubbcodebubb
committed
chore: setup 01-03
0 parents  commit a417ffd

11 files changed

Lines changed: 227 additions & 0 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5505
3+
}

‎01-welcome/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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>01 - Welcome</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="script.js" defer></script>
9+
</head>
10+
<body>
11+
<h1>Hello <span>World!</span></h1>
12+
13+
<button>Say Hi</button>
14+
</body>
15+
</html>

‎01-welcome/script.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const btnElement = document.querySelector('button');
2+
const spanElement = document.querySelector('h1 > span');
3+
4+
btnElement.onclick = function() {
5+
const yourName = prompt('Please enter your name: ');
6+
spanElement.textContent = yourName;
7+
}

‎01-welcome/style.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
body {
2+
padding: 4rem;
3+
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
4+
}
5+
6+
h1>span {
7+
color: red;
8+
}
9+
10+
button {
11+
background-color: teal;
12+
color: whitesmoke;
13+
padding: .5rem 1rem;
14+
border: 0;
15+
box-shadow: 0 0 12px 8px rgba(0, 0, 0, 0.3);
16+
cursor: pointer;
17+
}
18+
19+
button:hover {
20+
background-color:darkslategrey;
21+
}

‎02-modal/background.jpg‎

131 KB
Loading

‎02-modal/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>02 - Modal</title>
8+
<link rel="stylesheet" href="styles.css">
9+
<script src="script.js" defer></script>
10+
</head>
11+
12+
<body>
13+
<button id="openModal">Open Modal</button>
14+
<div class="modal">
15+
<div class="modal__overlay"></div>
16+
<div class="modal__content">
17+
<h1>Hello World!</h1>
18+
<p>Click anywhere in the modal to close it.</p>
19+
</div>
20+
</body>
21+
</div>
22+
23+
</html>

‎02-modal/script.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const openModalBtnElement = document.querySelector('#openModal');
2+
const modalElement = document.querySelector('.modal');
3+
const modalContentElement = modalElement.querySelector('.modal__content')
4+
5+
openModalBtnElement.addEventListener('click', () => {
6+
modalElement.classList.add('open');
7+
});
8+
9+
modalContentElement.addEventListener('click', () => {
10+
modalElement.classList.remove('open');
11+
});

‎02-modal/styles.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
body {
2+
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
3+
padding: 0;
4+
margin: 0;
5+
background-image: url(background.jpg);
6+
background-size: cover;
7+
}
8+
9+
button {
10+
margin: 2rem;
11+
display: inline;
12+
background-color: teal;
13+
color: whitesmoke;
14+
padding: .5rem 1rem;
15+
border: 0;
16+
box-shadow: 0 0 12px 8px rgba(0, 0, 0, 0.3);
17+
cursor: pointer;
18+
}
19+
20+
button:hover {
21+
background-color:darkslategrey;
22+
}
23+
24+
.modal {
25+
position: absolute;
26+
left: 0;
27+
top: 0;
28+
right: 0;
29+
bottom: 0;
30+
display: none;
31+
height: 100vh;
32+
justify-content: center;
33+
align-items: center;
34+
}
35+
36+
.modal.open {
37+
display: flex;
38+
}
39+
40+
.modal__overlay {
41+
position: absolute;
42+
top: 0;
43+
left: 0;
44+
right: 0;
45+
bottom: 0;
46+
background-color: rgba(0, 0, 0, 0.2);
47+
}
48+
49+
.modal__content {
50+
background-color: white;
51+
padding: 4rem;
52+
position: relative;
53+
cursor: pointer;
54+
}
55+

‎03-colour-flipper/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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>03 - Colour Flipper</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<script src="script.js" defer></script>
9+
</head>
10+
<body>
11+
<section id="colour-display">
12+
<h1>
13+
Background: <span id="current-colour">#fffff</span>
14+
</h1>
15+
<button id="new-colour-button">New Colour!</button>
16+
</section>
17+
</body>
18+
</html>

‎03-colour-flipper/script.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
const newColourBtnElement = document.getElementById(
2+
'new-colour-button'
3+
);
4+
5+
const currentColourElement = document.getElementById(
6+
'current-colour'
7+
);
8+
9+
// 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
10+
11+
const hexValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F',
12+
];
13+
14+
function getRandomHexValue() {
15+
const randomIndexPosition = Math.floor(
16+
Math.random() * hexValues.length
17+
);
18+
19+
const randomHexValue = hexValues[randomIndexPosition];
20+
21+
return randomHexValue;
22+
}
23+
24+
function getRandomHexString(stringLength) {
25+
let hexString = '';
26+
for (let i = 0; i < stringLength; i++) {
27+
hexString += getRandomHexValue();
28+
}
29+
30+
return hexString;
31+
}
32+
33+
newColourBtnElement.addEventListener('click', function () {
34+
const randomHexString = '#' + getRandomHexString(6);
35+
36+
document.body.style.setProperty(
37+
'background-color',
38+
randomHexString
39+
);
40+
41+
currentColourElement.textContent = randomHexString;
42+
});

0 commit comments

Comments
 (0)