Building a Screensaver Website

Bing offers a nifty API that shows its Photo of the Day. In this article, you'll learn how to build a fun screensaver website using it. Whether you're looking to polish your frontend skills or tackle common issues like CORS errors, this project has you covered. Screensaver Online demo Link to the demo: https://screensaver-online.corsfix.com Understanding the CORS Challenge When you try to call the Bing Photo of the Day API directly from your frontend, you might run into a CORS error. This happens because Bing doesn’t return the appropriate CORS headers, so your browser blocks the response. In other words, while Bing serves the image data perfectly, it won’t let your frontend access it directly for security reasons. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. CORS Error The Workaround: Using a CORS Proxy To keep things simple and avoid setting up a backend, you can use a CORS proxy. A CORS proxy fetches the API data on your behalf and sends it back with the correct CORS headers. This lets your app access the data without any hassle. fetch("https://proxy.corsfix.com/?") Using CORS proxy Setting Up Your Project For this project, we'll be using Next.js with the static export mode. This approach helps us deploy your project on any static hosting service (like GitHub Pages, Cloudflare Pages, Netlify, or Firebase Hosting) without needing a dedicated Node.js server. What Your App Needs to Do Fetch the Bing Image API: Retrieve data from the API and store it in your component state. Create a Fade Animation: Use CSS animations (via keyframes) to smoothly transition between images. Support Fullscreen Mode: Allow users to toggle fullscreen to get an immersive experience. Now let’s dive into each of these steps. Building the App 1. Fetching the Bing Image API Directly calling the Bing API from your frontend leads to CORS issues. To work around this, we’ll use a CORS proxy in your fetch request. Here’s an example of what that code might look like: // Example fetch using a CORS proxy fetch('https://corsfix.example.com/https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1') .then(response => response.json()) .then(data => { // Store the API data in state to use later for your slideshow console.log(data); }) .catch(err => console.error('Error fetching the Bing API:', err)); 2. Creating a Fade Animation with CSS To give the screensaver a smooth transition, we'll use CSS animations. By defining keyframes, we can control the fade effect over a set duration. Here’s a sample CSS snippet: .container { background-size: cover; background-repeat: no-repeat; animation: slideshow 15s ease-in-out infinite; } @keyframes slideshow { 0% { background-image: url("image1.jpg"); } 33% { background-image: url("image2.jpg"); } 66% { background-image: url("image3.jpg"); } 100% { background-image: url("image1.jpg"); } } This setup continuously loops through a fade transition. Experiment with the animation duration and timing-function to achieve the look and feel that works best for your application. (credits to brandkit for this snippet) 3. Enabling Fullscreen Mode To finish up, add a fullscreen feature that lets the screensaver take over the entire display. Use the browser’s requestFullscreen() API to achieve this. Here’s how you can do it: function openFullscreen(elem) { if (elem.requestFullscreen) { elem.requestFullscreen(); } } This function checks for browser compatibility and requests fullscreen on the specified element, providing an immersive screensaver experience. Conclusion You’ve now built a screensaver website that leverages the Bing Photo of the Day API and effectively handles common frontend hurdles like CORS errors. You learned how to overcome these issues with a CORS proxy, create smooth fade transitions using CSS keyframes, and add immersive fullscreen support with a simple JavaScript function. If you are looking for a CORS proxy, give Corsfix a try! It's free to get started, and only upgrade when you go to production. Happy coding! Demo: https://screensaver-online.corsfix.com Code: https://github.com/corsfix/screensaver-online

Apr 15, 2025 - 12:10

Bing offers a nifty API that shows its Photo of the Day. In this article, you'll learn how to build a fun screensaver website using it. Whether you're looking to polish your frontend skills or tackle common issues like CORS errors, this project has you covered.

Screensaver Online demo

Link to the demo: https://screensaver-online.corsfix.com

Understanding the CORS Challenge

When you try to call the Bing Photo of the Day API directly from your frontend, you might run into a CORS error. This happens because Bing doesn’t return the appropriate CORS headers, so your browser blocks the response. In other words, while Bing serves the image data perfectly, it won’t let your frontend access it directly for security reasons.

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

CORS Error

The Workaround: Using a CORS Proxy

To keep things simple and avoid setting up a backend, you can use a CORS proxy. A CORS proxy fetches the API data on your behalf and sends it back with the correct CORS headers. This lets your app access the data without any hassle.

fetch("https://proxy.corsfix.com/?")

Using CORS proxy

Setting Up Your Project

For this project, we'll be using Next.js with the static export mode. This approach helps us deploy your project on any static hosting service (like GitHub Pages, Cloudflare Pages, Netlify, or Firebase Hosting) without needing a dedicated Node.js server.

What Your App Needs to Do

Fetch the Bing Image API: Retrieve data from the API and store it in your component state.
Create a Fade Animation: Use CSS animations (via keyframes) to smoothly transition between images.
Support Fullscreen Mode: Allow users to toggle fullscreen to get an immersive experience.

Now let’s dive into each of these steps.

Building the App

1. Fetching the Bing Image API

Directly calling the Bing API from your frontend leads to CORS issues. To work around this, we’ll use a CORS proxy in your fetch request. Here’s an example of what that code might look like:

// Example fetch using a CORS proxy
fetch('https://corsfix.example.com/https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1')
  .then(response => response.json())
  .then(data => {
    // Store the API data in state to use later for your slideshow
    console.log(data);
  })
  .catch(err => console.error('Error fetching the Bing API:', err));

2. Creating a Fade Animation with CSS

To give the screensaver a smooth transition, we'll use CSS animations. By defining keyframes, we can control the fade effect over a set duration. Here’s a sample CSS snippet:

.container {
background-size: cover;
background-repeat: no-repeat;
animation: slideshow 15s ease-in-out infinite;
}

@keyframes slideshow {
0% { background-image: url("image1.jpg"); }
33% { background-image: url("image2.jpg"); }
66% { background-image: url("image3.jpg"); }
100% { background-image: url("image1.jpg"); }
}

This setup continuously loops through a fade transition. Experiment with the animation duration and timing-function to achieve the look and feel that works best for your application. (credits to brandkit for this snippet)

3. Enabling Fullscreen Mode

To finish up, add a fullscreen feature that lets the screensaver take over the entire display. Use the browser’s requestFullscreen() API to achieve this. Here’s how you can do it:

function openFullscreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  }
}

This function checks for browser compatibility and requests fullscreen on the specified element, providing an immersive screensaver experience.

Conclusion

You’ve now built a screensaver website that leverages the Bing Photo of the Day API and effectively handles common frontend hurdles like CORS errors. You learned how to overcome these issues with a CORS proxy, create smooth fade transitions using CSS keyframes, and add immersive fullscreen support with a simple JavaScript function.

If you are looking for a CORS proxy, give Corsfix a try! It's free to get started, and only upgrade when you go to production.

Happy coding!

Demo: https://screensaver-online.corsfix.com
Code: https://github.com/corsfix/screensaver-online