JSFiddle - React, Tailwind, and code Playground

by emturano

HTML

<section>
  <div class="container" id="jobs-container">
    <h1>Open jobs</h1>
    <div class="jobs-teams">
      <select>
      </select>
    </div>
    <div class="jobs-list">
    </div>
  </div>
</section>  

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

CSS

body {
  font-family: 'Lato', sans-serif;
  overflow-y: scroll;
}
  
p {
  margin: 0 0 1em 0;
  line-height: 1.4em;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
section {
  position: relative;
  padding: 30px;
}
.container {
  max-width: 960px;
  margin: 0 auto;
}
.job {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 40px 30px;
}
h1 {
  font-size: 48px;
  color: #454545;
  padding: 0 30px;
}
.job-title {
  font-size: 24px;
  text-decoration: none;
  color: #454545;
}

.job-title:hover {
  color: #00A0DF; 
}

.tags span {
  color: #999;
  font-size: 12px;
  color: grayMediumDark;
}
.tags span:after {
  content: ', ';
}
.tags span:last-of-type:after {
  content: '';
}
.description {
  color: #999;
}
.btn {
  display: inline-block;
  padding: 7px 15px;
  text-decoration: none;
  font-weight: normal;
  color: #999;
  border: 2px solid #ebebeb;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background: #f9f9f9;
}
.btn:hover {
  background: #ebebeb;
  color: #555;
}
.btn.active {
  background: #454545;
  border-color: #454545;
  color: #fff;
}
.jobs-teams {
  margin-bottom: 40px;
  padding: 0 30px
}
.jobs-teams .btn {
  margin: 0 8px 8px 0;
}
.jobs-teams .btn:first-of-type {
  margin-left: 0;
}
.jobs-teams .btn:last-of-type {
  margin-right: 0;
}

JavaScript

// Replace "leverdemo" with your own company name
url = 'https://api.lever.co/v0/postings/leverdemo?group=team&mode=json'

//Functions for checking if the variable is unspecified
function cleanString(string) {
  if (string) {
    var cleanString = string.replace(/\s+/ig, "");
    return cleanString;
  }
  else {
    return "Uncategorized";
  }
}

function nullCheck(string) {
  if (!string) {
    var result = 'Uncategorized'
    return result;
  }
  else { 
    return string;
  }
}

function createJobs(_data) {
  for(i = 0; i < _data.length; i++) {
    
    var team = nullCheck(_data[i].title)
    var teamCleanString = cleanString(team);
$('#jobs-container .jobs-teams select').append(
   '<option value="" class=' + teamCleanString + '>' + team + '</option>'
);
  }

  for(i = 0; i < _data.length; i++) {
    for (j = 0; j < _data[i].postings.length; j ++) {
      var posting = _data[i].postings[j] 
      var title = posting.text
      var description = posting.description  
      //Making each job description shorter than 250 characters
      var shortDescription = $.trim(description).substring(0, 250)
      .replace('\n', ' ') + "...";
      var location = nullCheck(posting.categories.location);
      var locationCleanString = cleanString(location);
      var commitment = nullCheck(posting.categories.commitment);
      var commitmentCleanString = cleanString(commitment);
      var team = nullCheck(posting.categories.team);
      var teamCleanString = cleanString(team);
      var link = posting.hostedUrl;
    
    	$('#jobs-container .jobs-list').append(
      '<div class="job '+teamCleanString+' '+locationCleanString+' '+commitmentCleanString+'">' +
        '<a class="job-title" href="'+link+'"">'+title+'</a>' +
        '<p class="tags"><span>'+team+'</span><span>'+location+'</span><span>'+commitment+'</span></p>' +
        '<p class="description">'+shortDescription+'</p>' +
        '<a class="btn" href="'+link+'">Learn more</a>' +
      '</div>'  
    
      );
  ...