<!-- <!DOCTYPE html> -->
<html>

<head>
	<title>Pauline's sample</title>
	<meta charset="UTF-8" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
	<div id="app">
		<div id="header">Check out our jobs!</div>
    
    <div class="section" id="allOpportunities">
      <h4>All opportunities</h4>
    </div>
    
    <div  class="section" id="searchDiv">
    <h4>Search a job in a particular area</h4>
    <select id="state" onchange="changeState()">
      <option value="ALL" selected="selected">N/A</option> 
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
      <option value="NY">New York</option>
    </select>
  </div>
    
    <div  class="section" id="stateOpportunities">
    </div>
        
    <div class="section" id="cityOpportunities">
      <button type="button" class="btn btn-warning" id="btnCities" onclick=displayByCity()>Display all the jobs by cities</button>
      <div id="listCities">
        <h4>Opportunities by Cities</h4>
      </div>
    </div>
   
</div>

	<script src="src/index.js">
</script>
</body>
 
</html>
#app{
    font-size: 1em;
    color: #444444;
}

#header{
  background-color: #50D0CE ;
  position: sticky;
  font-size: 1.5em;
  color: white;
  text-align: center;
  padding: 10px;
}

.section{
    padding: 10px;
  width: 70%;
  margin:auto;
}

#listCities{
  display:none
}

.city{
  text-decoration: underline;
  padding: 5px;
}

.titleOrg{
  margin-left:20px;
}

// objects w/ properties and methods needed
function Job(title, organization, city, state){
    this.title = title;
    this.organization = organization;
    this.city = city;
    this.state = state
    this.toString = function(){
      let jobString = 'Title: ' + title + 
             ', Organization: ' + organization+ 
             ', City: ' + city + 
             ', ' + state + '\n'  
      return jobString;
    }
}

function JobsList(){
    let list = [];
    this.getList = function(){
        return list;
    }
    this.addJob = function(job){
        list.push(job)
    }
}

//my Values from string/Json/DB..
let string = `Chipotle, Lead Chef, Denver, CO
Equity, Stunt Double, Los Angeles, CA
IBM, Manager of Fun, Albany, NY
Tit 4 Tat, Associate Tattoo Artist, Brooklyn, NY
IBM, Assistant to the Regional Manager, Los Angeles, CA
Philharmonic, Lead Guitarist, Woodstock, NY`

let myArrJobs = string.split('\n')

//create the List for All Opp. and fill it 
let myListAll=new JobsList;
for (let i =0 ; i < myArrJobs.length;i++){
    let information = myArrJobs[i].split(', ');
    let newJob = new Job(information[1], information[0], information[2], information[3])  
    myListAll.addJob(newJob);
}

let myAllJobList = myListAll.getList()
myAllJobList.sort((a,b)=> (a.title>b.title)*2-1); 

let outputAll = '';

for (let job in myAllJobList){
    outputAll += myAllJobList[job].toString() +'<br>';    
}
document.getElementById("allOpportunities").innerHTML += outputAll;

//when change in the dropdown list, we'll only display the jobs for the selected state
function changeState() {
  let stateSelected = document.getElementById("state").value;
  let myStateJobList = myAllJobList.filter(job => job.state === stateSelected);
  let stateOutput = ''
  for (let job in myStateJobList){
    stateOutput += myStateJobList[job].toString() +'<br>';    
}
  switch(stateSelected){
    case 'CA': document.getElementById("stateOpportunities").innerHTML ='Jobs in California:<br>'
      break;
    case 'CO': document.getElementById("stateOpportunities").innerHTML ='Jobs in Colorado:<br>'
      break;
    case 'NY': document.getElementById("stateOpportunities").innerHTML ='Jobs in New York:<br>'
      break;
    case 'ALL':         document.getElementById("stateOpportunities").innerHTML =''
      break;
  }
  document.getElementById("stateOpportunities").innerHTML += stateOutput      
}

//button clicked to display all the jobs ordered by cities
function displayByCity(){
  document.getElementById("btnCities").style.display = "none";
  document.getElementById("listCities").style.display = "block";
  let hash = {}
  let listByCity = myAllJobList.sort((a,b)=> (a.city>b.city)*2-1);  
   for(let city in listByCity){
     if(!hash[listByCity[city].city]){
       hash[listByCity[city].city] = true;
       document.getElementById("cityOpportunities").innerHTML += '<div class="city">' +listByCity[city].city + ', ' + listByCity[city].state + '</div>' 
      }
     document.getElementById("cityOpportunities").innerHTML += '<div class="titleOrg">' + listByCity[city].title + ' at ' + listByCity[city].organization + '</div>' 
   }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.