Цитаты в случайном порядке

Если хочется встречать посетителя сайта случайной цитатой, то подготовьте небольшой список в JSON-формате.

const quotes = [
 { 
  "quote" : "Даже самый маленький котёнок - шедевр природы", 
  "author" : "Леонардо да Винчи" 
 },
 {
  "quote" : "Бог сотворил кошку для того, чтобы у человека был тигр, которого можно погладить", 
  "author" : "Виктор Гюго"
 },
 {
  "quote" : "Думаю, что кошки - это духи, спустившиеся на землю", 
  "author" : "Жюль Верн"
 }
]

Заведите элементы с идентификаторами quotation и author.

<blockquote>
 <p id="quotation"></p>
 <p id="author"></p>
</blockquote>

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

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

Случайная цитата

Также можно добавить кнопку и вызывать случайную цитату по щелчку.

document.querySelector("button").addEventListener('click', randomQuote);

Чем больше цитат, тем выше вероятность увидеть новую. Либо добавьте дополнительную проверку, чтобы не выводить одинаковую цитату два раза подряд.

Реклама