Skip to content

Commit fc4210e

Browse files
in-imitablein-imitable
committed
searching the DOM manipulation
1 parent 8786582 commit fc4210e

File tree

3 files changed

+102
-0
lines changed

3 files changed

+102
-0
lines changed

‎Chapter 7/36 Searching the DOM/index.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width">
7+
<title>Nature</title>
8+
<link href="style.css" rel="stylesheet" type="text/css" />
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
10+
</head>
11+
12+
<body>
13+
<nav class="navbar navbar-expand-lg bg-light">
14+
<div class="container-fluid">
15+
<a class="navbar-brand" href="#">Nature</a>
16+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
17+
<span class="navbar-toggler-icon"></span>
18+
</button>
19+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
20+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
21+
<li class="nav-item">
22+
<a class="nav-link active" aria-current="page" href="#">Home</a>
23+
</li>
24+
<li class="nav-item">
25+
<a class="nav-link" href="#">Link</a>
26+
</li>
27+
<li class="nav-item dropdown">
28+
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
29+
Dropdown
30+
</a>
31+
<ul class="dropdown-menu">
32+
<li><a class="dropdown-item" href="#">Action</a></li>
33+
<li><a class="dropdown-item" href="#">Another action</a></li>
34+
<li><hr class="dropdown-divider"></li>
35+
<li><a class="dropdown-item" href="#">Something else here</a></li>
36+
</ul>
37+
</li>
38+
</ul>
39+
<form class="d-flex" role="search">
40+
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
41+
<button class="btn btn-outline-success" type="submit">Search</button>
42+
</form>
43+
</div>
44+
</div>
45+
</nav>
46+
47+
<div class="container row m-auto justify-content-center">
48+
<div class="card mx-2" style="width: 18rem;">
49+
<img src="https://images.hdqwalls.com/download/nature-hd-sd-3840x2160.jpg" class="card-img-top" alt="...">
50+
<div class="card-body">
51+
<h5 class="card-title">Card title</h5>
52+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
53+
<a href="#" class="btn btn-primary this">Go somewhere</a>
54+
</div>
55+
</div>
56+
<div class="card mx-2" style="width: 18rem;">
57+
<img src="https://cdn.wallpapersafari.com/4/95/6rORFi.jpg" class="card-img-top" alt="...">
58+
<div class="card-body">
59+
<h5 class="card-title">Card title</h5>
60+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
61+
<a href="#" class="btn btn-primary">Go somewhere</a>
62+
</div>
63+
</div>
64+
<div class="card mx-2" style="width: 18rem;">
65+
<img src="https://images.wallpapersden.com/image/download/nepal-mountain_bG1rbWeUmZqaraWkpJRobWllrWdma2U.jpg" class="card-img-top" alt="...">
66+
<div class="card-body">
67+
<h5 class="card-title">Card title</h5>
68+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
69+
<a href="#" class="btn btn-primary">Go somewhere</a>
70+
</div>
71+
</div>
72+
</div>
73+
74+
<script src="script.js"></script>
75+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
76+
77+
78+
</body>
79+
80+
</html>

‎Chapter 7/36 Searching the DOM/script.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
//Change Card Title color to red
2+
let ctitle = document.getElementsByClassName("card-title")
3+
// ctitle[0].style.color = "red"
4+
5+
//querySelector
6+
let ctitles = document.querySelectorAll(".card-title")
7+
console.log(ctitles)
8+
ctitles[0].style.color = "red"
9+
ctitles[1].style.color = "blue"
10+
ctitles[2].style.color = "green"
11+
12+
document.querySelector(".this").style.color = "yellow"
13+
document.querySelector(".this").style.background = "green"

‎Chapter 7/36 Searching the DOM/style.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
html, body {
2+
height: 100%;
3+
width: 100%;
4+
}
5+
/* .container{
6+
align-items: center;
7+
justify-content: center;
8+
margin: auto;
9+
} */

0 commit comments

Comments
 (0)