Создаем генератор случайных цитат с помощью JSON

Создаем генератор случайных цитат с помощью JSON

От автора: встречать пользователя на своем сайте случайной цитатой – популярный способ персонализации пользовательского опыта. Часто цитаты хранятся в отдельном файле, но если их немного, десять или меньше, намного эффективнее хранить их прямо на странице в скрипте.

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

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

const quotes = [
 { 
  "quote" : "The only sin is ignorance", 
  "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 не отработает, на экране просто ничего не отобразится. Или же можно вставлять в теги цитату по умолчанию.

<blockquote>
 <p id="quotation"></p>
 <footer>
 <p id="source"></p>
 </footer>
</blockquote>

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

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

Функция вызывается сразу после загрузки страницы:

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
randomQuote();

Цитаты по требованию

В CodePen демо к этой статье есть кнопка, генерирующая новые цитаты:

<button id="genquote">Generate Quote</button>

По клику по кнопке также вызывается randomQuote:

genquote.addEventListener("click", randomQuote)

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

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

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree