From b658bc9f164d5e2c173fd4867c6ec1f99f35de85 Mon Sep 17 00:00:00 2001 From: Maznu007 Date: Tue, 3 Mar 2026 01:29:55 +0600 Subject: [PATCH] Fix search validation and input handling --- index.html | 306 ++++++++++++++++++++++++++++------------------------- script.js | 224 ++++++++++++++++++++++----------------- 2 files changed, 290 insertions(+), 240 deletions(-) diff --git a/index.html b/index.html index 996cd9c7f..9a5366292 100644 --- a/index.html +++ b/index.html @@ -1,162 +1,178 @@ - - - - - - - - - Front-End Projects | Home Page - - - - - - - - - - - - - -
-

Loading...

-
-
-
-
-
-
-
+ + + + + + + + + Front-End Projects | Home Page + + + + + + + + + + + + + + + + + +
+

Loading...

+
+
+
+
+
+
+
- -
- -
+ +
+ +
- - - - -
- - -
-
-

Front End
Projects

-

A Repository where different types of Front - End Projects are present. If you have any front end - project then you can contribute to this open source repository.

-
-   Contribute - Now    -
-
- front-end coder -
-
- - - -
-
-
-

PROJECTS

-

Projects

-
-
- - -
+ + + + +
+
+
+

Front End
Projects

+

+ A Repository where different types of Front-End Projects are present. + If you have any front-end project then you can contribute to this open source repository. +

-
-
+ + +   Contribute Now    + + +
- +
+ front-end coder +
+ -
+ +
+
-

CONTRIBUTORS

-

Contributors

+

PROJECTS

+

Projects

-
    -
  • -
-
+ +
+ + +

+
+ +
+
- - - - - - - - + + + + + + + + + + + - + } + + \ No newline at end of file diff --git a/script.js b/script.js index f5dc616e2..fbedd74e2 100644 --- a/script.js +++ b/script.js @@ -1,135 +1,169 @@ import projects from "./projects.js"; +/* ============================= + Search Handling +============================= */ + const urlParams = new URLSearchParams(window.location.search); -const searchQuery = urlParams.get('s'); - -let filteredProjects = (searchQuery && searchQuery != "") ? projects.filter((project) => project.title.toLowerCase().includes(searchQuery.toLowerCase())) : projects; - -// displaying filtered projects -const projects_div = document.getElementsByClassName("projects")[0] -for (let project of filteredProjects) { - const project_div = document.createElement("div"); - project_div.className="project"; - - const img = document.createElement("img") - img.src = project.img; - project_div.appendChild(img); - - const project_info = document.createElement("div"); - project_info.className = "project-info"; - const heading = document.createElement("h2"); - heading.innerHTML = project.title; - project_info.appendChild(heading); - - const row = document.createElement("div"); - row.className="row"; - const tech = document.createElement("tech"); - tech.className="tech"; - - for (let t of project.tags) { - const span = document.createElement("span"); - span.innerHTML = t; - tech.appendChild(span); +const searchQuery = urlParams.get("s"); + +const projectsDiv = document.getElementsByClassName("projects")[0]; +const searchInput = document.getElementById("search"); +const searchForm = document.getElementById("searchForm"); +const searchMessage = document.getElementById("searchMessage"); + +function renderProjects(projectList) { + projectsDiv.innerHTML = ""; + + if (projectList.length === 0) { + projectsDiv.innerHTML = "

No projects found.

