Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e9d9c6c

Browse files
author
isid555
committed
Added Search func2
1 parent e62ea0e commit e9d9c6c

File tree

3 files changed

+47
-9
lines changed

3 files changed

+47
-9
lines changed

‎index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,9 @@ <h2>30 Days of JavaScript</h2>
9292
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">
9393
<button class="btn active">Learn JS</button>
9494
</a>
95+
<div>
96+
<input type="text" id="search-bar" placeholder="Search" />
97+
</div>
9598
</div>
9699
</div>
97100
</section>

‎script.js

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const projectsArea = document.querySelector(".project-list-area");
2-
2+
const searchBar = document.getElementById("search-bar");
3+
let allProjects = []
34
function getImagePath(id) {
45
return `public/assets/${id}.png`;
56
}
@@ -65,6 +66,7 @@ function getProjectContent(project) {
6566
}
6667

6768
function renderProjectList(projects) {
69+
projectsArea.innerHTML = ""
6870
projects.forEach((project) => {
6971
const projectCard = document.createElement("div");
7072
projectCard.className = "project-card";
@@ -86,15 +88,34 @@ function renderProjectList(projects) {
8688
});
8789
}
8890

91+
function filterProjects(query) {
92+
const filteredProjects = allProjects.filter(project =>
93+
project.name.toLowerCase().includes(query.toLowerCase()) ||
94+
project.description.toLowerCase().includes(query.toLowerCase())
95+
);
96+
renderProjectList(filteredProjects);
97+
}
98+
8999
function fetchProjects() {
100+
90101
fetch("./data.json")
91-
.then((res) => res.json())
92-
.then((projects) => {
93-
renderProjectList(projects);
94-
})
95-
.catch((err) => {
96-
console.log("Error fetching project data:", err);
97-
});
102+
.then((res) => res.json())
103+
.then((projects) => {
104+
allProjects = projects;
105+
renderProjectList(projects);
106+
searchBar.addEventListener( "input", () => {
107+
const query = searchBar.value;
108+
if (query) {
109+
filterProjects(query)
110+
}
111+
else {
112+
renderProjectList(projects);
113+
}
114+
});
115+
})
116+
.catch((err) => {
117+
console.log("Error fetching project data:", err);
118+
});
98119
}
99120

100121
fetchProjects();

‎style.css

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,21 @@ section.hero {
167167
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
168168
gap: 25px;
169169
}
170-
170+
#search-bar{
171+
height: 35px;
172+
width: 100%;
173+
max-width: 410px;
174+
border-radius: 8px;
175+
margin: 18px;
176+
padding: 8px;
177+
color: black;
178+
font-weight: bold;
179+
}
180+
#search-bar::placeholder{
181+
font-weight: bold;
182+
color: black;
183+
font-size: 13px;
184+
}
171185
.project-card {
172186
border: 1px solid black;
173187
border-radius: 6px;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /