generated from nighthawkcoders/student
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
166 lines (152 loc) · 5.98 KB
/
test.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS code for the card */
.card {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px;
padding: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #f9f9f9;
}
/* CSS code for the card container with scroll */
.scroll-container {
max-height: 100vh; /* Set a max height to enable scrolling */
overflow-y: auto; /* Enable vertical scrolling when content overflows */
}
/* CSS code for the car (skatepark card) */
.car {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px;
padding: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #171717;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 350px;
/* From https://css.glass */
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
margin-top: 1%;
}
.car h3 {
margin-top: 0;
}
.car p {
margin: 0;
}
.car .details {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.car .details .info {
display: flex;
flex-direction: column;
gap: 10px;
}
.car .details .actions {
display: flex;
justify-content: space-between;
align-items: center;
}
.car .details .actions button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
.car .details .actions button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div id="skatepark-cards" class="scroll-container">
<!-- Cards will be dynamically added here -->
</div>
<script>
function updateLike(skateparkName) {
console.log("Like button clicked for skatepark: " + skateparkName);
const requestOptions = {
method: 'POST',
cache: 'no-cache',
credentials: 'include',
};
fetch("https://y2kcoders.stu.nighthawkcodingsociety.com/api/skatepark/like/" + skateparkName, requestOptions)
.then(response => {
if (!response.ok) {
throw Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Find the skatepark card element by skateparkName
const skateparkCard = document.querySelector(`[data-skatepark-name="${skateparkName}"]`);
if (skateparkCard) {
// Update the totalLikes element in the card
const totalLikesElement = skateparkCard.querySelector(".total-likes");
if (totalLikesElement) {
totalLikesElement.textContent = `Total Likes: ${data.totalLikes}`;
}
}
console.log(data); // Log the fetched data to the console
})
.catch(error => {
console.error('Fetch error:', error);
});
}
// JavaScript code
document.addEventListener("DOMContentLoaded", function () {
const skateparkCardsContainer = document.getElementById("skatepark-cards");
// Replace the URL with the actual JSON file URL
const apiUrl = 'https://y2kcoders.stu.nighthawkcodingsociety.com/api/skatepark/';
fetch(apiUrl)
.then(response => response.json())
.then(data => {
data.forEach(skatepark => {
// Create a new div card for each skatepark
const car = document.createElement("div");
car.className = "car";
car.dataset.skateparkName = skatepark.skateparkName; // Add data attribute
car.innerHTML = `
<div class="details">
<div class="info">
<h3>${skatepark.skateparkName}</h3>
<p><b>Author:</b> ${skatepark.author}</p>
<p><b>Title:</b> ${skatepark.title}</p>
<p><b>Address:</b> ${skatepark.address}</p>
<p><b>Star Rating:</b> ${skatepark.starRating}</p>
<p><b>Description:</b> ${skatepark.description}</p>
<p class="total-likes"><b>Total Likes:</b> ${skatepark.totalLikes}</p>
</div>
<div class="actions">
<button onclick="updateLike('${skatepark.skateparkName}')">Like</button>
<button>Share</button>
</div>
</div>
`;
skateparkCardsContainer.appendChild(car);
});
})
.catch(error => console.error("Error fetching data:", error));
});
</script>
</body>
</html>