Random Quote

			<!-- aria-live reads each new quote; aria-busy holds it back while loading. -->
			<figure class="quote" id="quote" aria-live="polite">
				<blockquote class="quote-text" id="quote-text">
					<p>Loading a quote…</p>
				</blockquote>
				<figcaption class="quote-author" id="quote-author"></figcaption>
			</figure>

			<!-- role="alert" reads an error out straight away. -->
			<p class="error" id="error" role="alert" hidden></p>

/* A big decorative quote mark, drawn by CSS so screen readers skip it. */
.quote-text::before {
	content: "“" / "";
	display: block;
	height: 2.5rem;
	font-family: Georgia, serif;
	font-size: 4rem;
	line-height: 1;
	color: #d4d4da;
}

/* While a quote loads, fade the old one so it's clear something is happening. */
.quote[aria-busy="true"] {
	opacity: 0.4;
	transition: opacity 0.2s ease;
}

let currentQuote = null;
let isLoading = false;

// Fade the old quote and change the button text while waiting.
function setLoading(loading) {
	isLoading = loading;
	quote.setAttribute("aria-busy", loading);
	newQuoteButton.textContent = loading ? "Loading…" : "New quote";
}

function showQuote({ text, author }) {
	const paragraph = document.createElement("p");
	paragraph.textContent = text;
	quoteText.replaceChildren(paragraph);
	quoteAuthor.textContent = author;
}

// async lets the function wait for the network with await, and the page
// keeps working in the meantime.
async function loadQuote() {
	// Ignore extra clicks while a quote is already on its way.
	if (isLoading) return;
	setLoading(true);

// async lets the function wait for the network with await, and the page
// keeps working in the meantime.
async function loadQuote() {
	// Ignore extra clicks while a quote is already on its way.
	if (isLoading) return;
	setLoading(true);
	errorMessage.hidden = true;

	try {
		const response = await fetch(API_URL);

		// fetch only fails on a network error; a 404 or 500 still arrives, so check.
		if (!response.ok) {
			throw new Error(`The server answered ${response.status}`);
		}

		// The body arrives as text; .json() turns it into an object.
		const data = await response.json();
		currentQuote = { text: data.quote, author: data.author };
		showQuote(currentQuote);

	try {
		const response = await fetch(API_URL);
		// fetch only fails on a network error; a 404 or 500 still arrives, so check.
		if (!response.ok) {
			throw new Error(`The server answered ${response.status}`);
		}
		// The body arrives as text; .json() turns it into an object.
		const data = await response.json();
		currentQuote = { text: data.quote, author: data.author };
		showQuote(currentQuote);
	} catch {
		errorMessage.textContent =
			"Couldn't load a quote. Check your connection and try again.";
		errorMessage.hidden = false;
	} finally {
		// finally runs whether it worked or not, so loading always ends.
		setLoading(false);
	}

copyButton.addEventListener("click", async () => {
	if (!currentQuote) return;
	try {
		await navigator.clipboard.writeText(
			`"${currentQuote.text}" — ${currentQuote.author}`,
		);
		copiedMessage.textContent = "Copied to your clipboard.";
	} catch {
		copiedMessage.textContent = "Couldn't copy. Select the quote and copy it instead.";
	}
	// Clear the message after a moment, ready for the next copy.
	setTimeout(() => {
		copiedMessage.textContent = "";
	}, 2500);
});