toolslibrary/script.js at master · bl4nkspace/toolslibrary · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
const container = document.getElementById("container");
const url = "data/tools.json";

// Tool suggestion modal
const toolSuggestion = document.getElementById("toolSuggestion");
const closeToolSuggestion = document.getElementById("closeSuggestion");

closeToolSuggestion.addEventListener("click", () => {
    toolSuggestion.style.display = "none";
});

//Search functionality
const searchInput = document.getElementById("searchInput");
searchInput.addEventListener("input", () => {
    const searchTerm = searchInput.value.toLowerCase();
    const tools = document.getElementsByClassName("tool");

    // Loop through all tools and filter based on search term
    for (const tool of tools) {
        const toolName = tool.querySelector(".toolName").textContent.toLowerCase();
        const toolDescription = tool.querySelector(".toolDescription").textContent.toLowerCase();
        const toolTags = tool.querySelector(".toolTags").textContent.toLowerCase();

        // Show or hide tools based on search term and priority
        //(name > description > tags)
        if (toolName.includes(searchTerm)) {
            tool.style.display = "block";
            tool.style.order = "1";
        } else if (toolDescription.includes(searchTerm)) {
            tool.style.display = "block";
            tool.style.order = "2";
        } else if (toolTags.includes(searchTerm)) {
            tool.style.display = "block";
            tool.style.order = "3";
        } else {
            tool.style.display = "none";
        }
    }
});

//Error handling
function sendError(error) {
    container.innerHTML += `<div class="error">Error: ${error}</div>`
}

//Import tools from JSON file
async function getData() {
  const url = "data/tools.json";
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }

    return response.json();

  } catch (error) {
    sendError(error.message);
  }
}


function addTool(name, url, description, icon, tags, featured) {
  let tagsElement = "<em class='toolTags'>";
  for (const tag of tags) {
    tagsElement += `#${tag} `;
  }
  tagsElement += "</em>";
  container.innerHTML += `<div class="tool">${featured ? `<span class="featuredLabel">${featured}</span>` : ""}<img src="assets/${icon}" alt="logo" class="toolLogo"><h3 class="toolName">${name}</h3><p class="toolDescription">${description}</p>${tagsElement}<a class="toolLink" href="${url}" target="_blank">Visit</a></div>`;
}


//Fetch and display tools
const result = getData();
result.then((data) => {
  data.sort((a, b) => a.name.localeCompare(b.name)); //Alphabetical order
  for (const tool of data) {
    addTool(tool.name, tool.url, tool.description, tool.icon, tool.tags, tool.featured);
  }
});