720 lecturas

Este código Javascript genera citas aleatorias

por Emmanuel Okolie 6m2024/04/25

Demasiado Largo; Para Leer

Cómo construir un proyecto de citas aleatorias usando JavaScript básico.

featured image - Este código Javascript genera citas aleatorias

¿Qué te viene a la mente cuando escuchas la palabra cita aleatoria usando JavaScript básico? En lo que a mí respecta, cualquier cosa puede ser el caso.

Y puede que exista otro lenguaje de scripting que pueda hacer citas aleatorias, pero uno de los más distinguidos es el uso de JavaScript para hacer citas aleatorias.

Es posible que hayas visto algunas aplicaciones de redes sociales que muestran las publicaciones de las personas, pero debes seguir desplazándote para ver más publicaciones. Pero de acuerdo con lo que estaremos construyendo, tendrás que hacer clic en un botón para ver una nueva cotización.

Nota: en este tutorial utilizaremos una API, la API se utiliza para recuperar las cotizaciones de forma aleatoria en la web. Con solo hacer clic en el botón, la API obtiene nuevas cotizaciones. Entonces, sin perder mucho tiempo, profundicemos en esta guía.

Requisito previo

Necesitas tener conocimientos básicos de HTML.
Necesitas tener conocimientos básicos de CSS.
Necesitas tener conocimientos básicos de JavaScript.
También tenga un editor de código (código Sublime o VS), etc.

Generador de cotizaciones aleatorias de JavaScript paso a paso

Una cotización aleatoria extrae cotizaciones aleatoriamente de una API o una matriz. En este artículo, usaremos JavaScript para producir citas a partir de una matriz mientras diseñamos un generador de citas aleatorias desde cero usando HTML, CSS y JavaScript únicamente. A continuación se muestra una guía paso a paso para realizar la tarea de cotización aleatoria.

Paso 1: Cómo crear un nuevo proyecto El proyecto que está a punto de crear contiene tres páginas: HTML, CSS y JavaScript. así que nombrarás las distintas páginas, se nombrarán así. index.html, estilo.css, script.js. Después de hacer esto, estará listo para pasar al siguiente paso.

Paso 2: Construir el marco Este paso le permitirá agregar algunos códigos HTML que le darán estructura a su proyecto.
Nota: Esta sección es probablemente lo primero que debe hacer después de crear la carpeta y los archivos como se indicó anteriormente.

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

Paso 3: Agregar estilos para las clases En esta sección, agregaremos estilos al código usando CSS para construir el generador de cotizaciones. Nota: Esta sección es lo siguiente que debe hacer después de crear el archivo index.html. Creará otro archivo llamado style.css y el archivo style.css se vinculará al archivo HTML.

Luego debes diseñar el diseño del HTML. Aquí está el código CSS a continuación.

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

Paso 4: incorpora algunas líneas de código JavaScript. En este paso, incorporaremos algo de código JavaScript para construir el generador de cotizaciones. Nota: Esta sección es una parte esencial de este tutorial. Ahora creará otro archivo llamado script.js.

Revise el código a continuación y verá lo que se hizo claramente. Interactuamos con una API usando un enlace y guardando dentro de una variable llamada URL. Para que esta guía sea breve, consulte script.js y verá un comentario antes de cada sección. Aquí está el código JavaScript a continuación.

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

Conclusión

Hemos llegado al final de este tutorial y, con suerte, habrás obtenido mucho valor. Sobre cómo crear un proyecto de citas aleatorias utilizando JavaScript básico.

Hemos visto cómo interactuar con una API, aunque esa no es la única manera o debería decir la mejor manera de interactuar con una API. y cómo twittear una cita de nuestro código JS en su cuenta de Twitter.

El solo hecho de discutir este tutorial nos ha mostrado mucho. ¡Así que no dudes en dejar un comentario! Y si quieres más tutoriales , sígueme.

Hasta la próxima, ¡disfruta tu día!

Sobre el Autor

Emmanuel Okolie es un desarrollador laravel full-stack con 2+ años de experiencia en la industria del desarrollo de software. Ha desarrollado habilidades completas fusionando el desarrollo de software, la escritura y enseñando a otros lo que hace. Sus pilas son ReactJs, Laravel, PHP, JavaScript, y más.

Trabaja como autónomo, crea sitios web para clientes y escribe manuales técnicos para instruir a otros sobre cómo realizar su trabajo.

Emmanuel Okolie agradecería tener la oportunidad de hablar con usted. Visítelo y sígalo en Linked-In , Facebook , Github , Twitter o su sitio web .