In this post, we'll create a simple widget that fetches events from your Bevy Community Platform and displays them on an external site of your choice, using the Bevy Public API. We'll cover the HTML structure, CSS for styling, and JavaScript for fetching and displaying the events.
Step 1: HTML Structure
First, we'll set up the basic HTML structure. This includes a container to hold our events and links to the CSS and JavaScript files.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bevy Upcoming Events</title>
</head>
<body>
<div class="container">
<center>
<h1>Community Events</h1>
<p>Find here the upcoming events of our Community</p>
<div id="events"></div>
</center>
</div>
<script src="script.js"></script>
</body>
</html>
- In the <head> section you can find the meta tags for the character set and viewport settings, a title, and a link to the external CSS file (styles.css) that you can replace with your CSS file.
- You can update the body with the best copy for your community.
- The <body> contains a container div with an h1 header and an empty div with the ID events where our events will be displayed. Adapt the copy of the body with the text that fits better for your community.
- The <script> tag at the bottom includes our JavaScript file (script.js) that you can replace with your JS file.
Step 2: CSS Styling
Next, we create the CSS to style our webpage. This will ensure our events look good and the page has a clean, modern appearance.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1 {
text-align: center;
color: #333;
}
#events {
display: flex;
flex-direction: column;
gap: 15px;
}
.event {
background: #fafafa;
padding: 20px;
border-radius: 5px;
border-left: 5px solid #832DF6;
transition: transform 0.2s;
}
.event:hover {
transform: scale(1.02);
}
.event h2 {
margin: 0;
color: #832DF6;
}
.event p {
margin: 5px 0;
}
.event time {
font-style: italic;
color: #666;
}
- This is an example widget version, but you can style it as preferred!
Step 3: JavaScript for Fetching and Displaying Events
Finally, we'll write the JavaScript to fetch events from the API and display them on the page.
The API to return the Upcoming Events is:
api/search/?result_types=upcoming_event&country_code=Earth
Here is the JS script:
document.addEventListener('DOMContentLoaded', () => {
fetchEvents();
});
function fetchEvents() {
fetch('[https://my-community-site.com]/api/search/?result_types=upcoming_event&country_code=Earth')
.then(data => displayEvents(data.results))
.catch(error => console.error('Error fetching events:', error));
}
function displayEvents(events) {
const eventsContainer = document.getElementById('events');
eventsContainer.innerHTML = '';
events.forEach(event => {
const eventElement = document.createElement('div');
eventElement.classList.add('event');
// Create and append the event title
const title = document.createElement('h2');
title.textContent = event.title;
eventElement.appendChild(title);
// Create and append the event date
const date = document.createElement('time');
date.textContent = new Date(event.start_date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
eventElement.appendChild(date);
// Create and append the event description
const description = document.createElement('p');
description.textContent = event.description_short || 'No description available';
// Create and append the event location
const location = document.createElement('p');
location.textContent = `Location: ${event.chapter.chapter_location}`;
eventElement.appendChild(location);
// Append the complete event element to the events container
eventsContainer.appendChild(eventElement);
});
}
- Replace the Community URL with your instance's URL
- The
displayEventsfunction:- Clears any existing events.
- Iterates through the events array, creating and appending elements for the title, date, description, and location of each event. You can edit this with any other field available in the payload, like the URL of the event, or the chapter information.
- Adds these elements to the
eventscontainer.
By following these steps, you can recreate a functional, stylish webpage that dynamically displays events fetched from an API.
Here you have the resulting widget with the HTML, CSS and JS explained in this post:
Important Notes:
Please, consider the Bevy API Rate Limits before deploying this in your platform:
- Authorized users: 10,000 requests per day (requests with an authentication token)
- Anonymous users: 5,000 requests per day
To reduce the number of requests, we'd suggest incorporating caching in your script.
Comments