720 чтения

Этот код Javascript генерирует случайные цитаты

к Emmanuel Okolie 6m2024/04/25

Слишком долго; Читать

Как создать проект случайных цитат с помощью ванильного JavaScript.

featured image - Этот код Javascript генерирует случайные цитаты

Что приходит вам на ум, когда вы слышите слово «случайная цитата», используя ванильный JavaScript? Насколько я понимаю, все может быть.

И может быть другой язык сценариев, который может создавать случайные кавычки, но один из наиболее выдающихся из них — использование JavaScript для создания случайных кавычек.

Возможно, вы видели некоторые приложения для социальных сетей, которые отображают сообщения людей, но вам нужно продолжать прокручивать, чтобы увидеть больше сообщений. Но в соответствии с тем, что мы будем строить, вам придется нажать кнопку, чтобы просмотреть новую цитату.

Примечание. В этом уроке мы будем использовать API. API используется для случайного получения котировок в Интернете. Просто нажав кнопку, API получает новые котировки. Итак, не теряя много времени, давайте углубимся в это руководство.

Предварительное условие

Вам необходимо иметь базовые знания HTML
Вам необходимо иметь базовые знания CSS.
Вам необходимо иметь базовые знания JavaScript
Также есть редактор кода (код Sublime или VS) и т. д.

Пошаговый генератор случайных цитат на JavaScript

Случайная цитата извлекает котировки случайным образом из API или массива. В этой статье мы будем использовать JavaScript для создания котировок из массива, разрабатывая генератор случайных цитат с нуля, используя только HTML, CSS и JavaScript. Ниже приведено пошаговое руководство по выполнению задачи случайной цитаты.

Шаг 1. Создание нового проекта. Проект, который вы собираетесь создать, содержит три страницы: HTML, CSS и JavaScript. поэтому вы назовете различные страницы, которые будут называться так. index.html, style.css, script.js. После этого вы готовы перейти к следующему шагу.

Шаг 2. Создание каркаса. Этот шаг позволит вам добавить несколько HTML-кодов, которые придадут структуру вашему проекту.
Примечание. Этот раздел, вероятно, является первым, что нужно сделать после создания папки и файлов, как указано выше.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--META information--> <meta name="description" content="Random Quote Generator"> <meta name="keywords" content="HTML,CSS,JavaScript, Quotes, API"> <meta name="author" content="EmmyKolic"> <!--End of META information--> <title>Random Quotes</title> <!--LINK CUSTOM CSS FILE--> <link rel="stylesheet" href="style.css"> <!--FONTAWESOME CDN--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="crossorigin="anonymous"> </head> <body> <!-- Quote Container --> <div class="container"> <!-- Quote to be Displayed Here --> <h1> <i class="fas fa-quote-left"></i> <span class="quote" id="quote"></span> <i class="fas fa-quote-right"></i> </h1> <!-- Author to be Displayed Here --> <p class="author" id="author"></p> <hr /> <div class="button"> <!--Button to tweet the quote --> <a class="twitter" id="tweet" href="https://twitter.com/intent/tweet?text=Greetings" data-size="large" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a> <!--Add an onclick event on 'next quote' button. Upon the click of a button, a new random quote is generated--> <button class="next" onclick="getNewQuote()">Next quote</button> </div> </div> <!--LINK CUSTOM JS FILE--> <script src="script.js"></script> </body> </html>

Шаг 3. Добавление стилей для классов. В этом разделе мы добавим стили в код с помощью CSS для создания генератора цитат. Примечание. Этот раздел — следующее, что нужно сделать после создания файла index.html. Вы создадите еще один файл с именем style.css. Файл style.css будет связан с файлом HTML.

Затем вы можете стилизовать макет HTML. Вот CSS-код ниже.

 * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; transition: 0.5s; transition-timing-function: ease-in; background-image: linear-gradient( to right bottom, rgb( 51, 255, 141 ), #acc9ffa8 ); display: flex; align-items: center; justify-content: center; } .container { display: flex; flex-direction: column; align-items: center; padding: 30px; box-shadow: 0 4px 10px rgba(27, 245, 235 , 0.5); border-radius: 15px; width: 600px; background-color: rgba(255, 255, 255, 0.3); margin: 10px; } .fa-quote-left, .fa-quote-right { font-size: 35px; color: rgb(170, 0, 0); } .quote { text-align: center; font-size: 40px; font-weight: bold; } .author { margin: 10px; text-align: right; font-size: 25px; font-style: italic; font-family: cursive; } hr { margin: 10px 0; width: 100%; border: 1px solid black; background-color: black; } .button { width: 100%; display: flex; padding: 10px; justify-content: space-between; align-items: center; margin: 9px; } .twitter { border: 1px solid rgb(102, 179, 255); border-radius: 4px; background-color: rgb(102, 179, 255); color: white; padding-bottom: 15px; text-align: center; font-size: 1.8em; width: 60px; height: 35px; line-height: 40px; } .next { font-size: 18px; border-radius: 5px; cursor: pointer; padding: 10px; margin-top: 5px; font-weight: bold; color: white; background-image: linear-gradient( to right bottom, rgb(22, 210, 248), #bcd7ffa8 ); } .container:hover { box-shadow: 0 10px 10px rgb(0, 180, 230); }

Шаг 4. Добавьте несколько строк кода JavaScript. На этом этапе мы добавим некоторый код JavaScript для создания генератора котировок. Примечание. Этот раздел является важной частью данного руководства. Теперь вы создадите еще один файл, назовите его script.js.

Просмотрев приведенный ниже код, вы ясно увидите, что было сделано. Мы взаимодействовали с API, используя ссылку и сохраняя ее внутри переменной с именем url. Чтобы сделать это руководство кратким, просмотрите файл script.js и перед каждым разделом увидите комментарий. Вот код JavaScript ниже.

 const text = document.getElementById("quote"); const author = document.getElementById("author"); const tweetButton = document.getElementById("tweet"); const getNewQuote = async () => { //api for quotes var url = "https://type.fit/api/quotes"; // fetch the data from api const response = await fetch(url); console.log(typeof response); //convert response to json and store it in quotes array const allQuotes = await response.json(); // Generates a random number between 0 and the length of the quotes array const indx = Math.floor(Math.random() * allQuotes.length); //Store the quote present at the randomly generated index const quote = allQuotes[indx].text; //Store the author of the respective quote const auth = allQuotes[indx].author; if (auth == null) { author = "Anonymous"; } //function to dynamically display the quote and the author text.innerHTML = quote; author.innerHTML = "~ " + auth; //tweet the quote tweetButton.href = "https://twitter.com/intent/tweet?text=" + quote + " ~ " + auth; }; getNewQuote();

Заключение

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

Мы увидели, как взаимодействовать с API, хотя это не единственный и, лучше сказать, лучший способ взаимодействия с API. и как опубликовать цитату из нашего JS-кода в своей учетной записи Twitter.

Просто обсуждение этого урока показало нам многое. Так что смело оставляйте комментарии! И если вы хотите больше уроков , пожалуйста, следуйте за мной.

До следующих встреч. Приятного дня!

Об авторе

Эммануэль Околи — Full-Stack разработчик на Laravel с 2+ летним опытом работы в индустрии разработки программного обеспечения. Он развил полноценные навыки, совмещая разработку программного обеспечения, писательство и обучение других тому, что он делает. Его стеки — ReactJs, Laravel, PHP, JavaScript, и другие.

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

Эммануэль Околи был бы рад возможности поговорить с вами. Пожалуйста, посетите и подпишитесь на него в Linked-In , Facebook , Github , Twitter или на его веб-сайте .