+ 
+ 
+ 
+ 
+ 
+ 
+
+ WHAT
+ IS CALLED ART?
+
+ + Art, also called (to distinguish it from other art forms) visual art, a + visual object or experience consciously + created through an expression of skill or imagination. +
+
+
+
+
+
+
+ 7 TYPES OF ART
++ The seven different art forms are + + Painting, Sculpture, Literature, Architecture, Theater, Film, and + Music + + . However, back in the day, the seven different art forms were called + the Liberal Arts, consisting of Grammar, Logic, Rhetoric, Arithmetic, + Geometry, Astronomy, and Music. +
+ +
+
+
+ 
+
+ PAINTING
+
+
+ 
+
+ SCULPTURE
+
+
+ 
+
+ LITERATURE
+
+
+ 
+
+ ARCHITECTURE
+
+
+ 
+
+ CINEMA
+
+
+ 
+
+ MUSIC
+
+
+ 
+
+ THEATER
+
+
+
+
+
+ + Shoe
+
+
+
+
+
+
+ Food Name
++ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde + nostrum consequatur, nulla explicabo vero nesciunt architecto + officiis eius ullam alias. +
+ +${login}
+ +${bio}
+
+
+
+ ${followers} follower
+
+
+
+ ${following} following
+
+
+
+ `;
+
+ const section = document.createElement("section");
+ section.classList.add("about-user");
+ section.innerHTML = html;
+ mainContainer.insertAdjacentElement("afterbegin", section);
+ } catch (error) {
+ console.error(error);
+ }
+}
+
+async function fetchRepos(username) {
+ try {
+ const response = await fetch(`${API}${username}/subscriptions`);
+ if (!response.ok) throw new Error(response.statusText);
+ const data = await response.json();
+
+ data.forEach(
+ ({
+ name,
+ description,
+ forks_count,
+ language,
+ watchers_count,
+ git_url,
+ }) => {
+ const modifiedUrl = git_url
+ .replace(/^git:/, "http:")
+ .replace(/\.git$/, "");
+
+ const singleElement = document.createElement("div");
+ singleElement.classList.add("repo-card");
+ const html = `
+ ${name}
+
+
+ ${company}
+
+
+
+ ${location}
+
+
+
+ ${blog}
+
+
+
+ @${twitter_username}
+
+ ${description}
+
+ 
+ ${forks_count}
+
+
+ ${language}
+${watchers_count}
+
+ ${forks_count}
+ Public
+ `; + singleElement.innerHTML = html; + reposContainer.append(singleElement); + } + ); + } catch (error) { + console.error(error); + } +} + +form.addEventListener("submit", async (e) => { + e.preventDefault(); + const val = input.value; + + if (val) { + try { + await fetchData(val); + await fetchRepos(val); + } catch (error) { + console.log(error); + } finally { + input.value = ""; + } + } + + document + .querySelector("input") + .addEventListener("click", () => location.reload()); +}); diff --git a/99. Github Profile Clone/git-fork_1.svg b/99. Github Profile Clone/git-fork_1.svg new file mode 100644 index 0000000..5caf333 --- /dev/null +++ b/99. Github Profile Clone/git-fork_1.svg @@ -0,0 +1,39 @@ + \ No newline at end of file diff --git a/99. Github Profile Clone/index.html b/99. Github Profile Clone/index.html new file mode 100644 index 0000000..d313fbd --- /dev/null +++ b/99. Github Profile Clone/index.html @@ -0,0 +1,289 @@ + + + + +-
+
- + + Overview + + +
- + Repositories + +
- + Projects + +
- + Packages + +
- + Stars + +
Popular Repositories
+
+
+
+ ${titleLink}
+ ${urlLink} +${result.snippet}
+ `; + + searchResults.appendChild(resultItme); + }); +} + +searchForm.addEventListener("submit", async (e) => { + e.preventDefault(); + + const query = searchInput.value.trim(); + + if (!query) { + searchResults.innerHTML = "Please enter a valid search term.
"; + return; + } + + searchResults.innerHTML = "Loading ...
";
+
+ try {
+ const results = await searchWikipeida(query);
+
+ if (results.query.searchinfo.totalhits === 0) {
+ searchResults.innerHTML = "No results found.
"; + } else { + displayResults(results.query.search); + } + } catch (error) { + console.error(error); + searchResults.innerHTML = `An error occured while searching. Please try again later.
`; + } +}); + +// Event listener for the theme toggler +themeToggler.addEventListener("click", () => { + body.classList.toggle("dark-theme"); + if (body.classList.contains("dark-theme")) { + themeToggler.textContent = "Dark"; + themeToggler.style.background = "#fff"; + themeToggler.style.color = "#333"; + } else { + themeToggler.textContent = "Light"; + themeToggler.style.border = "2px solid #ccc"; + themeToggler.style.color = "#333"; + } +}); diff --git a/100. Wikipedia Clone/index.html b/100. Wikipedia Clone/index.html new file mode 100644 index 0000000..c65e204 --- /dev/null +++ b/100. Wikipedia Clone/index.html @@ -0,0 +1,25 @@ + + + + +
+
+
+
+
+
diff --git a/100. Wikipedia Clone/style.css b/100. Wikipedia Clone/style.css
new file mode 100644
index 0000000..4b378d1
--- /dev/null
+++ b/100. Wikipedia Clone/style.css
@@ -0,0 +1,131 @@
+* {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+.container {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+h1 {
+ font-size: 3rem;
+ margin-bottom: 2rem;
+}
+
+#search-form {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 2rem;
+}
+
+#search-input {
+ font-size: 1.2rem;
+ padding: 0.5rem 1rem;
+ margin-right: 1rem;
+ border: 2px solid #ccc;
+ border-radius: 0.25rem;
+ flex-grow: 1;
+}
+
+#search-input:focus {
+ outline: none;
+ border-color: #0074d9;
+}
+
+button[type="submit"] {
+ font-size: 1.2rem;
+ padding: 0.5rem 1rem;
+ background-color: #0074d9;
+ color: #fff;
+ border: none;
+ border-radius: 0.25rem;
+ cursor: pointer;
+}
+
+button[type="submit"]:hover {
+ background-color: #0063ad;
+}
+
+#search-results {
+ margin-bottom: 2rem;
+}
+
+.result-item {
+ margin-bottom: 1rem;
+}
+
+.result-title {
+ font-size: 1.5rem;
+ margin-top: 0;
+}
+
+.result-link {
+ display: block;
+ font-size: 1.2rem;
+ margin-bottom: 0.5rem;
+ color: #0074d9;
+}
+
+.result-link:hover {
+ text-decoration: underline;
+}
+
+.result-snippet {
+ margin-top: 0;
+}
+
+.spinner {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 2rem;
+ height: 10rem;
+}
+
+/* Dark theme */
+.header-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+#theme-toggler {
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ background: #e2e2e2;
+ padding: 10px 20px;
+ border-radius: 100px;
+}
+
+.dark-theme {
+ background-color: #282c34;
+ color: #fff;
+}
+
+.dark-theme #search-input {
+ background-color: #454545;
+ color: #fff;
+ border-color: #fff;
+}
+
+.dark-theme #search-input:focus {
+ border-color: #0074d9;
+}
+
+.dark-theme button[type="submit"] {
+ background-color: #0074d9;
+}
+
+.dark-theme .result-link,
+.dark-theme .result-link:hover {
+ color: #90caf9;
+}
diff --git a/README.md b/README.md
index 55922fc..ca86e21 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,5 @@
-# HTML-CSS-JavaScript-100-Projects
+# HTML, CSS & JAVASCRIPT 100+ PROJECTS 👇
+
+# [Watch me build 100 Projects](https://www.youtube.com/watch?v=XrwsMN2IWnE) 🤘🥂.
+
+
diff --git a/thumb.png b/thumb.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9d79d9c6f5638ce316602372fe9ddc14e97da0e
GIT binary patch
literal 209508
zcmb@tbyQr
+
+
+
+
+
+