-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (80 loc) · 4.24 KB
/
index.html
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Table Football</title>
<link rel="stylesheet" href="css/stylefoot.css">
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/[email protected]/locale/fr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/locale/fr.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Black+Ops+One|Carter+One|Jockey+One|Jomolhari|Lilita+One|Oleo+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina|Knewave|Permanent+Marker|Titan+One&display=swap" rel="stylesheet">
</head>
<body>
<header>
</header>
<section>
</section>
<script type="text/javascript" language="javascript" src="json/football.json"></script>
<script>
var header = document.querySelector('header');
var section = document.querySelector('section');
// je passe en variable l'adresse de requete
var requestURL = "https://api-football-v1.p.rapidapi.com/v2/fixtures/league/530?timezone=Europe%2FLondon";
//je lance une nouvelle requete XMLrequest
var request = new XMLHttpRequest();
//J'ouvre une requete et je passe la variable GET et l'URL
// /!\ /!\ /!\ /!\ à réactiver pour recup json
// request.open('GET', requestURL);
// request.setRequestHeader("x-rapidapi-host", "api-football-v1.p.rapidapi.com");
// request.setRequestHeader("x-rapidapi-key", "GSF5Ke6iOLmshcEQHPvlKf6UeY9Op1lA9zwjsnxI6LR8QJEm4s");
// request.responseType = 'json';
// request.send();
function telechargerJSON(content, fileName, contentType) {
var a = document.createElement("a");
var file = new Blob([content], {type: contentType});
a.href = URL.createObjectURL(file);
a.download = fileName ;
a.click();
}
var dataFoot = foot.api ;
// telechargerJSON(data, "data2.json", "application/json");
// request.onload = function() {
// var superheroes = request.response ;
// populateHeader(superheroes);
// showHeroes(superheroes)
// }
function showMatchs(jsonObj){
var match = jsonObj["fixtures"];
match.forEach(function(arrayMatch){
var articleMatch = document.createElement("article");
var E1vsE2 = document.createElement("h2");
var logo = document.createElement("img");
var VS = document.createElement("em");
var logo2 = document.createElement("img");
var dateMatch = document.createElement("h3");
var stadeMatch = document.createElement("p");
var statutMatch = arrayMatch.status;
E1vsE2.textContent = arrayMatch.homeTeam.team_name + " VS " + arrayMatch.awayTeam.team_name;
dateMatch.textContent = moment(arrayMatch.event_date).format('LLLL');
stadeMatch.textContent = arrayMatch.venue;
logo.setAttribute("src" ,arrayMatch.homeTeam.logo );
logo2.setAttribute("src" ,arrayMatch.awayTeam.logo );
VS.textContent = "VS";
if(statutMatch != "Match Finished") {
articleMatch.appendChild(E1vsE2);
articleMatch.appendChild(logo);
articleMatch.appendChild(VS);
articleMatch.appendChild(logo2);
articleMatch.appendChild(dateMatch);
articleMatch.appendChild(stadeMatch);
section.appendChild(articleMatch);
}
})
}
showMatchs(dataFoot);
</script>
</body>
</html>