Створюємо генератор випадкових цитат з допомогою JSON

2

Від автора: зустрічати користувача на своєму сайті випадкової цитатою – популярний спосіб персоналізації користувацького досвіду. Часто цитати зберігаються в окремому файлі, але якщо їх небагато, десять або менше, набагато ефективніше зберігати їх прямо на сторінці в скрипті.

Магазин мудрості

Кожна цитата завжди складається з двох компонентів: цитати та автора, з-за чого JSON масив ідеально підходить для зберігання такої інформації:

const quotes = [
{
«quote» : «The only sin ignorance is»,
«source» : «Christopher Marlowe»
},
{
«quote» : «A man is his own easiest dupe, for what he wishes to be true he generally believes to be true»,
«source» : «Demosthenes»
},
{
«quote» : «A lie can travel halfway around the world while the truth is putting on its shoes»,
«source» : «Mark Twain»
}
]

Розмітка на сторінці порожня: якщо JS не відпрацює, на екрані, просто нічого не відобразиться. Або ж можна вставляти теги цитату за замовчуванням.

Функція малює випадкову цитату з JSON структури і поміщає її як innerText параграфа за допомогою шаблонних рядків. Схожий процес повторюється для автора:

function randomQuote() {
let random = quotes[Math.floor(Math.random() * quotes.length)];
quotation.innerText = `“${random.quote}.»`;
source.innerText = random.source;
}

Функція викликається відразу після завантаження сторінки:

randomQuote();

Цитати за вимогою

У CodePen демо до цієї статті є кнопка, що генерує нові цитати:

Generate Quote

По кліку по кнопці також викликається randomQuote:

genquote.addEventListener. («click», randomQuote)

Повторення цитат

Скрипт не дає гарантії того, що нова випадкова цитата не буде тією ж самою. Чим більше цитат, тим менше ймовірність повтору. Однак вона ніколи не буде нульовою. Щоб цитати не повторювалися, ключі можна видаляти з JSON об’єкта після їх вибору. Також можна зберігати масив використаних цитат і перевіряти нові на збіг.