Automatic Quote Phaser

INFORMATION & CODE

Automatic Quote Phaser

What the Code Does

This code creates a web component called the "Automatic Quote Phaser," which is a rotating carousel of famous quotes. It displays one quote card at a time on the screen against a styled background, and automatically cycles through a collection of five quotes attributed to notable figures (such as Aristotle, Franklin D. Roosevelt, and Walt Disney). As time passes, the currently visible quote smoothly fades out, and the next quote fades in using CSS transitions, creating a polished, slideshow-like effect.

How It Works

The functionality is split across three standard web development languages: HTML, CSS, and JavaScript.

HTML (Structure): The HTML document defines five distinct div containers (.blockquoteWrapper), each holding a quote (<blockquote>), a heading, the author's name, a decorative quote symbol, and a numbered button (.dot). It also links to external resources, including Google Fonts ("Press Start 2P" and "VT323") and FontAwesome for iconography.
CSS (Styling and Animation): The CSS styles the quote cards to have a retro, retro-arcade aesthetic featuring warm cream backgrounds, double orange borders, and drop shadows. Crucially, the .blockquoteWrapper class includes a transition-duration: 3s; property and an initial opacity: 0; setting. This ensures that whenever the opacity of a wrapper changes via JavaScript, the browser animates the fade rather than snapping it instantly.
JavaScript (Behavior): The JavaScript file controls the timing and logic of the rotation. Using setInterval, it repeatedly calls a function named changeBlockquote every 9,000 milliseconds (9 seconds). Inside this function, a loop sets the opacity of all quote wrappers to 0 (hidden), and then sets the opacity of the currently active wrapper (wrap[inc]) to 1 (visible). It then decrements the index counter (inc), looping back to the end of the array once it reaches zero, creating an endless loop of quotes.

How to Use It

To implement and run this code on your own computer, follow these steps:

Set Up Your Files: Create a project folder and save the code into three separate files within that same folder:

Save the HTML code as index.html.
Save the CSS code as styles.css.
Save the JavaScript code as scripts.js.

Verify Asset Links: Ensure the file names match what is referenced in the HTML head and body tags (styles.css and scripts.js).
Run the Project: Open the index.html file in any modern web browser (such as Chrome, Firefox, or Edge).
Observe the Carousel: Once the page loads, you will see one quote displayed. Every 9 seconds, the code will automatically fade out the current quote and fade in the next one in the sequence.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UFT-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Automatic Quote Phaser</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>
  </head>
  <body>
    <div class="blockquoteWrapper">
      <button class="dot">2</button>
      <blockquote>
        <h2>DARKNESS & LIGHT</h2>
        <p>It is during our darkest moments that we must focus to see the light." </p>
        <p class="rgt">— Aristotle —</p>
      </blockquote>
      <span class="quote">❝</span>
    </div>
    
    <div class="blockquoteWrapper">
      <button class="dot">4</button>
      <blockquote>
        <h2>REACHING THE END</h2>
        <p>When you reach the end of your rope, tie a knot in it and hang on.</p>
        <p class="rgt">— Franklin D. Roosevelt —</p>
      </blockquote>
      <span class="quote">❝</span>
    </div>
    
    <div class="blockquoteWrapper">
      <button class="dot">1</button>
      <blockquote>
        <h2>HAPPENINGS</h2>
        <p>Life is what happens when you're busy making other plans.</p>
        <p class="rgt">— John Lennon —</p>
      </blockquote>
      <span class="quote">❝</span>
    </div>
    
    <div class="blockquoteWrapper" id="wrap0">
      <button class="dot">3</button>
      <blockquote>
        <h2>TASTELESS</h2>
        <p>If life were predictable it would cease to be life, and be without flavour.</p>
        <p class="rgt">— Eleanor Roosevelt —</p>
      </blockquote>
      <span class="quote">❝</span>
    </div>
    
    <div class="blockquoteWrapper">
      <button class="dot">5</button>
      <blockquote>
        <h2>GETTING STARTED</h2>
        <p>The way to get started is to quit talking and begin doing.</p>
        <p class="rgt">— Walt Disney —</p>
      </blockquote>
      <span class="quote">❝</span>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                .dot {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  padding: 0 1px 0 3px;
  background-color: #ffeecc;
  border: 5px solid #ffeecc;
  outline: 5px double #ff7000;
  outline-offset: -5px;
  border-radius: 50%;
  color:#ff7000;
  font-weight: 700;
  box-shadow: 0 -1px 10px #505050;
  z-index: 2;
}
      
.blockquoteWrapper {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translatex(-50%);
  width: 100%;
  max-width: 624px;
  padding: 30px;
  background-color: #ffeecc;
  border: 10px solid #ffeecc;
  outline: 10px double #ff7000;
  outline-offset: -10px;
  border-radius: 15px;
  opacity: 0;
  box-shadow: 1px 1px 15px #505050;
  transition-duration: 3s;
}
                  
.blockquote-wrapper:nth-of-type(3) {
  opacity: 1;
}
                  
@media(max-width: 620px) {
  .blockquoteWrapper {
    width: 100%;
    left: 10px;
    right: 10px;
    transform: translate(0, -50%);
  }
}
                  
blockquote {
  padding: 5px 0px 30px 40px;
  border-left: 3px solid #707070;
}
                  
blockquote p {
  color: #505050;
  font-size: 24px;
  text-align: justify;
}
                  
blockquote p.rgt {
  margin-top: 0;
  float: right;
}
                  
blockquote h2 {
  margin-top: 20px;
  color: #ff7000;
  font-size: 24px;
  text-shadow: 1px 1px #ffeecc, 2px 2px #ffeecc, 3px 3px #ff7000;
  text-align: center;
}
                  
.quote {
  position: absolute;
  top: 50%;
  left: 59px;
  transform: translatey(-55%);
  padding: 0 0 10px;
  height: 42px;
  color: #ff7000;
  font-size: 32px;
  background-color: #fec;
  text-shadow: 2px 1px #505050;
}

JAVASCRIPT


                let inc = 3;
let end = 0;
let clicked = 4;
const btn = document.querySelectorAll(".dot");
const wrap = document.querySelectorAll(".blockquoteWrapper");
      
function changeBlockquote() {
  for (i = 0; i < wrap.length; i++) {
    wrap[i].style.opacity = 0; 
  }
  wrap[inc].style.opacity = 1;
  if (inc === end) {
    inc = 4
  }else{
    inc--;
  }
  if (clicked === end) {
    clicked = 4
  }else{
    clicked--;
  }
}

setInterval(changeBlockquote, 9000);

PREVIEW

DARKNESS & LIGHT

It is during our darkest moments that we must focus to see the light."

— Aristotle —

❝

REACHING THE END

When you reach the end of your rope, tie a knot in it and hang on.

— Franklin D. Roosevelt —

❝

HAPPENINGS

Life is what happens when you're busy making other plans.

— John Lennon —

❝

TASTELESS

If life were predictable it would cease to be life, and be without flavour.

— Eleanor Roosevelt —

❝

GETTING STARTED

The way to get started is to quit talking and begin doing.

— Walt Disney —

❝

MENU

INFORMATION & CODE