Генератор случайных цитат на JavaScript с минимальным интерфейсом. Эта программа создает пользовательский интерфейс HTML с кнопкой, которая при нажатии генерирует случайную цитату из массива цитат и отображает текст цитаты и автора в элементе quoteContainer на странице.

Разметка:

<div class="container">
  <h1>Random Quote Generator</h1>
  <br />
  <button onclick="getQuote()">Get Quote</button>
  <div class="quote-container" id="quoteContainer">
    <div class="quote-text" id="quoteText"></div>
    <div class="quote-author" id="quoteAuthor"></div>
  </div>
</div>

Стили:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quote-container {
  background-color: beige;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  width: 60%;
}
.quote-text {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}
.quote-author {
  font-style: italic;
  font-size: 20px;
  text-align: right;
}

Скрипт:

const quotes = [
  {
    text: "Life is 10% what happens to us and 90% how we react to it.",
    author: "Charles R. Swindoll",
  },
  {
    text: "Success is not final, failure is not fatal: it is the courage to continue that counts.",
    author: "Winston Churchill",
  },
  {
    text: "Don't watch the clock; do what it does. Keep going.",
    author: "Sam Levenson",
  },
  {
    text: "The best way to predict the future is to create it.",
    author: "Abraham Lincoln",
  },
  {
    text: "Happiness is not something ready made. It comes from your own actions.",
    author: "Dalai Lama",
  },
];
const getQuote = () => {
  const quote = quotes[Math.floor(Math.random() * quotes.length)];

  document.getElementById("quoteText").innerHTML = quote.text;
  document.getElementById("quoteAuthor").innerHTML = `- ${quote.author}`;
};

 


Warning: Undefined variable $aff_bottom_mark in /sites/codelab.pro/wp-content/themes/myTheme/dist/partials/post/post_base.php on line 81

Warning: Undefined variable $aff_bottom_info in /sites/codelab.pro/wp-content/themes/myTheme/dist/partials/post/post_base.php on line 85