Skip to content

Commit 4c167ef

Browse files
HuXn-WebDevHuXn-WebDev
committedJun 23, 2023
100 Projects Done
1 parent b3f3c76 commit 4c167ef

File tree

5 files changed

+243
-1
lines changed

5 files changed

+243
-1
lines changed
 

‎100. Wikipedia Clone/app.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
const searchForm = document.getElementById("search-form");
2+
const searchInput = document.getElementById("search-input");
3+
const searchResults = document.getElementById("search-results");
4+
5+
// Theme toggler elements
6+
const themeToggler = document.getElementById("theme-toggler");
7+
const body = document.body;
8+
9+
async function searchWikipeida(query) {
10+
const encodedQuery = encodeURIComponent(query);
11+
const endpoint = `https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=10&srsearch=${encodedQuery}`;
12+
13+
const reponse = await fetch(endpoint);
14+
15+
if (!reponse.ok) {
16+
throw new Error("Faild to fetch search results form wikipedia API.");
17+
}
18+
19+
const json = await reponse.json();
20+
return json;
21+
}
22+
23+
function displayResults(results) {
24+
// Remove the loading spinner
25+
searchResults.innerHTML = "";
26+
27+
results.forEach((result) => {
28+
const url = `https://en.wikipedia.org/?curid=${results.pageid}`;
29+
const titleLink = `<a href="${url}" target="_blank" rel="noopener">${result.title} </a>`;
30+
const urlLink = `<a href="${url} class="result-link" target="_blank" rel="noopener">${url}</a>`;
31+
32+
const resultItme = document.createElement("div");
33+
resultItme.className = "result-item";
34+
resultItme.innerHTML = `
35+
<h3 class="result-title">${titleLink}</h3>
36+
${urlLink}
37+
<p class="result-snippet">${result.snippet}</p>
38+
`;
39+
40+
searchResults.appendChild(resultItme);
41+
});
42+
}
43+
44+
searchForm.addEventListener("submit", async (e) => {
45+
e.preventDefault();
46+
47+
const query = searchInput.value.trim();
48+
49+
if (!query) {
50+
searchResults.innerHTML = "<p>Please enter a valid search term. </p>";
51+
return;
52+
}
53+
54+
searchResults.innerHTML = "<div class='spinner'>Loading ... </div>";
55+
56+
try {
57+
const results = await searchWikipeida(query);
58+
59+
if (results.query.searchinfo.totalhits === 0) {
60+
searchResults.innerHTML = "<p>No results found. </p>";
61+
} else {
62+
displayResults(results.query.search);
63+
}
64+
} catch (error) {
65+
console.error(error);
66+
searchResults.innerHTML = `<p>An error occured while searching. Please try again later. </p>`;
67+
}
68+
});
69+
70+
// Event listener for the theme toggler
71+
themeToggler.addEventListener("click", () => {
72+
body.classList.toggle("dark-theme");
73+
if (body.classList.contains("dark-theme")) {
74+
themeToggler.textContent = "Dark";
75+
themeToggler.style.background = "#fff";
76+
themeToggler.style.color = "#333";
77+
} else {
78+
themeToggler.textContent = "Light";
79+
themeToggler.style.border = "2px solid #ccc";
80+
themeToggler.style.color = "#333";
81+
}
82+
});

‎100. Wikipedia Clone/index.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>Wiki Clone</title>
6+
<link rel="stylesheet" href="style.css" />
7+
</head>
8+
<body>
9+
<div class="container">
10+
<div class="header-container">
11+
<h1>Search Wikipedia</h1>
12+
<span id="theme-toggler">Light</span>
13+
</div>
14+
15+
<form id="search-form">
16+
<input type="text" id="search-input" placeholder="Enter search term" />
17+
<button type="submit">Search</button>
18+
</form>
19+
20+
<div id="search-results"></div>
21+
</div>
22+
23+
<script src="app.js"></script>
24+
</body>
25+
</html>

‎100. Wikipedia Clone/style.css

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
font-family: Arial, sans-serif;
7+
margin: 0;
8+
padding: 0;
9+
}
10+
11+
.container {
12+
max-width: 800px;
13+
margin: 0 auto;
14+
padding: 2rem;
15+
}
16+
17+
h1 {
18+
font-size: 3rem;
19+
margin-bottom: 2rem;
20+
}
21+
22+
#search-form {
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
margin-bottom: 2rem;
27+
}
28+
29+
#search-input {
30+
font-size: 1.2rem;
31+
padding: 0.5rem 1rem;
32+
margin-right: 1rem;
33+
border: 2px solid #ccc;
34+
border-radius: 0.25rem;
35+
flex-grow: 1;
36+
}
37+
38+
#search-input:focus {
39+
outline: none;
40+
border-color: #0074d9;
41+
}
42+
43+
button[type="submit"] {
44+
font-size: 1.2rem;
45+
padding: 0.5rem 1rem;
46+
background-color: #0074d9;
47+
color: #fff;
48+
border: none;
49+
border-radius: 0.25rem;
50+
cursor: pointer;
51+
}
52+
53+
button[type="submit"]:hover {
54+
background-color: #0063ad;
55+
}
56+
57+
#search-results {
58+
margin-bottom: 2rem;
59+
}
60+
61+
.result-item {
62+
margin-bottom: 1rem;
63+
}
64+
65+
.result-title {
66+
font-size: 1.5rem;
67+
margin-top: 0;
68+
}
69+
70+
.result-link {
71+
display: block;
72+
font-size: 1.2rem;
73+
margin-bottom: 0.5rem;
74+
color: #0074d9;
75+
}
76+
77+
.result-link:hover {
78+
text-decoration: underline;
79+
}
80+
81+
.result-snippet {
82+
margin-top: 0;
83+
}
84+
85+
.spinner {
86+
display: flex;
87+
justify-content: center;
88+
align-items: center;
89+
font-size: 2rem;
90+
height: 10rem;
91+
}
92+
93+
/* Dark theme */
94+
.header-container {
95+
display: flex;
96+
justify-content: space-between;
97+
align-items: center;
98+
}
99+
100+
#theme-toggler {
101+
border: none;
102+
background: transparent;
103+
cursor: pointer;
104+
background: #e2e2e2;
105+
padding: 10px 20px;
106+
border-radius: 100px;
107+
}
108+
109+
.dark-theme {
110+
background-color: #282c34;
111+
color: #fff;
112+
}
113+
114+
.dark-theme #search-input {
115+
background-color: #454545;
116+
color: #fff;
117+
border-color: #fff;
118+
}
119+
120+
.dark-theme #search-input:focus {
121+
border-color: #0074d9;
122+
}
123+
124+
.dark-theme button[type="submit"] {
125+
background-color: #0074d9;
126+
}
127+
128+
.dark-theme .result-link,
129+
.dark-theme .result-link:hover {
130+
color: #90caf9;
131+
}

‎README.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
# HTML-CSS-JavaScript-100-Projects
1+
# HTML, CSS & JAVASCRIPT 100+ PROJECTS 👇
2+
3+
# [Watch me build 100 Projects](https://www.youtube.com/watch?v=XrwsMN2IWnE) 🤘🥂.
4+
5+
![Course Thumbnail](/thumb.png)

‎thumb.png

205 KB
Loading

0 commit comments

Comments
 (0)
Failed to load comments.