Skip to content

Commit eee8d34

Browse files
AzharAli-githubAzharAli-github
authored
Merge pull request #47 from AzharAli-github/main
HTML-DOM
2 parents 59eb0a3 + 49dcfd6 commit eee8d34

File tree

6 files changed

+62
-0
lines changed

6 files changed

+62
-0
lines changed

‎JavaScript/Advance/DOM/4. HTML DOM/images/js-logo.png‎

4.15 KB
Loading

‎JavaScript/Advance/DOM/4. HTML DOM/images/one.jpg‎

207 KB
Loading

‎JavaScript/Advance/DOM/4. HTML DOM/images/two.jpg‎

168 KB
Loading

‎JavaScript/Advance/DOM/4. HTML DOM/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>DOM-Changing-HTML</title>
9+
<link rel="stylesheet" href="style.css">
10+
<link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
11+
12+
</head>
13+
14+
<body>
15+
<h1>DOM-Changing HTML</h1>
16+
<h2>Example One</h2>
17+
<p id="textOne">Hello There</p>
18+
<button onclick="DisplayOne()">Click to change the above content</button><br><br>
19+
<h2>Example Two</h2>
20+
<img src="images/one.jpg" alt="" id="imgOne"><br>
21+
<button onclick="DisplayTwo()">Click to change the above image</button>
22+
<h2>Example Three</h2>
23+
<p id="textTwo"></p>
24+
<h2>Example Four</h2>
25+
<p id="textThree"></p>
26+
<script src="script.js"></script>
27+
</body>
28+
29+
</html>

‎JavaScript/Advance/DOM/4. HTML DOM/script.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
//Example One
2+
let textOne = document.getElementById('textOne');
3+
4+
function DisplayOne() {
5+
textOne.innerHTML = "Hope you are Fine";
6+
}
7+
// Example Two
8+
let imgOne = document.getElementById('imgOne');
9+
10+
function DisplayTwo() {
11+
imgOne.src = "images/two.jpg"
12+
}
13+
// Example Three
14+
let textTwo = document.getElementById('textTwo');
15+
16+
function DisplayThree() {
17+
textTwo.innerHTML = "Date" + Date();
18+
}
19+
DisplayThree();
20+
21+
// Example Four
22+
23+
let textThree = document.getElementById('textThree');
24+
25+
textThree.innerHTML = document.write(Date())

‎JavaScript/Advance/DOM/4. HTML DOM/style.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
h2 {
2+
font-family: monospace;
3+
}
4+
5+
img {
6+
height: 300px;
7+
width: 300px;
8+
}

0 commit comments

Comments
 (0)