API Github Jobs | JavaScript
Hoy voy a mostrarles como usar la API de Github Jobs para crear una aplicación web que nos permita buscar trabajos, lo estaremos haciendo usando Jaavascript, Axios, y Tailwind como hoja de estilos, empecemos.
Primero crearemos nuestros típico Index.html:
Ahora crearemos nuestro archivo app.js:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Github Jobs</title> | |
| <link rel="stylesheet" href="css/tailwind.css"> | |
| </head> | |
| <body class="bg-gray-200"> | |
| <h1 class="mt-10 text-center text-4xl font-bold">Buscador Github Jobs</h1> | |
| <form id="formulario" class="bg-teal-500 max-w-lg mx-auto mt-10 rounded p-6"> | |
| <div> | |
| <input | |
| type="text" | |
| class="w-full p-3 rounded placeholder-gray-900 " | |
| id="busqueda" | |
| placeholder="Búsqueda por tecnología: ej. Node.js Java o C#" | |
| > | |
| <input | |
| type="submit" | |
| value="Buscar Vacantes" | |
| class="bg-gray-800 text-white font-bold w-full uppercase mt-5 p-3 hover:bg-gray-700 cursor-pointer" | |
| > | |
| </div> | |
| </form> | |
| <div id="resultado" class="mt-10 container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start"> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script> | |
| <script src="js/app.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const formulario = document.querySelector('#formulario'); | |
| const resultado = document.querySelector('#resultado'); | |
| document.addEventListener('DOMContentLoaded', () => { | |
| formulario.addEventListener('submit', validarBusqueda); | |
| }); | |
| function validarBusqueda(e){ | |
| e.preventDefault(); | |
| const txtBusqueda = document.querySelector('#busqueda').value; | |
| if(txtBusqueda === ''){ | |
| mostrarAlerta('El campo es obligatorio'); | |
| return; | |
| } | |
| // Consultar API | |
| consultarAPI(txtBusqueda); | |
| } | |
| function consultarAPI(busqueda){ | |
| const gitUrl = `https://jobs.github.com/positions.json?search=${busqueda}`; | |
| const url = `https://api.allorigins.win/get?url= ${encodeURIComponent(gitUrl)}`; | |
| axios.get(url) | |
| .then(respuesta => mostrarVacantes(JSON.parse(respuesta.data.contents))); | |
| } | |
| function mostrarVacantes(vacantes){ | |
| limpiarHTML(); | |
| console.log(vacantes); | |
| if(vacantes.length > 0){ | |
| resultado.classList.add('grid'); | |
| // iterar | |
| vacantes.forEach( vacante => { | |
| const {title,type,url,company,company_url} = vacante; | |
| resultado.innerHTML += ` | |
| <div class="shadow bg-white p-6 rounded"> | |
| <h2 class="text-2xl font-light mb-4">${title}</h2> | |
| <p class="font-bold uppercase">Compañia: <span class="font-light normal-case">${company} </span></p> | |
| <p class="font-bold uppercase">Web Compañia: <span class="font-light normal-case"> <a href='${company_url}' target='_blank'> ${company_url}</a> </span></p> | |
| <p class="font-bold uppercase">Tipo de Contrato: <span class="font-light normal-case">${type} </span></p> | |
| <a class="bg-teal-500 max-w-lg mx-auto mt-3 rounded p-2 block uppercase font-xl font-bold text-white text-center" href="${url}" target='_blank'>Ver Vacante</a> | |
| </div> | |
| `; | |
| }); | |
| } else{ | |
| const noResultado = document.createElement('p'); | |
| noResultado.classList.add('text-center','mt-10', 'text-gray-600','w-full'); | |
| noResultado.textContent = 'No hay vacantes, intenta con otro término de búsqueda'; | |
| resultado.classList.remove('grid'); | |
| resultado.appendChild(noResultado); | |
| setTimeout(() => { | |
| noResultado.remove(); | |
| }, 3000); | |
| } | |
| } | |
| function limpiarHTML(){ | |
| while (resultado.firstChild) { | |
| resultado.removeChild(resultado.firstChild); | |
| } | |
| } | |
| function mostrarAlerta(mensaje){ | |
| const error = document.querySelector('.alerta'); | |
| if(!error){ | |
| const divAlerta = document.createElement('div'); | |
| divAlerta.classList.add('bg-gray-100','p-3','text-center','mt-3','alerta'); | |
| divAlerta.textContent= mensaje; | |
| formulario.appendChild(divAlerta); | |
| setTimeout(() => { | |
| divAlerta.remove(); | |
| }, 3000); | |
| } | |
| } |
Y listo, con eso tendremos nuestra aplicación web para buscar trabajo.
Comentarios
Publicar un comentario