Api-Connection/script.js at main · Asadawn/Api-Connection · 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
81
82
83
84
85
86
87
88
89
90
91
//fetch api from url
let url = "https://kontests.net/api/v1/all";
let promise = fetch(url);
promise
  .then((v) => {
    return v.json();
  })
  .then((contest) => {
    ihtml = "";
    for (const key in contest) {
      console.log(contest[key]);
      ihtml += `
      <div class="card mt-2 ml-4 mr-2" style="width: 20rem;">
                    <img src="https://blog.ndepend.com/wp-content/uploads/Is-AI-Assisted-Coding-the-Next-Developer-Productivity-Silver-Bullet.png" class="card-img-top" alt="...">
                    <div class="card-body ">
                      <h5 class="card-title">${contest[key].name}</h5>
                      <p class="card-text"><b>Starts at: </b>${contest[key].start_time} </p>
                      <p class="card-text"><b>Ends at: </b> ${contest[key].end_time} </p>
                      <p class="card-text"><b>Duration: </b> ${contest[key].duration} </p>
                      <a href="${contest[key].url}" class="btn btn-primary">Enter</a>
                    </div>
                  </div>
      `;
    }
    cardContainer.innerHTML = ihtml;
  });

const searchForm = document.getElementById("searchForm");
const searchInput = document.getElementById("searchInput");
const resultsList = document.getElementById("cardContainer");

searchForm.addEventListener("submit", function (event) {
  event.preventDefault(); // Prevent form submission

  const searchTerm = searchInput.value.trim();

  // Fetch data from API
  fetch("https://kontests.net/api/v1/all")
    .then((response) => response.json())
    .then((data) => {
      // Apply filter to find  information based on search
      let filteredData = data.filter((item) => item.name.includes(searchTerm));

      var filteredDataArray = [];
      filteredDataArray.unshift(...filteredData);
      console.log(filteredDataArray);

      // Display filtered results
      filteredData.forEach((item) => {
        cardContainer.innerHTML = "";
        // console.log(item.name);
        let ihtml = `
      <div class="card mt-2 ml-4 mr-2" style="width: 20rem;">
                    <img src="https://blog.ndepend.com/wp-content/uploads/Is-AI-Assisted-Coding-the-Next-Developer-Productivity-Silver-Bullet.png" class="card-img-top" alt="...">
                    <div class="card-body ">
                      <h5 class="card-title">${item.name}</h5>
                      <p class="card-text"><b>Starts at: </b>${item.start_time} </p>
                      <p class="card-text"><b>Ends at: </b> ${item.end_time} </p>
                      <p class="card-text"><b>Duration: </b> ${item.duration} </p>
                      <a href="${item.url}" class="btn btn-primary">Enter</a>
                    </div>
                  </div>
      `;
        cardContainer.innerHTML = ihtml;

        //fetch data from filtered Array

        filteredDataArray.forEach((item) => {
          let ihtml = `
          <div class="card mt-2 ml-4 mr-2" style="width: 20rem;">
                        <img src="https://blog.ndepend.com/wp-content/uploads/Is-AI-Assisted-Coding-the-Next-Developer-Productivity-Silver-Bullet.png" class="card-img-top" alt="...">
                        <div class="card-body ">
                          <h5 class="card-title">${item.name}</h5>
                          <p class="card-text"><b>Starts at: </b>${item.start_time} </p>
                          <p class="card-text"><b>Ends at: </b> ${item.end_time} </p>
                          <p class="card-text"><b>Duration: </b> ${item.duration} </p>
                          <a href="${item.url}" class="btn btn-primary">Enter</a>
                        </div>
                      </div>
          `;

          historycards.innerHTML += ihtml;
        });

        //
      });
    })
    .catch((error) => {
      console.log("Error:", error);
    });
});