Skip to content

Commit 96cf17f

Browse files
nilajcodernilajcoder
committed
day 6 Dom part 1 in js
1 parent 186c88b commit 96cf17f

9 files changed

Lines changed: 129 additions & 0 deletions

File tree

‎Chapter 6 DOM Part 1.docx‎

981 KB
Binary file not shown.

‎DOM Part 1/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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 in Js</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
</head>
9+
<body>
10+
<h1 class="heading-class">Dom Demo by Nilaj</h1>
11+
<h1 class="heading-class">Dom Demo In JS</h1>
12+
<h4>Topic 1 : Starter Code</h4>
13+
<p>Let's learn about Dom concepts in Js </p>
14+
<p>2nd Paragraph </p>
15+
<button id="btn">Click Me ..!</button>
16+
<h3 style="visibility: hidden;"> This is heading 3</h3>
17+
<div>
18+
<h3>Fruits</h3>
19+
<ul>
20+
<li>Mango</li>
21+
<li>Apple</li>
22+
<li>Litchi</li>
23+
</ul>
24+
</div>
25+
<script src="script.js"></script>
26+
</body>
27+
</html>

‎DOM Part 1/practice.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
let h2=document.querySelector("h2");
2+
console.dir(h2.innerText);
3+
h2.innerText=h2.innerText+ "from Apna College student";

‎DOM Part 1/practice1.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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 1</title>
7+
</head>
8+
<body>
9+
<h2>Hello JavaScript</h2>
10+
11+
</body>
12+
<script src="practice.js"></script>
13+
</html>

‎DOM Part 1/practice2.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>Practice 2</title>
7+
<link rel="stylesheet" href="style1.css"/>
8+
</head>
9+
<body>
10+
<h2>Hello JavaScript</h2>
11+
<div class="box">First div</div>
12+
<div class="box">Second div</div>
13+
<div class="box">Third div</div>
14+
</body>
15+
<script src="practice2.js"></script>
16+
</html>

‎DOM Part 1/practice2.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
let divs=document.querySelectorAll(".box");
2+
let idx=1;
3+
for(div of divs){
4+
div.innerText=`new unique value ${idx}`;
5+
idx++;
6+
}
7+

‎DOM Part 1/script.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
console.log("Document Object Model");
2+
console.dir(document);//document
3+
console.dir(document.body);
4+
console.log(document.body);
5+
6+
let heading=document.getElementById("heading");
7+
console.log(heading);
8+
9+
10+
let headings=document.getElementsByClassName("heading-class");
11+
console.dir(headings);
12+
console.log(headings);
13+
14+
15+
let paras=document.getElementsByTagName("p");
16+
console.log(paras);
17+
18+
19+
let firstele=document.querySelector("p");
20+
console.log(firstele);
21+
22+
let allele=document.querySelectorAll("p");
23+
console.log(allele);
24+
25+
26+
let btn=document.querySelector("#btn");
27+
console.dir(btn);
28+
console.log(btn);
29+
console.log(btn.tagName);
30+
31+
32+
let div=document.querySelector("div");
33+
console.dir(div)
34+
console.log(div.innerText);
35+
36+
37+
let h3=document.querySelector("h3");

‎DOM Part 1/style.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.heading-class{
2+
color: blue;
3+
text-decoration: "line-through";
4+
background-color: yellow;
5+
}
6+
7+
h4{
8+
color: brown;
9+
}
10+
11+
body{
12+
background-color: pink;
13+
}
14+
15+
button{
16+
background-color: blue;
17+
color: white;
18+
}

‎DOM Part 1/style1.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.box{
2+
height: 100px;
3+
width: 100px;
4+
border: 1px solid black;
5+
margin: 5px;
6+
text-align: center;
7+
background-color: aquamarine;
8+
}

0 commit comments

Comments
 (0)