716 leituras

Este código Javascript gera citações aleatórias

por Emmanuel Okolie 6m2024/04/25

Muito longo; Para ler

Como construir um projeto de cotações aleatórias usando Vanilla JavaScript.

featured image - Este código Javascript gera citações aleatórias

O que vem à sua mente quando você ouve a palavra citação aleatória usando Vanilla JavaScript? No que me diz respeito, qualquer coisa pode ser o caso.

E pode haver outra linguagem de script que pode fazer citações aleatórias, mas uma das mais distintas delas é usar JavaScript para fazer citações aleatórias.

Você pode ter visto alguns aplicativos de mídia social que exibem postagens de pessoas, mas você deve continuar rolando para ver mais postagens. Mas de acordo com o que iremos construir, você terá que clicar em um botão para visualizar uma nova cotação.

Nota: neste tutorial faremos uso de uma API, a API é usada para buscar as cotações aleatoriamente na web. Apenas clicando no botão a API busca novas cotações. Portanto, sem perder muito tempo, vamos mergulhar neste guia.

Pré-requisito

Você precisa ter conhecimentos básicos de HTML
Você precisa ter conhecimento básico de CSS
Você precisa ter conhecimento básico de JavaScript
Também tenha um editor de código (código Sublime ou VS) etc.

Gerador de cotações aleatórias em JavaScript passo a passo

Uma cotação aleatória extrai cotações aleatoriamente de uma API ou array. Neste artigo, usaremos JavaScript para produzir cotações a partir de um array enquanto projetamos um gerador de cotações aleatórias do zero usando apenas HTML, CSS e JavaScript. Abaixo está um guia passo a passo para realizar a tarefa de cotação aleatória.

Etapa 1: está fazendo um novo projeto O projeto que você está prestes a construir contém três páginas: HTML, CSS e JavaScript. então você nomeará as várias páginas que serão nomeadas assim. index.html, estilo.css, script.js. Depois de fazer isso, você estará pronto para passar para a próxima etapa.

Passo 2: Construindo a estrutura Esta etapa permitirá que você adicione alguns códigos HTML que darão estrutura ao seu projeto.
Nota: Esta seção é provavelmente a primeira coisa a fazer após criar a pasta e os arquivos conforme indicado acima.

 <!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>

Etapa 3: Adicionando estilos para as classes Nesta seção, adicionaremos estilos ao código usando CSS, para construir o gerador de cotações. Nota: Esta seção é a próxima coisa a fazer após criar o arquivo index.html, você criará outro arquivo chamado style.css, o arquivo style.css será vinculado ao arquivo HTML.

Então você estiliza o layout do HTML. Aqui está o código CSS abaixo.

 * { 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); }

Etapa 4: incorpore algumas linhas de código JavaScript. Nesta etapa, incorporaremos algum código JavaScript para construir o gerador de cotações. Nota: Esta seção é uma parte essencial deste tutorial. Agora você criará outro arquivo chamado script.js.

Percorra o código abaixo e você verá claramente o que foi feito. Interagimos com uma API usando um link e salvando dentro de uma variável chamada url. Para tornar este guia breve, acesse o script.js e você notará um comentário antes de cada seção. Aqui está o código JavaScript abaixo.

 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();

Conclusão

Chegamos ao final deste tutorial, esperamos que você tenha ganhado muito valor. Sobre como construir um projeto de cotações aleatórias usando Vanilla JavaScript.

Vimos como interagir com uma API, embora essa não seja a única maneira, ou devo dizer, a melhor maneira de interagir com uma API. e como twittar uma citação do nosso código JS para sua conta do Twitter.

Apenas discutir este tutorial nos mostrou muito. Então fique à vontade para deixar um comentário! E se você quiser mais tutoriais , por favor me siga.

Até a próxima, aproveite seu dia!

Sobre o autor

Emmanuel Okolie é um desenvolvedor laravel full-stack com 2+ anos de experiência na indústria de desenvolvimento de software. Ele desenvolveu habilidades completas combinando desenvolvimento de software, escrita e ensinando aos outros o que faz. Suas pilhas são ReactJs, Laravel, PHP, JavaScript, e muito mais.

Ele trabalha como freelancer, construindo sites para clientes e redigindo manuais técnicos para instruir outras pessoas sobre como realizar seu trabalho.

Emmanuel Okolie gostaria de ter a oportunidade de falar com você. Por favor, visite e siga-o no Linked-In , Facebook , Github , Twitter ou em seu site .