-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (81 loc) · 3.89 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Football Calendar</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="app">
<!-- Fixtures Section -->
<section>
<div v-if="fixtures.length === 0" class="alert alert-warning">
No fixtures found for the given date.
</div>
<div v-else class="accordion" id="accordionClubs">
<div class="accordion-item" v-for="(fixture, index) in fixtures" :key="fixture.fixture.id">
<h2 class="accordion-header" :id="'heading' + fixture.fixture.id">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
:data-bs-target="'#collapse' + fixture.fixture.id" aria-expanded="false"
:aria-controls="'collapse' + fixture.fixture.id">
{{ fixture.league.name }}
<img :src="fixture.league.flag" alt="flag" style="width: 20px; height: 15px;">
<div class="club">
<img :src="fixture.teams.home.logo" class="image" style="width: 30px; height: 30px;">
<span>{{ fixture.teams.home.name }}</span>
<span>vs</span>
<img :src="fixture.teams.away.logo" class="image" style="width: 30px; height: 30px;">
<span>{{ fixture.teams.away.name }}</span>
</div>
</button>
</h2>
<div :id="'collapse' + fixture.fixture.id" class="accordion-collapse collapse"
:aria-labelledby="'heading' + fixture.fixture.id" data-bs-parent="#accordionClubs">
<div class="accordion-body">
<div class="match-details">
<h5>Match Date: {{ new Date(fixture.fixture.date).toLocaleString() }}</h5>
<p>Score: {{ fixture.goals.home }} - {{ fixture.goals.away }}</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Bootstrap JS (required for the accordion) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
fixtures: [] // This will store the fetched fixtures data
};
},
created() {
this.fetchFixtures();
},
methods: {
async fetchFixtures() {
try {
const response = await fetch('https://v3.football.api-sports.io/fixtures?live=all', {
method: "GET",
headers: {
"x-rapidapi-host": "v3.football.api-sports.io",
"x-rapidapi-key": "aa2feb2e6dba6ca9a3e4e583ec2719db",
"date": "2014-11-15"
}
});
const data = await response.json();
this.fixtures = data.response; // Store the fixtures in the data property
} catch (error) {
console.error('Error fetching fixtures:', error);
}
}
}
}).mount('#app');
</script>
</body>
</html>