Генератор случайных цитат на 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}`;
};