Skip to content

Commit d914b25

Browse files
Wcoder547Wcoder547
committed
dom project start ....
1 parent 5c0d321 commit d914b25

File tree

6 files changed

+199
-0
lines changed

6 files changed

+199
-0
lines changed

‎DomProjects/05_keyboardChecks/index.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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>Keyboard Check Project</title>
7+
</head>
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
body {
15+
background-color: #212121;
16+
color: #fff;
17+
}
18+
#insert {
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
}
23+
.color {
24+
border: 2px solid yellow;
25+
}
26+
</style>
27+
<body>
28+
<div id="project">
29+
<div id="insert">
30+
<div id="key">press any key and watch magic</div>
31+
</div>
32+
</div>
33+
</body>
34+
<script>
35+
const insert = document.getElementById("insert");
36+
window.addEventListener("keydown", function (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 === " " ? "space" : e.key}</td>
47+
<td>${e.keyCode}</td>
48+
<td>${e.code}</td>
49+
</tr>
50+
</table>
51+
</div>
52+
`;
53+
});
54+
</script>
55+
</html>

‎DomProjects/06_unlimitedColors/index.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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>Unlimited colors Project | By Malik waseem</title>
7+
</head>
8+
<body>
9+
<h1>Start should change the background Color</h1>
10+
<button id="start">start</button>
11+
<button id="stop">stop</button>
12+
</body>
13+
<script>
14+
const randomCOlor = function () {
15+
const hex = "0123456789ABCDEF";
16+
let color = "#";
17+
for (let i = 0; i < 6; i++) {
18+
color += hex[Math.floor(Math.random() * 16)];
19+
}
20+
//console.log(color);
21+
return color;
22+
};
23+
let intervalID;
24+
const startChangingColor = () => {
25+
//console.log(intervalID); //undefined
26+
if (!intervalID) {
27+
intervalID = setInterval(changebgColor, 1000);
28+
}
29+
function changebgColor() {
30+
document.body.style.backgroundColor = `${randomCOlor()}`;
31+
}
32+
};
33+
34+
const stopChangingColor = function () {
35+
clearInterval(intervalID);
36+
//console.log(intervalID); //undefined ..if we again press stop then intervalID will be undefiend| Null
37+
38+
intervalID = null; //after it wil be null
39+
};
40+
document
41+
.querySelector("#start")
42+
.addEventListener("click", startChangingColor);
43+
document
44+
.querySelector("#stop")
45+
.addEventListener("click", stopChangingColor);
46+
</script>
47+
</html>

‎DomProjects/colorSwitcher/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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>color-Switcher | By Malik waseem</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body style="background-color: #fff; color: #000000">
10+
<h2 id="main">color Scheme Switcher</h2>
11+
<div class="boxes">
12+
<div class="box" id="grey"></div>
13+
<div class="box" id="yellow"></div>
14+
<div class="box" id="blue"></div>
15+
<div class="box" id="aqua"></div>
16+
</div>
17+
<script src="index.js"></script>
18+
</body>
19+
</html>

‎DomProjects/colorSwitcher/index.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const box = document.querySelectorAll(".box");
2+
// console.log(box);
3+
4+
box.forEach(function (btn) {
5+
//console.log(btn);
6+
btn.addEventListener("click", function (e) {
7+
//you can use mouse over and many more like this .
8+
// console.log(e);
9+
// console.log(e.target);
10+
//firstMethod ..
11+
const body = document.querySelector("body");
12+
// body.style.backgroundColor = e.target.id;
13+
14+
if (e.target.id == "grey") {
15+
body.style.backgroundColor = e.target.id;
16+
}
17+
if (e.target.id == "yellow") {
18+
body.style.backgroundColor = e.target.id;
19+
}
20+
if (e.target.id == "blue") {
21+
body.style.backgroundColor = e.target.id;
22+
}
23+
if (e.target.id == "aqua") {
24+
body.style.backgroundColor = e.target.id;
25+
}
26+
});
27+
});

‎DomProjects/colorSwitcher/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+
}
6+
#main {
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
margin-top: 150px;
11+
font-weight: bold;
12+
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
13+
}
14+
.boxes {
15+
margin-top: 50px;
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
gap: 28px;
20+
margin-left: 20px;
21+
}
22+
23+
.box {
24+
width: 100px;
25+
height: 100px;
26+
border: 2px solid #000000;
27+
border-radius: 4px;
28+
}
29+
#grey {
30+
background-color: grey;
31+
}
32+
#yellow {
33+
background-color: yellow;
34+
}
35+
#blue {
36+
background-color: blue;
37+
}
38+
#aqua {
39+
background-color: aqua;
40+
}

‎DomProjects/details.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
``` js
2+
console.log('waseem akram');
3+
```
4+
5+
## project 1
6+
7+
## Color swticher..
8+
9+
```javascript
10+
console.log("waseem akram");
11+
```

0 commit comments

Comments
 (0)