Skip to content

made entire card a clickable link to job page #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

made entire card a clickable link to job page #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 109 additions & 105 deletions scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,145 +1,149 @@
'use strict';

var apiData="";
var apiData = '';
const app = document.getElementById('root');
const container1 = document.createElement('div');
container1.setAttribute('class', 'container1');
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<cards.length ; i++){
if (cards[i].textContent.toLowerCase().match(regex)){
cards[i].style.display = "block";
} else{
cards[i].style.display= "none";
var cards = document.getElementsByClassName('card'); //this is an array
var regex = new RegExp(searchKeyword, 'g');

for (var i = 0; i < cards.length; i++) {
if (cards[i].textContent.toLowerCase().match(regex)) {
cards[i].style.display = 'block';
} else {
cards[i].style.display = 'none';
}
}
}

// FILTER BY JOB LOCATION
var button2 = document.getElementById("locationSearchButton");
var userInput2 = document.getElementById("userInput2");
var button2 = document.getElementById('locationSearchButton');
var userInput2 = document.getElementById('userInput2');
button2.addEventListener('click', showResults2);
userInput2.addEventListener("keyup", function(e){
if (e.keyCode === 13){
userInput2.addEventListener('keyup', function(e) {
if (e.keyCode === 13) {
showResults();
}
})
});

function showResults2(){
function showResults2() {
var searchKeyword = userInput2.value.toLowerCase();
var cards = document.getElementsByClassName("card");
var jobLocations = document.getElementsByTagName("h5");
var regex = new RegExp(searchKeyword, "g");

for (var i=0; i<cards.length ; i++){
if (jobLocations[i].textContent.toLowerCase().match(regex)){
cards[i].style.display = "block";
} else{
cards[i].style.display= "none";
var cards = document.getElementsByClassName('card');
var jobLocations = document.getElementsByTagName('h5');
var regex = new RegExp(searchKeyword, 'g');

for (var i = 0; i < cards.length; i++) {
if (jobLocations[i].textContent.toLowerCase().match(regex)) {
cards[i].style.display = 'block';
} else {
cards[i].style.display = 'none';
}
}
}

// FILTER BY JOB TYPE
let fullTimeCheckBox = document.getElementById("cbFT");
let partTimeCheckBox = document.getElementById("cbPT");
let contractCheckBox = document.getElementById("cbCT");
let jobType = document.getElementsByTagName("h4");

fullTimeCheckBox.addEventListener("change", showByJobType);
partTimeCheckBox.addEventListener("change", showByJobType);
contractCheckBox.addEventListener("change", showByJobType);

function showByJobType(){
let cards = document.getElementsByClassName("card");
for (var i=0; i<cards.length ; i++){
if (fullTimeCheckBox.checked === false){
if (jobType[i].textContent.toLowerCase() == "full time"){
cards[i].style.display = "none";
// FILTER BY JOB TYPE
let fullTimeCheckBox = document.getElementById('cbFT');
let partTimeCheckBox = document.getElementById('cbPT');
let contractCheckBox = document.getElementById('cbCT');
let jobType = document.getElementsByTagName('h4');

fullTimeCheckBox.addEventListener('change', showByJobType);
partTimeCheckBox.addEventListener('change', showByJobType);
contractCheckBox.addEventListener('change', showByJobType);

function showByJobType() {
let cards = document.getElementsByClassName('card');
for (var i = 0; i < cards.length; i++) {
if (fullTimeCheckBox.checked === false) {
if (jobType[i].textContent.toLowerCase() == 'full time') {
cards[i].style.display = 'none';
}
} else if (fullTimeCheckBox.checked){
if (jobType[i].textContent.toLowerCase() == "full time"){
cards[i].style.display = "block";
} else if (fullTimeCheckBox.checked) {
if (jobType[i].textContent.toLowerCase() == 'full time') {
cards[i].style.display = 'block';
}
}
if (partTimeCheckBox.checked === false){
if (jobType[i].textContent.toLowerCase() == "part time"){
cards[i].style.display = "none";
if (partTimeCheckBox.checked === false) {
if (jobType[i].textContent.toLowerCase() == 'part time') {
cards[i].style.display = 'none';
}
}else if (partTimeCheckBox.checked){
if (jobType[i].textContent.toLowerCase() == "part time"){
cards[i].style.display = "block";
} else if (partTimeCheckBox.checked) {
if (jobType[i].textContent.toLowerCase() == 'part time') {
cards[i].style.display = 'block';
}
}
if (contractCheckBox.checked === false){
if (jobType[i].textContent.toLowerCase() == "contract"){
cards[i].style.display = "none";
if (contractCheckBox.checked === false) {
if (jobType[i].textContent.toLowerCase() == 'contract') {
cards[i].style.display = 'none';
}
}else if (contractCheckBox.checked){
if (jobType[i].textContent.toLowerCase() == "contract"){
cards[i].style.display = "block";
} else if (contractCheckBox.checked) {
if (jobType[i].textContent.toLowerCase() == 'contract') {
cards[i].style.display = 'block';
}
}
}
Expand Down