Shortcode - All Project Statuses

main.php

$json = file_get_contents('./api/research.json');
$research = json_decode($json, true);
$progProjects = array();
$devProjects = array();
$comProjects = array();

foreach ($research as $project)
{
	if($project[status] == 'In Progress')
	{
		array_push($progProjects, $project);
	}
	else if($project[status] == 'In Development')
	{
		array_push($devProjects, $project);
	}
	else if($project[status] == 'Complete')
	{
		array_push($comProjects, $project);
	}
	
}

echo("<h3 class='title_'>In Development</h3><ul class='cus'>");
foreach ($devProjects as $project)
{
	echo("<li class='dev-line line_'>");
	echo("<span class='proj-id'>");
	echo($project[id]);
	echo("</span> ");
	echo($project[title]);
	echo("</li>");
}
echo("</ul>");

echo("<h3 class='title_'>In Progress</h3><ul class='cus'>");
foreach ($progProjects as $project)
{
	echo("<li class='progress-line line_'>");
	echo("<span class='proj-id'>");
	echo($project[id]);
	echo("</span> ");
	echo($project[title]);
	echo("</li>");
}
echo("</ul>");

echo("<h3 class='title_'>Completed</h3><ul class='cus'>");
foreach ($comProjects as $project)
{
	echo("<li class='com-line line_'>");
	echo("<span class='proj-id'>");
	echo($project[id]);
	echo("</span> ");
	echo($project[title]);
	echo("</li>");
}
echo("</ul>");

script.js

var prog_array = [];
var dev_array = [];
var com_array = [];

var progress_list = document.getElementsByClassName('progress-line');
var dev_list = document.getElementsByClassName('dev-line');
var com_list = document.getElementsByClassName('com-line');


for(i = 0; i < progress_list.length; i++){
	prog_array.push(progress_list[i].innerHTML);
}
for(i = 0; i < dev_list.length; i++){
	dev_array.push(dev_list[i].innerHTML);
}
for(i = 0; i < com_list.length; i++){
	com_array.push(com_list[i].innerHTML);
}

prog_array.sort();
dev_array.sort();
com_array.sort();

for(i = 0; i < progress_list.length; i++){
	progress_list[i].innerHTML = "<div class='prog butt'></div>" + prog_array[i];
}
for(i = 0; i < dev_list.length; i++){
	dev_list[i].innerHTML = "<div class='dev butt'></div>" + dev_array[i];
}
for(i = 0; i < com_list.length; i++){
	com_list[i].innerHTML = "<div class='com butt'></div>" + com_array[i];
}


var proj_ids = document.getElementsByClassName('proj-id');
for(i = 0; i < proj_ids.length; i++){
jQuery('.proj-id').eq(i).wrap("<a href='/research/current-projects/" + proj_ids[i].innerText + "'></a>");
}

style.css

.butt{
	width: 20px;
    height: 20px;
    border-radius: 100%;
    float: left;
	margin-right: 5px;
}

.prog{background-color: lightsalmon;}
.dev{background-color: lightblue;}
.com{background-color: lightgreen;}

.line_{
	margin: 5px 0 !important;
	list-style-type: none !important;
}

.title_{
	margin:30px 0 15px 0;
}

.cus{display: inline-block;}
.cus:last-of-type{
	margin-bottom: 30px;
}

.proj-id{
	width: 80px;
    float: left;
}