diff --git a/scripts.js b/scripts.js index 8290c43..8194c15 100644 --- a/scripts.js +++ b/scripts.js @@ -1,6 +1,6 @@ 'use strict'; -var apiData=""; +var apiData = ''; const app = document.getElementById('root'); const container1 = document.createElement('div'); container1.setAttribute('class', 'container1'); @@ -8,138 +8,142 @@ app.appendChild(container1); //GET REQUEST WITH USE OF HEROKU AS A PROXY TO SOLVE CORS ERROR var request = new XMLHttpRequest(); -request.open('GET','https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?&markdown=true&location=united+states&page=1&count=20', -true); - -request.onload = function () { -// CONVERT JSON DATA TO JAVASCRIPT OBJECTS USING JSON.PARSE - var apiData = JSON.parse(this.response); - if (request.status >= 200 && request.status < 400) { - apiData.forEach(job => { - const card = document.createElement('div'); - card.setAttribute('class', 'card'); - - //RENDER RELEVANT DATA - JOB TYPE, LOCATION, DESCRIPTION - const h2 = document.createElement('h2'); - job.title = job.title.substring(0, 40); - h2.textContent = `${job.title}...`; - - const h3 = document.createElement('h3'); - h3.textContent = job.company; - - const h4 = document.createElement('h4'); - h4.textContent = job.type; - - const h5 = document.createElement('h5'); - h5.textContent = job.location; - - const p = document.createElement('p'); - job.description = job.description.substring(0, 300); - p.textContent = `${job.description}...`; - - container1.appendChild(card); - card.appendChild(h2); - card.appendChild(h3); - card.appendChild(h4); - card.appendChild(h5); - card.appendChild(p); - }); - - // ERROR HANDLING - } else { - const errorMessage = document.createElement('marquee'); - errorMessage.textContent = `It's not working!`; - app.appendChild(errorMessage); - } -} +request.open( + 'GET', + 'https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?&markdown=true&location=united+states&page=1&count=20', + true +); + +request.onload = function() { + // CONVERT JSON DATA TO JAVASCRIPT OBJECTS USING JSON.PARSE + var apiData = JSON.parse(this.response); + if (request.status >= 200 && request.status < 400) { + apiData.forEach(job => { + const card = document.createElement('a'); + card.setAttribute('class', 'card'); + + //RENDER RELEVANT DATA - JOB TYPE, LOCATION, DESCRIPTION + card.href = job.url; + const h2 = document.createElement('h2'); + job.title = job.title.substring(0, 40); + h2.textContent = `${job.title}...`; + + const h3 = document.createElement('h3'); + h3.textContent = job.company; + + const h4 = document.createElement('h4'); + h4.textContent = job.type; + + const h5 = document.createElement('h5'); + h5.textContent = job.location; + + const p = document.createElement('p'); + job.description = job.description.substring(0, 300); + p.textContent = `${job.description}...`; + + container1.appendChild(card); + card.appendChild(h2); + card.appendChild(h3); + card.appendChild(h4); + card.appendChild(h5); + card.appendChild(p); + }); + + // ERROR HANDLING + } else { + const errorMessage = document.createElement('marquee'); + errorMessage.textContent = `It's not working!`; + app.appendChild(errorMessage); + } +}; // FILTER BY JOB TITLE -var button1 = document.getElementById("keywordSearchButton"); -var userInput1 = document.getElementById("userInput1"); +var button1 = document.getElementById('keywordSearchButton'); +var userInput1 = document.getElementById('userInput1'); button1.addEventListener('click', showResults1); -userInput1.addEventListener("keyup", function(e){ - if (e.keyCode === 13){ +userInput1.addEventListener('keyup', function(e) { + if (e.keyCode === 13) { showResults(); } -}) +}); -function showResults1(){ +function showResults1() { var searchKeyword = userInput1.value.toLowerCase(); - var cards = document.getElementsByClassName("card"); //this is an array - var regex = new RegExp(searchKeyword, "g"); - - for (var i=0; i