Skip to content

Commit f4af6e5

Browse files
nilajcodernilajcoder
committed
day 7 Dom part 2 in js
1 parent 96cf17f commit f4af6e5

8 files changed

Lines changed: 100 additions & 0 deletions

File tree

‎Chapter 7 DOM Part 2.docx‎

803 KB
Binary file not shown.

‎DOM Part 2/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>Dom Part 2</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
</head>
9+
<body>
10+
<h1>Hello </h1>
11+
<div id="box" name="Jsdiv">This is div
12+
13+
<ul>
14+
List
15+
<li>item 1</li>
16+
<li>item 2</li>
17+
<li>item 3</li>
18+
</ul>
19+
</div>
20+
<p class="para"> This is First Paragraph</p>
21+
22+
<script src="scripts.js"></script>
23+
</body>
24+
25+
</html>

‎DOM Part 2/practice.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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>Practice Q1</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
</head>
9+
<body>
10+
11+
12+
<script src="practice.js"></script>
13+
</body>
14+
</html>

‎DOM Part 2/practice.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
let newbtn=document.createElement("button");
2+
newbtn.innerText="click Me..!";
3+
newbtn.style.color="white";
4+
newbtn.style.backgroundColor="red";
5+
document.querySelector("body").prepend(newbtn);
6+
7+

‎DOM Part 2/practice2.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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>Practice Q2</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
</head>
9+
<body>
10+
11+
<p class="content"> I am a Paragraph.</p>
12+
<script src="practice2.js"></script>
13+
</body>
14+
</html>

‎DOM Part 2/practice2.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
let para=document.querySelector("p");
2+
console.log(para);
3+
console.log(para.classList);
4+
5+
let newpara=para.classList.add("newclass");
6+
console.log(newpara);

‎DOM Part 2/scripts.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
let div=document.querySelector("div");
2+
console.log(div);
3+
let id=div.getAttribute("id");
4+
console.log(id);
5+
6+
let name=div.getAttribute("name");
7+
console.log(name);
8+
9+
10+
let para=document.querySelector("p");
11+
//console.log(para.setAttribute("class","new para"));
12+
para.remove();
13+
14+
15+
16+
let btn=document.createElement("button");
17+
btn.innerText="click me";
18+
console.log(btn);
19+
20+
let div1=document.querySelector("div");
21+
div.append(btn);
22+
div.prepend(btn);
23+
div.before(btn);
24+
div.after(btn);
25+

‎DOM Part 2/style.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.content{
2+
color: red;
3+
4+
}
5+
6+
.newclass{
7+
background-color: green;
8+
9+
}

0 commit comments

Comments
 (0)