Improve accessibility and security in project grid

index.html

@@ -121,7 +121,6 @@ <h1 class="title">Contributors</h1>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
             crossorigin="anonymous"></script>
-        <script src="https://kit.fontawesome.com/d6de929348.js" crossorigin="anonymous"></script>
         <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
         <script>
             AOS.init();

script.js

@@ -1,135 +1,149 @@
 import projects from "./projects.js";
 
 const urlParams = new URLSearchParams(window.location.search);
-const searchQuery = urlParams.get('s');
+const searchQuery = urlParams.get("s");
 
-let filteredProjects = (searchQuery && searchQuery != "") ? projects.filter((project) => project.title.toLowerCase().includes(searchQuery.toLowerCase())) : projects;
+let filteredProjects =
+  searchQuery && searchQuery != ""
+    ? projects.filter((project) =>
+        project.title.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    : projects;
 
 // displaying filtered projects
-const projects_div = document.getElementsByClassName("projects")[0]
+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);
-    }
-
-    row.appendChild(tech);
-
-    const links = document.createElement("div");
-    links.className = "links";
-
-    const project_link = document.createElement("a");
-    project_link.href = project['project-link'];
-    project_link.innerHTML = `<i class="fa-solid fa-link"></i>`;
-    project_link.target="_blank"
-    links.appendChild(project_link);
-
-    const github_link = document.createElement("a");
-    github_link.href = project['github-link'];
-    github_link.innerHTML = `<i class="fa-brands fa-github"></i>`;
-    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);
-    projects_div.appendChild(project_div);
+  const project_div = document.createElement("div");
+  project_div.className = "project";
+
+  const img = document.createElement("img");
+  img.src = project.img;
+  // Performance & a11y: lazy-load grid images and add descriptive alt
+  img.loading = "lazy";
+  img.alt = project.title;
+  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);
+  }
+
+  row.appendChild(tech);
+
+  const links = document.createElement("div");
+  links.className = "links";
+
+  const project_link = document.createElement("a");
+  project_link.href = project["project-link"];
+  project_link.innerHTML = `<i class="fa-solid fa-link"></i>`;
+  project_link.target = "_blank";
+  // Security & a11y: prevent opener leak and add label for icon-only link
+  project_link.rel = "noopener noreferrer";
+  project_link.setAttribute("aria-label", `${project.title} live demo`);
+  links.appendChild(project_link);
+
+  const github_link = document.createElement("a");
+  github_link.href = project["github-link"];
+  github_link.innerHTML = `<i class="fa-brands fa-github"></i>`;
+  github_link.target = "_blank";
+  // Security & a11y for icon-only link
+  github_link.rel = "noopener noreferrer";
+  github_link.setAttribute("aria-label", `${project.title} source on GitHub`);
+  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);
+  projects_div.appendChild(project_div);
 }
 
 // For search query form
 
 if (searchQuery && searchQuery != "")
-    document.getElementById("search").value = searchQuery
+  document.getElementById("search").value = searchQuery;
 
 const searchForm = document.getElementById("searchForm");
-searchForm.addEventListener("submit",(e) => {
-    const searchText = document.getElementById("search");
-    e.preventDefault();
-
-    if (searchText.value == (searchQuery ? searchQuery : "")) {
-        return;
-    }
+searchForm.addEventListener("submit", (e) => {
+  const searchText = document.getElementById("search");
+  e.preventDefault();
 
-    window.location = `/index.html?s=${searchText.value}`;
-})
+  if (searchText.value == (searchQuery ? searchQuery : "")) {
+    return;
+  }
+
+  window.location = `/index.html?s=${searchText.value}`;
+});
 
 // For contributors list
 
-fetch("https://api.github.com/repos/TusharKesarwani/Front-End-Projects/contributors?per_page=50", {
-        headers: {
-            'Authorization': ''
-        }
-    }).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 = `<a href="${contributor.profileUrl}"><img src="${contributor.avatarUrl}" alt="${contributor.username}"></a>`;
-            contributorsList.appendChild(li);
-        });
-
+fetch(
+  "https://api.github.com/repos/TusharKesarwani/Front-End-Projects/contributors?per_page=50",
+  {
+    headers: {
+      Authorization: "",
+    },
+  }
+)
+  .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 = `<a href="${contributor.profileUrl}"><img src="${contributor.avatarUrl}" alt="${contributor.username}"></a>`;
+      contributorsList.appendChild(li);
     });
+  });
 
-       //-----------for scrollbar button---------------
-
-
-       function calculateScrollValue(){
+//-----------for scrollbar button---------------
 
-        let scrollProgress=document.getElementById('progress');
-        let progressValue=document.getElementById('progress-value');
+function calculateScrollValue() {
+  let scrollProgress = document.getElementById("progress");
+  let progressValue = document.getElementById("progress-value");
 
-        let pos=document.documentElement.scrollTop;
-        let calcHeight=document.documentElement.scrollHeight-document.documentElement.clientHeight;
+  let pos = document.documentElement.scrollTop;
+  let calcHeight =
+    document.documentElement.scrollHeight -
+    document.documentElement.clientHeight;
 
-        let scrollValue=Math.round((pos*100)/calcHeight);
+  let scrollValue = Math.round((pos * 100) / calcHeight);
 
-        // for hiding scrollbar button
-        if(pos>100){
-            scrollProgress.style.display='grid';
-        }
-        else{
-            scrollProgress.style.display='none';
-        }
+  // for hiding scrollbar button
+  if (pos > 100) {
+    scrollProgress.style.display = "grid";
+  } else {
+    scrollProgress.style.display = "none";
+  }
 
-
-        scrollProgress.addEventListener('click',()=>{
-            document.documentElement.scrollTop=0;
-        })
-       scrollProgress.style.background=`conic-gradient(#0D4360 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`;
-
-    }
-    window.onscroll=calculateScrollValue;
-    window.onload=calculateScrollValue;
+  scrollProgress.addEventListener("click", () => {
+    document.documentElement.scrollTop = 0;
+  });
+  scrollProgress.style.background = `conic-gradient(#0D4360 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`;
+}
+window.onscroll = calculateScrollValue;
+window.onload = calculateScrollValue;