Cree una aplicación web de generador de cotizaciones con JavaScript puro usando una API

Posted on by Rudeus Greyrat

En este tutorial, vamos a crear una aplicación web que obtenga citas motivacionales e inspiradoras mediante una API.

Requerimientos de aplicacion:

  1. Bootstrap 4 CDN
  2. API: https://type.fit/api/quotes
  3. JavaScript
  4. HTML

Pasos: siga los pasos a continuación para crear un generador de cotizaciones.

  • Paso 1 Recuperar: estamos utilizando la función de recuperación incorporada de JavaScript para obtener los datos de la API. Esta función devuelve una promesa. Usaremos la función innerHTML de JavaScript para completar los datos de la API en una página web

    guión.js

    fetch(url).then(function (response) {
           return response.json();
    }).then(function (data) {  
        return response.json();
    }

  • Paso 2 Botón para Siguiente y Anterior: Estamos incrementando y decrementando los valores establecidos por nosotros en una variable para cambiar de una cotización a otra.

    guión.js

    let nextthought = document.getElementById("nextthought");
       nextthought.addEventListener("click", function () {
         let countnum = document.getElementById("countnum");
     
         countnum.value = ++a;
     
         displaythought(countnum.value, data);
       });
     
       let previousthought = document.getElementById("previousthought");
       previousthought.addEventListener("click", function () {
         let countnum = document.getElementById("countnum");
     
         if (countnum.value < 0) {
           let thought = document.getElementById("thought");
           thought.innerHTML = `<b><i>You are at first quote</i></b>`;
         } else {
           a = --countnum.value;
     
           displaythought(a, data);
         }
       });

  • Paso 3 Botón para buscar: para el botón de búsqueda, estamos tomando una entrada de valor del usuario para buscar ese número en particular en nuestro conjunto de datos proporcionado por la API y luego mostrarlo en nuestra página web.

    guión.js

    let searchbtn=document.getElementById('searchbtn');
    searchbtn.addEventListener('click',function(){
           let countnum=document.getElementById('countnum');
           let inputsearch=document.getElementById('inputsearch');
           a=inputsearch.value;
           countnum.value=inputsearch.value;
           displaythought(a,data);
    })

Ahora crearemos la estructura HTML y combinaremos todas las secciones js anteriores para realizar la obtención y manipulación de los datos de la API.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, 
               initial-scale=1, 
            shrink-to-fit=no"/>
  
    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"/>
    <link href=
"https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap"
      rel="stylesheet"/>
  
    <title>My Quotes</title>
    <style>
      body {
        font-family: "Chelsea Market", cursive;
      }
    </style>
  </head>
  
  <body style="background-color: black; color: white">
    <div class="container">
      <div class="jumbotron text-center bg-dark mt-4">
        <h1 class="display-4">My Quotes</h1>
        <p class="lead">Motivational, Inspirational and more !</p>
  
        <hr class="my-4" />
        <div id="thought"></div>
        <div class="row">
          <div class="col-lg-10">
            <input
              type="number"
              min="0"
              class="form-control"
              id="inputsearch"
              placeholder="numbers (1/1642)"
              onkeypress="return event.charCode >= 
                       48 && event.charCode <= 57"/>
          </div>
  
          <button
            type="button"
            class="btn btn-outline-success col-lg-2"
            id="searchbtn">
            Search
          </button>
        </div>
        <div class="container mt-3">
          <button
            class="btn btn-outline-danger btn-lg"
            role="button"
            id="previousthought">
            Previous
          </button>
          <span>----</span>
          <input id="countnum" type="hidden" />
          <button
            class="btn btn-outline-primary btn-lg"
            role="button"
            id="nextthought">
            Next==>
          </button>
        </div>
      </div>
    </div>
  
    <!-- Optional JavaScript; choose one of the two! -->
  
    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
            crossorigin="anonymous">
    </script>
    <script src="script.js"></script>
  </body>
</html>

script.js

let url = "https://type.fit/api/quotes";
fetch(url)
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    let a = 0;
  
    let searchbtn = document.getElementById("searchbtn");
    searchbtn.addEventListener("click", function () {
      let countnum = document.getElementById("countnum");
      let inputsearch = document.getElementById("inputsearch");
      a = inputsearch.value;
      countnum.value = inputsearch.value;
      displaythought(a, data);
    });
  
    let nextthought = document.getElementById("nextthought");
    nextthought.addEventListener("click", function () {
      let countnum = document.getElementById("countnum");
  
      countnum.value = ++a;
  
      displaythought(countnum.value, data);
    });
  
    let previousthought = document.getElementById("previousthought");
    previousthought.addEventListener("click", function () {
      let countnum = document.getElementById("countnum");
  
      if (countnum.value < 0) {
        let thought = document.getElementById("thought");
        thought.innerHTML = `<b><i>You are at first quote</i></b>`;
      } else {
        a = --countnum.value;
  
        displaythought(a, data);
      }
    });
  
    displaythought(0, data);
  });
  
function displaythought(index, data) {
  let thought = document.getElementById("thought");
  
  if (data[index].author == null) {
    data[index].author = "unknown";
  }
  
  let htmlthought = `<div class="alert alert-outline-primary">
            ${data[index].text}<br>
            <span style="color:#00ffc5;">
                ${data[index].author}
            </span>
        </div>`;
  thought.innerHTML = htmlthought;
}

Producción:

Publicación traducida automáticamente

Artículo escrito por namankumar2592 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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