Skip to content

Commit 817abe0

Browse files
ChinmayKaitadeChinmayKaitade
committed
11-Async JavaScript Project added
1 parent 01f3e5d commit 817abe0

File tree

12 files changed

+295
-0
lines changed

12 files changed

+295
-0
lines changed

‎11_Projects_with_Async_JS/01_Project_Color_Changer/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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 One - Color Changer</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div id="main">
11+
<h1>
12+
Start Should Change the <span>Background Color</span> in Every Second
13+
</h1>
14+
15+
<div class="button-container">
16+
<button id="start">Start</button>
17+
<button id="stop">Stop</button>
18+
</div>
19+
20+
<footer>© Copyrights BgChanger | All Rights Reserved.</footer>
21+
</div>
22+
23+
<script src="script.js"></script>
24+
</body>
25+
</html>

‎11_Projects_with_Async_JS/01_Project_Color_Changer/script.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// generate a random color via hex value
2+
const randomColor = function () {
3+
const hex = "0123456789ABCDEF";
4+
5+
let color = "#";
6+
for (let i = 0; i < 6; i++) {
7+
color += hex[Math.floor(Math.random() * 16)];
8+
}
9+
return color;
10+
};
11+
12+
// console.log(randomColor()); // random color value
13+
14+
let intervalId;
15+
16+
// startChangingColor method --> for starting changing color
17+
const startChangingColor = function () {
18+
if (!intervalId) {
19+
intervalId = setInterval(changeBgColor, 1000);
20+
}
21+
22+
function changeBgColor() {
23+
document.body.style.backgroundColor = randomColor();
24+
}
25+
};
26+
27+
// stopChangingColor method --> for stopping changing color
28+
const stopChangingColor = function () {
29+
clearInterval(intervalId);
30+
intervalId = null;
31+
};
32+
33+
document.querySelector("#start").addEventListener("click", startChangingColor);
34+
35+
document.querySelector("#stop").addEventListener("click", stopChangingColor);

‎11_Projects_with_Async_JS/01_Project_Color_Changer/style.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "Gilroy";
6+
}
7+
8+
html,
9+
body {
10+
width: 100%;
11+
height: 100%;
12+
background-color: #212121;
13+
color: #f1f1f1;
14+
}
15+
16+
#main {
17+
height: 100vh;
18+
width: 100%;
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
}
24+
25+
h1 {
26+
font-size: 2.4rem;
27+
}
28+
29+
h1 span {
30+
color: orange;
31+
}
32+
33+
.button-container {
34+
margin-top: 45px;
35+
padding: 10px;
36+
}
37+
38+
.button-container button {
39+
padding: 7px 15px;
40+
font-size: 1.8rem;
41+
font-weight: 600;
42+
border-radius: 8px;
43+
border: none;
44+
margin-left: 15px;
45+
text-transform: uppercase;
46+
cursor: pointer;
47+
}
48+
49+
.button-container button:hover {
50+
background-color: #a3a3a3;
51+
transition: all ease-in-out 0.3s;
52+
}
53+
54+
footer {
55+
position: absolute;
56+
bottom: 30px;
57+
font-size: 1.4rem;
58+
cursor: pointer;
59+
user-select: none;
60+
}

‎11_Projects_with_Async_JS/02_Project_Keyboard_Check/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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+
<link rel="stylesheet" href="style.css" />
7+
<title>Project Two - Keyboard Check</title>
8+
<link rel="stylesheet" type="text/css" href="../styles.css" />
9+
<link rel="stylesheet" href="style.css" />
10+
</head>
11+
<body>
12+
<div class="project">
13+
<div id="insert">
14+
<div class="key">Press any Keyboard Key and See the Magic</div>
15+
</div>
16+
</div>
17+
18+
<script src="script.js"></script>
19+
</body>
20+
</html>

‎11_Projects_with_Async_JS/02_Project_Keyboard_Check/script.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const insert = document.getElementById("insert");
2+
3+
window.addEventListener("keydown", (e) => {
4+
insert.innerHTML = `
5+
<div class="color">
6+
<table>
7+
<tr>
8+
<th>Key</th>
9+
<th>Keycode</th>
10+
<th>Code</th>
11+
</tr>
12+
<tr>
13+
<th>${e.key === " " ? "Space" : e.key}</th>
14+
<th>${e.keyCode}</th>
15+
<th>${e.code}</th>
16+
</tr>
17+
</table>
18+
</div>
19+
`;
20+
});

‎11_Projects_with_Async_JS/02_Project_Keyboard_Check/style.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "Gilroy";
6+
}
7+
8+
html,
9+
body {
10+
width: 100%;
11+
height: 100%;
12+
}
13+
14+
table,
15+
th,
16+
td {
17+
border: 1px solid #e7e7e7;
18+
font-size: 2.4rem;
19+
padding: 12px;
20+
}
21+
22+
.key{
23+
font-size: 2.7rem;
24+
}
25+
26+
.project {
27+
background-color: #1c1c1c;
28+
color: #ffffff;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
text-align: center;
33+
height: 100vh;
34+
}
35+
36+
.color {
37+
color: aliceblue;
38+
display: flex;
39+
flex-direction: row;
40+
}

‎11_Projects_with_Async_JS/38_setInterval/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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>Document</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<h1>Chai aur JavaScript</h1>
11+
<button id="start">Start</button>
12+
<button id="stop">Stop</button>
13+
14+
<script src="script.js"></script>
15+
</body>
16+
</html>

‎11_Projects_with_Async_JS/38_setInterval/script.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// setInterval ✅
2+
// setInterval(() => {
3+
// console.log("Chinmay", Math.round(Math.random() * 100 + 1));
4+
// }, 1000);
5+
6+
// reference of function ✔️
7+
// const sayNumber = function (str) {
8+
// console.log(str, Math.round(Math.random() * 100 + 1));
9+
// };
10+
// const intervalId = setInterval(sayNumber, 1000, "Hello");
11+
12+
// clearInterval(intervalId);
13+
14+
// Assignment -
15+
// Q. Design a code, where if user clicks on start button then the number printing will start and when you press stop button the number printing will stop.
16+
17+
document.querySelector("#start").addEventListener("click", function () {
18+
const startNum = setInterval(() => {
19+
console.log(`The Random Number is ${Math.round(Math.random() * 100 + 1)} `);
20+
}, 1000);
21+
22+
document.querySelector("#stop").addEventListener("click", function () {
23+
clearInterval(startNum);
24+
});
25+
});

‎11_Projects_with_Async_JS/38_setInterval/style.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "Gilroy";
6+
}
7+
8+
html,
9+
body {
10+
width: 100%;
11+
height: 100%;
12+
background-color: #212121;
13+
color: #f1f1f1;
14+
}

‎11_Projects_with_Async_JS/38_setTimeout/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>Document</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<h1>Chai aur Code</h1>
11+
<button id="stop">Stop</button>
12+
13+
<script src="script.js"></script>
14+
</body>
15+
</html>

0 commit comments

Comments
 (0)