How to Make a Rotating Quotes Screensaver With HTML, CSS and JavaScript

Updated October 8, 2026 · 5 min read · By the Hacker Typer team

This project shows one quote at a time in the middle of the screen and fades to the next every few seconds. It teaches three things used on almost every website: lists of data, timers and smooth fades.

The complete code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Quotes</title>
  <style>
    body {
      margin: 0; height: 100vh; background: #000; color: #f2f2f2;
      display: flex; align-items: center; justify-content: center;
      font-family: Georgia, serif; text-align: center;
    }
    #box { max-width: 900px; padding: 40px; transition: opacity 1s; }
    #quote { font-size: 42px; line-height: 1.3; margin: 0 0 20px; }
    #author { font-size: 22px; opacity: 0.7; margin: 0; }
  </style>
</head>
<body>
  <div id="box">
    <p id="quote"></p>
    <p id="author"></p>
  </div>

  <script>
    const quotes = [
      { text: "The best way to predict the future is to invent it.", author: "Alan Kay" },
      { text: "Talk is cheap. Show me the code.", author: "Linus Torvalds" },
      { text: "Premature optimization is the root of all evil.", author: "Donald Knuth" },
      { text: "Make it work, make it right, make it fast.", author: "Kent Beck" }
    ];

    const box = document.getElementById("box");
    const quote = document.getElementById("quote");
    const author = document.getElementById("author");
    let index = 0;

    function showQuote() {
      quote.textContent = "“" + quotes[index].text + "”";
      author.textContent = "— " + quotes[index].author;
      box.style.opacity = 1;                 // fade in
      index = (index + 1) % quotes.length;   // next one, back to the start at the end
    }

    function nextQuote() {
      box.style.opacity = 0;                 // fade out
      setTimeout(showQuote, 1000);           // swap the text once it is invisible
    }

    showQuote();
    setInterval(nextQuote, 8000);            // change every 8 seconds
  </script>
</body>
</html>

How to use this code

1. Get the file. Press Download above the code to save it as quotes.html. Or press Copy code, paste it into a plain text editor (Notepad on Windows, TextEdit in plain-text mode on a Mac, or a code editor such as VS Code) and save it as quotes.html. The name must end in .html, not .txt.
2. Open it. Double-click the file. It opens in your web browser and starts working straight away.
3. Change it. Open the same file in the text editor, edit something, save, and refresh the browser page to see the result.

Nothing needs to be installed, and the file works without an internet connection.

How the code works

The list of quotes

quotes is a list, written inside square brackets. Each item, in curly brackets, has two named parts: text and author. quotes[0] is the first item, and quotes[0].text is its wording. Computers count from zero.

The fade

The fade is done by CSS, not JavaScript. The line transition: opacity 1s tells the browser: whenever this box's opacity changes, take one second to do it smoothly. The JavaScript only sets opacity to 0 or 1.

The timing

• setInterval(nextQuote, 8000) runs nextQuote every 8 seconds.
• nextQuote starts the fade-out, then uses setTimeout to wait one second.
• After that second the box is invisible, so showQuote can swap the text without anyone seeing the change, and fade back in.

setInterval repeats for ever; setTimeout waits once. That difference is worth remembering.

The odd-looking codes

"“" and "”" are curly quotation marks, and "—" is a long dash. Writing them as codes avoids problems if the file is saved in the wrong text format.

Easy changes to try