Skip to content

Commit 60a1200

Browse files
drehimselfdrehimself
committed
Episode 25 - Simple DOM Exercises
1 parent 7eec1a5 commit 60a1200

File tree

5 files changed

+173
-0
lines changed

5 files changed

+173
-0
lines changed

‎17-exercies.html renamed to ‎17-exercises/17-exercies.html

File renamed without changes.

‎17-exercises.js renamed to ‎17-exercises/17-exercises.js

File renamed without changes.

‎25-simple-dom-exercises/background-selector/index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Background Color Selector</title>
8+
<style>
9+
.container {
10+
margin: auto;
11+
margin-top: 40px;
12+
max-width: 600px;
13+
text-align: center;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<div class="container">
19+
<h2>Background Color Selector</h2>
20+
21+
<div><input type="color" id="colorSelector"></div>
22+
23+
<div>
24+
<button id="getRandomColor">Random BG Color</button>
25+
</div>
26+
</div>
27+
28+
<script>
29+
const colorSelector = document.querySelector('#colorSelector');
30+
const getRandomColor = document.querySelector('#getRandomColor');
31+
32+
function getRandomRgbValue() {
33+
return Math.floor(Math.random() * 256);
34+
}
35+
36+
colorSelector.addEventListener('input', event => {
37+
document.body.style.backgroundColor = event.target.value;
38+
})
39+
40+
getRandomColor.addEventListener('click', () => {
41+
document.body.style.backgroundColor = `rgb(${getRandomRgbValue()}, ${getRandomRgbValue()}, ${getRandomRgbValue()})`;
42+
})
43+
</script>
44+
</body>
45+
</html>

‎25-simple-dom-exercises/character-counter/index.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Character Counter</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h2>Character Counter</h2>
12+
<form action="">
13+
<div>
14+
<textarea name="description" id="description" cols="40" rows="10"></textarea>
15+
<div id="charactersContainer">
16+
Characters:
17+
<span id="characters">0</span>
18+
/
19+
<span id="maxCharacters"></span>
20+
</div>
21+
</div>
22+
</form>
23+
</div>
24+
25+
<script>
26+
const textArea = document.querySelector('textarea');
27+
const charactersElement = document.querySelector('#characters');
28+
const maxCharactersElement = document.querySelector('#maxCharacters');
29+
const charactersContainer = document.querySelector('#charactersContainer');
30+
const maxCharacters = 10;
31+
let characters = 0;
32+
33+
maxCharactersElement.textContent = maxCharacters;
34+
35+
textArea.addEventListener('input', () => {
36+
if (characters >= maxCharacters) {
37+
textArea.value = textArea.value.substring(0, maxCharacters);
38+
}
39+
40+
characters = textArea.value.length;
41+
charactersElement.textContent = characters;
42+
43+
if (characters > maxCharacters - 10) {
44+
charactersContainer.style.color = 'red';
45+
} else {
46+
charactersContainer.style.color = 'black';
47+
}
48+
});
49+
50+
51+
</script>
52+
</body>
53+
</html>

‎25-simple-dom-exercises/counter/index.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Counter</title>
8+
<style>
9+
.container {
10+
margin: auto;
11+
margin-top: 40px;
12+
max-width: 600px;
13+
text-align: center;
14+
}
15+
16+
.counter-value {
17+
font-size: 32px;
18+
font-weight: bold;
19+
}
20+
21+
.button-container {
22+
display: flex;
23+
justify-content: center;
24+
gap: 16px;
25+
margin-top: 20px;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div class="container">
31+
<h2>Counter</h2>
32+
<div class="counter-value" id="counter-value">0</div>
33+
<div class="button-container">
34+
<button id="decrement">Decrement</button>
35+
<button id="increment">Increment</button>
36+
<button id="reset">Reset</button>
37+
</div>
38+
</div>
39+
<script>
40+
const counterValueElement = document.querySelector('#counter-value');
41+
const decrementButton = document.querySelector('#decrement');
42+
const incrementButton = document.querySelector('#increment');
43+
const resetButton = document.querySelector('#reset');
44+
let count = 0;
45+
46+
function setColor() {
47+
if (count > 0) {
48+
counterValueElement.style.color = 'green';
49+
} else if (count === 0) {
50+
counterValueElement.style.color = 'black';
51+
} else {
52+
counterValueElement.style.color = 'red';
53+
}
54+
}
55+
56+
decrementButton.addEventListener('click', () => {
57+
count = count - 1;
58+
counterValueElement.textContent = count;
59+
setColor();
60+
});
61+
62+
incrementButton.addEventListener('click', () => {
63+
count = count + 1;
64+
counterValueElement.textContent = count;
65+
setColor();
66+
});
67+
68+
resetButton.addEventListener('click', () => {
69+
count = 0
70+
counterValueElement.textContent = count;
71+
setColor();
72+
});
73+
</script>
74+
</body>
75+
</html>

0 commit comments

Comments
 (0)