Skip to content

Commit c44809f

Browse files
pkprashantkrpkprashantkr
authored
modified
1 parent da00694 commit c44809f

3 files changed

Lines changed: 135 additions & 0 deletions

File tree

‎Basics/21_AsyncProjects/one.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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>Async Projects</title>
7+
8+
<style>
9+
.buttons{
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
14+
}
15+
#start{
16+
background-color: rgb(23, 156, 5);
17+
color: white;
18+
padding: 15px;
19+
border-radius: 20%;
20+
margin: 10px;
21+
cursor: pointer;
22+
}
23+
#stop{
24+
background-color: rgb(167, 10, 10);
25+
color: white;
26+
padding: 15px;
27+
border-radius: 20%;
28+
margin: 10px;
29+
cursor: pointer;
30+
}
31+
32+
</style>
33+
</head>
34+
35+
<body>
36+
<h1> Click start to change the background color every second</h1>
37+
38+
<div class="buttons">
39+
<button id="start">Start</button>
40+
<button id="stop">Stop</button>
41+
</div>
42+
</body>
43+
44+
<script>
45+
46+
// Generate random colors
47+
48+
const randomColor = function() {
49+
const hex = "0123456789ABCDEF"
50+
let color = '#'
51+
for (let i = 0; i < 6; i++) {
52+
color += hex[Math.floor(Math.random() * 16)]
53+
}
54+
return color;
55+
};
56+
57+
let intervalID;
58+
59+
const startColor = function(){
60+
61+
if(!intervalID){
62+
intervalID = setInterval(changeBackground, 1000)
63+
}
64+
65+
function changeBackground(){
66+
document.body.style.backgroundColor = randomColor()
67+
}
68+
}
69+
70+
const stopColor = function(){
71+
clearInterval(intervalID)
72+
intervalID = null; // this line is just clearing the value of intervalID as it was overriding every time when button was clicked. This makes the code more clear and shows professionalism.
73+
}
74+
75+
document.querySelector('#start').addEventListener('click', startColor)
76+
document.querySelector('#stop').addEventListener('click', stopColor)
77+
78+
</script>
79+
</html>

‎Basics/21_AsyncProjects/two.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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>Project 2</title>
7+
8+
<style>
9+
.project{
10+
background-color: black;
11+
color: white;
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
text-align: center;
16+
height: 100vh;
17+
}
18+
19+
table,th,td{
20+
border: 1px solid #e7e7e7;
21+
padding: 6px;
22+
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<div class="project">
28+
<div id="insert">
29+
<div class="key"> Press a key to see magic</div>
30+
</div>
31+
</div>
32+
</body>
33+
34+
<script>
35+
const insert = document.querySelector('#insert')
36+
window.addEventListener('keydown', (e) => {
37+
insert.innerHTML = `
38+
<div class= "color">
39+
<table>
40+
<tr>
41+
<th>Key</th>
42+
<th>Keycode</th>
43+
<th>Code</th>
44+
</tr>
45+
<tr>
46+
<td> ${e.key}</td>
47+
<td> ${e.keyCode}</td>
48+
<td> ${e.code}</td>
49+
</tr>
50+
51+
</table>
52+
</div>
53+
`
54+
})
55+
</script>
56+
</html>

Basics/21_promise.html renamed to Basics/22_promise.html

File renamed without changes.

0 commit comments

Comments
 (0)