-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
84 lines (73 loc) · 2.41 KB
/
app.js
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
const cardRow = document.getElementById("card-row");
const teamDetails = document.getElementById("sports-details");
const searchTeam = async () => {
cardRow.innerHTML = `
<div class="spinner-border text-primary mx-auto" role="status">
<span class="visually-hidden">Loading...</span>
</div>
`;
const searchField = document.getElementById("search-field");
const searchValue = searchField.value;
if (searchValue == "") {
cardRow.textContent = "";
return (cardRow.innerHTML = `
<h3 class='mx-auto text-center'><strong>Please!</strong> Search By Team Name</h3>
`);
}
//Search Data
const url = `https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${searchValue}`;
const res = await fetch(url)
const data = await res.json()
displayTeam(data)
/* fetch(url)
.then((res) => res.json())
.then((data) => displayTeam(data)); */
};
const displayTeam = (data) => {
const teams = data.teams;
cardRow.textContent = "";
teams.forEach((team) => {
console.log(team);
const div = document.createElement("div");
div.classList.add("col");
div.innerHTML = `
<div onclick="TeamData('${team.idTeam}')" class="card">
<img src="${team.strTeamBadge}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${team.strTeam}</h5>
<p class="card-text">${team.strAlternate}...</p>
</div>
</div>
`;
cardRow.appendChild(div);
});
};
const TeamData = async (team) => {
console.log(team);
const url = `https://www.thesportsdb.com/api/v1/json/1/lookupteam.php?id=${team}`;
const res = await fetch(url);
const data = await res.json();
loadTeamDetails(data);
/* fetch(url)
.then((res) => res.json())
.then((data) => loadTeamDetails(data)); */
};
const loadTeamDetails = (teamData) => {
cardRow.textContent = "";
const team = teamData.teams[0];
console.log(team);
const div = document.createElement("div");
div.classList.add("col");
div.classList.add("mx-auto");
div.innerHTML = `
<div class="card">
<img src="${team.strTeamBadge}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${team.strTeam}</h5>
<p class="card-text">${team.strAlternate}...</p>
<p class="card-text">${team.strDescriptionEN}...</p>
</div>
</div>
`;
cardRow.appendChild(div);
};