The Official Webster API is a small API that allows users to display cute, randomly generated images of their favorite web designer, Webster!
Example
Click the image to cycle!
Usage
To use this API on your website, you will need to do the following:
1. Copy the code from the script and paste it into your website's JavaScript file, or include it in a script tag on your HTML page.
2. Make sure you have an element on your page with an ID of "websterPics" that you want to update with the response. For example, you might have an `img` element like this: `<img id="websterPics">`
3. If you want to change the element that is updated with the response, you can modify the line of code that sets the `src` attribute.
4. If you want to change the length of time before the request is retried after an error, you can modify the value passed to `setTimeout`.
The Script:
async function updateWebsterPics() {
try {
// Show a loading state or placeholder image while the request is being made
document.getElementById("websterPics").src = "loading.gif";
// Make a request to the specified URL
const res = await fetch("https://webster.lunareclipse.studio");
// If the request was not successful, throw an error
if (!res.ok) {
throw new Error(`Request failed with status ${res.status}`);
}
// Parse the response as JSON
const data = await res.json();
// If the response does not have a URL, throw an error
if (!data.url) {
throw new Error("Response is missing the 'url' property");
}
// Update the src attribute of the element with the URL
document.getElementById("websterPics").src = data.url;
} catch (error) {
// Log the error to the console
console.error(error);
// Display an error message to the user
document.getElementById("websterPics").src = "https://cdn.lunareclipse.studio/img/projects/webster-api/gallery/error.webp";
// Retry the request after 5 seconds
setTimeout(updateWebsterPics, 5000);
}
}
// Call the function to start the process
updateWebsterPics();