https://gradierwerk.github.io/_script/quotes.js

1/**
2 * @returns {Promise<{author: string, source: string, date: string, content: string}[]>}
3 */
4async function loadQuotes() {
5  // 本当はJSON Modulesを使いたいが、新しい機能ゆえブラウザでのサポートが狭すぎるので`fetch`を使う
6  const response = await fetch("/_script/quotes.json");
7  if (!response.ok) {
8    throw new Error();
9  }
10  return response.json();
11}
12
13async function getQuote() {
14  const quotes = await loadQuotes();
15  const randomIndex = Math.floor(Math.random() * quotes.length);
16  return quotes[randomIndex];
17}
18
19/**
20 * @param {{author: string, source: string, date: string, content: string}} quote
21 */
22function showQuote(quote) {
23  const qTag = document.querySelector("#quote-content");
24  const authorTag = document.querySelector("#quote-author");
25  const dateTag = document.querySelector("#quote-date");
26  qTag.textContent = quote.content;
27  authorTag.textContent = quote.author;
28  dateTag.textContent = quote.date.split("T")[0].replaceAll("-", "/");
29}
30
31document.addEventListener('DOMContentLoaded', async () => {
32  try {
33    const quote = await getQuote();
34    showQuote(quote);
35  } catch (e) {
36    console.error(e);
37  }
38});