ctd/script.js at main · jimmybrock/ctd · 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
let searchCategory = "people";
let searchQuery = "";

let fetchData = function () {
  let url =
    "https://swapi.dev/api/" + searchCategory + "/?search=" + searchQuery;

  $.ajax({
    method: "GET",
    url: url,
    dataType: "json",
    success: function (data) {
      renderResults(data);
    },
    error: function (jqXHR, textStatus, errorThrown) {
      console.log(textStatus);
      console.log(errorThrown);
      console.log(jqXHR);
    },
  });
};

$(".search-form").on("submit", function (e) {
  e.preventDefault();

  searchQuery = $("#search-query").val();
  searchCategory = $("#search-category").val();

  fetchData();
});

var renderResults = function (data) {
  $(".results").empty();

  for (let i = 0; i < data.results.length; i++) {
    var resultsHTML;

    var result = data.results[i];

    if (searchCategory === "people") {
      resultsHTML =
        '<div class="col-md-6">' +
        "<h4>" +
        result.name +
        "</h4>" +
        "<div> <strong> Birth Year </strong>: " +
        result.birth_year +
        "</div>" +
        "<div> <strong> Eye Color </strong>: " +
        result.eye_color +
        "</div>" +
        "<div> <strong> Gender </strong>: " +
        result.gender +
        "</div>" +
        "<div> <strong> Height </strong>: " +
        result.height +
        "</div>" +
        "<hr>" +
        "</div>";
    } else if (searchCategory === "starships") {
      resultsHTML =
        '<div class="col-md-6">' +
        "<h4>" +
        result.name +
        "</h4>" +
        "<div> <strong> Model </strong>: " +
        result.model +
        "</div>" +
        "<div> <strong> Manufacturer </strong>: " +
        result.manufacturer +
        "</div>" +
        "<div> <strong> Cost in Credits </strong>: " +
        result.cost_in_credits +
        "</div>" +
        "<div> <strong> Cargo Capacity </strong>: " +
        result.cargo_capacity +
        "</div>" +
        "<div> <strong> Starship Class </strong>: " +
        result.starship_class +
        "</div>" +
        "<hr>" +
        "</div>";
    }

    $(".results").append(resultsHTML);
  }
};

fetchData();