Cómo crear un generador de frases aleatorio usando JQuery.

Random-Quote-Machine

En esta publicación, le mostraré cómo crear una aplicación muy simple que generará una frase aleatoria utilizando JQuery y una API (Interfaz de programación de aplicaciones). Este es uno de los proyectos de freecodecamp, un campo de entrenamiento en línea gratuito para el desarrollo front-end. Esta aplicación generará una cotización aleatoria una vez que el usuario haga clic en el siguiente botón o lo comparta con Twitter si se hace clic en el botón Compartir. Como funcionalidad adicional, haremos que el fondo cambie de color con cada click .

1. Plantilla HTML .

Antes que nada crearemos un contenedor para toda nuestra aplicación, usaré bootstrap para crear estilos mas rápido. Dentro de este div, tendremos dos etiquetas p con el id “quote” y “author” que mostrarán la información respectiva y dos botones con las id “getquote” y “share”  . Es importante poner una id en cada elemento que necesitamos para manipular o acceder al DOM.

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <p id="quote"></p>
            <p id="author"></p>
        </div>
    </div>
    <div class="row">
        <ul class="list-inline">
         	<li>
         	  <a id="getquote" 
                   class="btn btn-default" href="#">Next
              </a>
            </li>
         	<li>
         	  <a id="share" 
                   class="btn btn-default" href="#">Share
              </a>
            </li>
        </ul>
    </div>
</div>

2. Mejorando la apariencia con CSS 

Agregaremos un poco de estilos CSS para que la aplicación se vea mejor

body{

background-color: #4d1933;
color: white;
font-family: 'GidoleRegular'; 
}
.container{
	text-align: center;
	background-color: lightgray;
	max-width: 900px;
	margin-top: 7%;
	border-radius: 10px;
	padding: 25px 25px 25px 25px;
	background-color: inherit;
	border: solid 2px white;
	max-width: 700px;
}
#quote{
	line-height: 37px;
	font-size: 32px;
	font-stretch: 38px;
}
#author{
	line-height: 26px;
	font-size: 17px;
	font-stretch: 28px;
	text-align: right;
	padding-top: 20px;
	padding-right: 10px;
}

3. Agregando la Funcionalidad con JQuery.

En esta aplicación obtendremos la información de una fuente externa, usando una API, que es una interfaz donde diferentes aplicaciones pueden comunicarse entre sí. Al usar una API, podemos aprovechar la base de datos de otras personas y obtener información rápida en lugar de tener que crearla nosotros mismos. Para este proyecto usaremos forismatic, pero hay muchas otras bibliotecas de citas que puedes usar.

Dentro de una función ready() generaremos dos variables globales que contendrán el autor y la cita.

$(document).ready(function(){

    var quote;
    var author;

});

Luego vamos a crear una función llamada getQuote() que generará una solicitud HTTP a la URL, usando Ajax. La configuración principal será la url, donde se encuentra la API, jsonp necesaria para eludir las políticas de dominios cruzados en los navegadores web y el success, que contiene la función a llamar si la solicitud tiene éxito. Esta función tendrá un parámetro (response) que generará los datos (en este caso, solo necesitamos la cita y el autor).

function getQuote(){

    $.ajax({
    
        url:'https://api.forismatic.com/api/1.0/',
        jsonp: 'jsonp',
        dataType: 'jsonp',
        data: {
            method: 'getQuote',
            lang:'en',
            format:'jsonp'
        },
        success: function(response){
        
            quote = response.quoteText;
            author = response.quoteAuthor;
            
           
        }
    });
}

El autor obtenido de la API puede ser nulo y no se mostrará nada al usuario. Arreglemos eso agregando una declaración If Else para mostrar “desconocido” en caso de que sea nulo, dentro de la función que contiene el parámetro “response”.

 $('#quote').text("\" " + quote + "\" ");
            
        if(author){
        
             $('#author').text('-- '+ author);
        
        }else{
        
            $('#author').text('- unknown');
   }

