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

Дата публикации: 2016-12-09

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

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

Каждая цитата всегда состоит из двух компонентов: цитаты и автора, из-за чего 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"
	}
]

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>

</footer>

</blockquote>

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

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

function randomQuote() {

let random = quotes[Math.floor(Math.random() * quotes.length)];

quotation.innerText = `“${random.quote}.”`;

source.innerText = random.source;

}

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

randomQuote();

1	randomQuote();

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

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

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

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

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

genquote.addEventListener("click", randomQuote)

1	genquote.addEventListener("click", randomQuote)

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

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

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

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

Метки: JavaScript