Skip to main content
100%

Random Ron - No Duplicates

✓ Published0🌍 Public
Aangusgrant
Last edited Oct 29, 2022
Created on Oct 29, 2022

A web page displays Ron Swanson quotes, each paired with a looping GIF of the character. Clicking the "More Ron" button fetches a new quote from the Ron Swanson Quotes API and replaces the current text. The page uses the Fetch API and a custom function to track previously shown quotes in an array, preventing duplicates until 50 unique quotes have been displayed, after which the oldest quote is removed to allow new ones. The quote element uses `aria-live` for screen-reader updates.

AI-generated description

Similar vizzes

Loading thumbnail…

Random Ron - No Duplicates

This example displays a single Ron Swanson quote at a time, fetched from the ron-swanson-quotes.herokuapp.com API, with a button to load a new one. It shows how to avoid immediate duplicate quotes by storing recent quotes in an array; when a quote repeats, the app fetches again, and once 50 unique quotes are stored, the oldest is removed to make room. The code uses the Fetch API to request JSON data and updates the page’s blockquote element, while an `<img>` tag embeds a related GIF.

Aangusgrant
93% match
Loading thumbnail…

Random Ron

Random Ron displays a random Ron Swanson quote in a blockquote element on page load and whenever the user clicks the “More Ron” button. The page fetches quotes from the Ron Swanson Quotes API using the Fetch API, parsing the JSON response and inserting the text into the blockquote. It uses plain JavaScript with an event listener on the document to handle button clicks, and the initial quote is triggered programmatically by calling the button’s click method.

Aangusgrant
86% match
Loading thumbnail…

Build a Random Quote Machine - project from freecodecamp

This random quote machine displays a curated set of movie and historical quotes, each paired with its author. Clicking the “New Quote” button or loading the page triggers a function that selects a random entry from a hardcoded Map and displays it. The interface simultaneously changes both the page background and button colors to a randomly generated RGB value, using JavaScript’s `Math.random` and direct DOM manipulation via `querySelectorAll` and `innerHTML`. Social sharing links for Twitter and Facebook are included.

KKacieW
59% match
Loading thumbnail…

Hook that fetches a random Games Of Thrones quote.

This example demonstrates a React hook that fetches a random quote from the Game of Thrones universe and displays it as plain text. It uses the `useState` and `useEffect` hooks from React to manage the quote data and trigger a single API call when the component mounts. The fetch request targets the `game-of-thrones-quotes.herokuapp.com` REST API, and the response’s `sentence` field is stored in local state. No rendering library beyond React is used; the hook returns the quote string for the component to render directly.

Aabonello
55% match
Loading thumbnail…

Smiley Face Part I - Ronan

Eighteen identical smiley faces are arranged in a grid, each rendered as an SVG circle with two dot eyes and an arc-shaped mouth. The faces vary randomly in eye radius and mouth width, giving each a slightly different expression. The React code uses reusable components (`BackgroundCircle`, `Eyes`, `Mouth`) and a `FaceContainer` to manage the SVG coordinate system, while the `d3.arc()` API generates the curved mouth path for each face.

RRonanFonseca
51% match
Loading thumbnail…

Chips off the Old Benchley I find myself trying to find this every now and then.

The visualization shows a network of quotes and references drawn from Robert Benchley’s essay, with nodes representing phrases and edges mapping how each quote connects to the source text. It uses `d3.forceSimulation` for layout and `d3.select` with SVG paths to draw links and nodes. The data comes from a plain-text gist, parsed into a graph structure where node size reflects repetition frequency. Hovering highlights neighboring connections, while colors distinguish direct quotes from paraphrased fragments.

DDylanFM
51% match
Loading thumbnail…

Gist 2f7ca9d9aa2634f57b35

This example visualizes a collection of humorous quotes attributed to Asim, rendered as individual text snippets. The visualization presents each quote as a distinct visual element, likely a card or a label, arranged in a grid or list format. It uses the D3.js library to handle the layout and rendering of the text-based data points. The source data is hardcoded as an array of strings within the code, and the display appears to use standard SVG text elements.

BBBischof
50% match
Loading thumbnail…

Parse CSV with Day of DH Quotations as XML

This example shows how to randomly select and display a single quotation from a CSV file of "Day of DH" responses, rendering it as a styled HTML page. It first parses the remote CSV with the `csv:parse` function and `fetch:text`, then uses `random:integer` to pick a random record. The code generates a Bootstrap-based webpage that displays the quote, author, and date. The XQuery scripts include a plain parsing version, a random-selection version, and two HTML-rendering versions, one using the RESTXQ module for HTTP GET requests.

CCliffordAnderson
48% match