"; + return; } - row.appendChild(tech); + for (let project of projectList) { + const project_div = document.createElement("div"); + project_div.className = "project"; + + const img = document.createElement("img"); + img.src = project.img; + project_div.appendChild(img); + + const project_info = document.createElement("div"); + project_info.className = "project-info"; - const links = document.createElement("div"); - links.className = "links"; + const heading = document.createElement("h2"); + heading.innerHTML = project.title; + project_info.appendChild(heading); - const project_link = document.createElement("a"); - project_link.href = project['project-link']; - project_link.innerHTML = ``; - project_link.target="_blank" - links.appendChild(project_link); + const row = document.createElement("div"); + row.className = "row"; - const github_link = document.createElement("a"); - github_link.href = project['github-link']; - github_link.innerHTML = ``; - github_link.target="_blank" - links.appendChild(github_link); + const tech = document.createElement("div"); + tech.className = "tech"; + + for (let t of project.tags) { + const span = document.createElement("span"); + span.innerHTML = t; + tech.appendChild(span); + } - row.appendChild(links); - project_info.appendChild(row); + row.appendChild(tech); - const desc = document.createElement('p'); - desc.className="description"; - desc.innerHTML=project.description; - project_info.appendChild(desc); + const links = document.createElement("div"); + links.className = "links"; - project_div.appendChild(project_info); - projects_div.appendChild(project_div); + const project_link = document.createElement("a"); + project_link.href = project["project-link"]; + project_link.innerHTML = ``; + project_link.target = "_blank"; + links.appendChild(project_link); + + const github_link = document.createElement("a"); + github_link.href = project["github-link"]; + github_link.innerHTML = ``; + github_link.target = "_blank"; + links.appendChild(github_link); + + row.appendChild(links); + project_info.appendChild(row); + + const desc = document.createElement("p"); + desc.className = "description"; + desc.innerHTML = project.description; + project_info.appendChild(desc); + + project_div.appendChild(project_info); + projectsDiv.appendChild(project_div); + } } -// For search query form +let filteredProjects = projects; -if (searchQuery && searchQuery != "") - document.getElementById("search").value = searchQuery +if (searchQuery && searchQuery.trim() !== "") { + filteredProjects = projects.filter((project) => + project.title.toLowerCase().includes(searchQuery.toLowerCase()) + ); + searchInput.value = searchQuery; +} -const searchForm = document.getElementById("searchForm"); -searchForm.addEventListener("submit",(e) => { - const searchText = document.getElementById("search"); +renderProjects(filteredProjects); + +searchForm.addEventListener("submit", (e) => { e.preventDefault(); - - if (searchText.value == (searchQuery ? searchQuery : "")) { + + const query = searchInput.value.trim(); + searchMessage.textContent = ""; + + if (query === "") { + window.location = "/index.html"; return; } - window.location = `/index.html?s=${searchText.value}`; -}) + if (query.length > 40) { + searchMessage.textContent = "Search must be under 40 characters."; + return; + } -// For contributors list + const hasLetter = /[a-zA-Z]/.test(query); + const onlyValidChars = /^[a-zA-Z0-9\s]+$/.test(query); -fetch("https://api.github.com/repos/TusharKesarwani/Front-End-Projects/contributors?per_page=50", { - headers: { - 'Authorization': '' - } - }).then(response => response.json()) + if (!hasLetter || !onlyValidChars) { + searchMessage.textContent = "Please enter valid text."; + return; + } + + window.location = `/index.html?s=${encodeURIComponent(query)}`; +}); + +/* ============================= + Contributors Section +============================= */ + +fetch("https://api.github.com/repos/TusharKesarwani/Front-End-Projects/contributors?per_page=50") + .then(response => response.json()) .then(data => { - // Extract the data for each contributor const contributors = data.map(contributor => ({ username: contributor.login, avatarUrl: contributor.avatar_url, profileUrl: contributor.html_url })); - // Create and append HTML elements to display the contributors const contributorsList = document.querySelector("#contributors-list"); + contributors.forEach(contributor => { const li = document.createElement("li"); - li.innerHTML = `${contributor.username}`; + li.innerHTML = ` + + ${contributor.username} + + `; contributorsList.appendChild(li); }); - }); - //-----------for scrollbar button--------------- - - - function calculateScrollValue(){ +/* ============================= + Scroll Button +============================= */ - let scrollProgress=document.getElementById('progress'); - let progressValue=document.getElementById('progress-value'); +function calculateScrollValue() { + const scrollProgress = document.getElementById("progress"); + const pos = document.documentElement.scrollTop; + const calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; + const scrollValue = Math.round((pos * 100) / calcHeight); - let pos=document.documentElement.scrollTop; - let calcHeight=document.documentElement.scrollHeight-document.documentElement.clientHeight; + if (pos > 100) { + scrollProgress.style.display = "grid"; + } else { + scrollProgress.style.display = "none"; + } - let scrollValue=Math.round((pos*100)/calcHeight); - - // for hiding scrollbar button - if(pos>100){ - scrollProgress.style.display='grid'; - } - else{ - scrollProgress.style.display='none'; - } + scrollProgress.onclick = () => { + document.documentElement.scrollTop = 0; + }; + scrollProgress.style.background = + `conic-gradient(#0D4360 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`; +} - scrollProgress.addEventListener('click',()=>{ - document.documentElement.scrollTop=0; - }) - scrollProgress.style.background=`conic-gradient(#0D4360 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`; - - } - window.onscroll=calculateScrollValue; - window.onload=calculateScrollValue; +window.onscroll = calculateScrollValue; +window.onload = calculateScrollValue; \ No newline at end of file