Continuemos creando un simpleclick event hanfler para el botón con el id “getquote” y llamar a la función que creamos previamente. Recuerde utilizar la función preventDefault() para detener la acción predeterminada de un elemento.

$('#getquote').on('click', function(event){

    event.preventDefault();
    getQuote();

});

Haremos otro controlador de eventos con el botón de compartir, pero en lugar de ejecutar la función GetQuote usaremos la función window.open () para abrir una página de Twitter usando la siguiente URL https://twitter.com/intent/tweet?text =  + la función encodeURIComponent con quote y author como argumentos. Esto nos permitirá insertar la cita y el autor directamente en twitter.

$('#share').on('click', function(event){

    event.preventDefault();
    
    window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(quote + ' -- ' + author));

});

Ahora nuestra Aplicación es completamente funcional, pero podemos agregarle más cosas. Como característica adicional, podemos cambiar el color CSS del fondo cada vez que el usuario haga clic en Siguiente. Para empezar, crearemos una función anónima y una array llamada colors que contenga los colores que queremos mostrar.

$(function() {

    getQuote();
    
    var colors = ['#4d0000', '#264d00', '#4d004d', '#001a4d'], color;

});

Debajo de la array, crea otro event handler para el botón con el id  #getquote. Para cambiar los colores aleatoriamente haremos uso de una función Math.random() multiplicada por el numero de colores actual, usando colors.length Esto devolverá un número flotante, por esa razón pondremos esta función dentro de otra función llamada math.Floor (), que devolverá un entero. Almacene la función en una variable llamada randColor.

$('#getquote').click(function() {
    
    var randColor;

    randColor = colors[Math.floor(Math.random() * colors.length)];

});

Solo queremos que esta función se ejecute mientras que la variable color es igual al RandColor obtenido en la formula. Cree unadeclaración  do while  para ese método.

$('#getquote').click(function() {
    
    var randColor;
    
    do {
    
        randColor = colors[Math.floor(Math.random() * colors.length)];
    
    } while (color == randColor);

});

Debajo de la declaración Do While, seleccionaremos los elementos HTML a los que queremos cambiar de color. Como primer parámetro de la función usaremos el CSS “background-color” y, como segundo argumento, la variable Randcolor que acabamos de crear y que generará aleatoriamente los colores cada vez que un usuario haga clic.

$('#getquote').click(function() {
    
    var randColor;
    
    do {
    
        randColor = colors[Math.floor(Math.random() * colors.length)];
    
    } while (color == randColor);
    
        $('html body').css('background-color', randColor);
        
        color = randColor;

});

 

Código JQuery completo:

$(document).ready(function(){

    var quote;
    var author;
    
    function getQuote(){
    
        $.ajax({
            
            url:'https://api.forismatic.com/api/1.0/',
            jsonp: 'jsonp',
            dataType: 'jsonp',
            data: {
                
                method: 'getQuote',
                lang:'en',
                format:'jsonp'
            },
            success: function(response){
            
                quote = response.quoteText;
                author = response.quoteAuthor;
                
                $('#quote').text("\" " + quote + "\" ");
                
                if(author){
                    
                     $('#author').text('-- '+ author);
                
                }else{
                    
                    $('#author').text('- unknown');
                    
                }
            }
        });
    }
    
    $('#getquote').on('click', function(event){
    
        event.preventDefault();
        getQuote();
        
    });
    
    $('#share').on('click', function(event){
    
        event.preventDefault();
        window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(quote + ' -- ' + author));
    
    });
    
    $(function() {
    
        getQuote();
        
        var colors = ['#4d0000', '#264d00', '#4d004d', '#001a4d'],color;
        
        $('#getquote').click(function() {
        
            var randColor;
            
            do {
                
                randColor = colors[Math.floor(Math.random() * colors.length)];
            
            } while (color == randColor);
            
                $('html body').css('background-color', randColor);
                
                color = randColor;
        
        });
    });
});

Puedes ver esta aplicación online en Codepen

 


 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *