Build a Random Quote Machine - freeCodeCamp - Ч.1
Тем не менее читать искать и спрашивать не запрещается. Тем более, не запрещается думать.
Давайте посмотрим что нужно реализовать:
1. Случайная смена цитаты по клику.
2. Случайная смена цвета фона страницы.
3. Кнопка позволяющая поделиться цитатой в Твиттере.
Что хотелось бы изменить по сравнению с предлагаемым проектом:
1. Зафиксировать кнопку для смены цитаты в определённом месте страницы.
2. Использовать русскоязычные цитаты.
3. Не использовать бутстрап и jQury.
4. Возможно, реализовать не только смену цитат и цвета фона, но ещё и смену картинки к цитате.
В поисковике находим статью называющуюся "Как построить генератор случайных цитат с JavaScript и HTML, для абсолютных новичков". Статья действительно для новичков.
Основные пункты оттуда.
1. Проект включает в себя как минимум три файла: index.html, style.css, script.js.
2. Код html выглядит так:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Quote Gen</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="guoteDisplay">
<!-- Здесь будет цитата -->
</div>
<button onclick="newQuote()">New quote</button>
<script src="script.js"></script>
</body>
</html>
3. Скрипт включает в себя массив с цитатами (каждая цитата в кавычках, между цитатами запятые, после последней цитаты запятой нет)
var quotes = []
... и функцию newQuote():
function newQuote() {
var randomNumber = Math.floor(Math.random() * quotes.length);
document.getElementById('guoteDisplay').innerHTML = quotes[randomNumber];
}
4. Стили css предлагается добавить самостоятельно.
Результат работы кода можно посмотреть здесь.
Преимущества.
1. Код работает.
2. Язык и содержание цитат выбираем самостоятельно.
Недостатки.
1. Текст цитат приходится вставлять в js-код.
2. Возможно повторение одной и той же цитаты два раза подряд.
3. Не указывается автор цитаты.