JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<hr>
<input type="checkbox" checked><a href="http://egi.utah.edu/research/current-projects/I00973" target="_blank">Liquids from Shales, Phase 1</a>
<hr>
<input type="checkbox" checked><a href="http://egi.utah.edu/research/current-projects/I00973_2" target="_blank">Liquids from Shales, Phase 2</a>
<hr>
<input type="checkbox" checked><a href="http://egi.utah.edu/research/current-projects/I00983_2" target="_blank">Shale Gas Production Analysis, Phase 2</a>
<hr>
<input type="checkbox" checked><a href="http://egi.utah.edu/research/current-projects/I01166" target="_blank">Risk Reduction in the Eagle Ford</a>
<hr>
<input type="checkbox" checked><a href="http://egi.utah.edu/research/current-projects/I01167" target="_blank">Risk Reduction in the Niobrara Formation</a>
<hr>
<input type="checkbox" checked><a href="http://egi.utah.edu/research/current-projects/I01075" target="_blank">Central Utah Nevada Deep Plays</a>
<hr>
<input type="checkbox" checked><a href="http://egi.utah.edu/research/current-projects/I01210" target="_blank">Petroleum Systems Atlas of Mexico</a>
<hr>
<input type="checkbox" checked><a href="http://egi.utah.edu/research/current-projects/I01230" target="_blank">Frontier Basins of Mexico: Gulf of California</a>
<hr>
<input type="checkbox" checked><a href="http://egi.utah.edu/research/current-projects/I01005" target="_blank">South American Shales, Phase 1</a>
<hr>
<input type="checkbox"><a href="http://egi.utah.edu/research/current-projects/I01005_2" target="_blank">South American Shales, Phase 2</a>
<hr>
<input type="checkbox"><a href="http://egi.utah.edu/research/current-projects/I01013" target="_blank">Northwest African Margins</a>
<hr>
<input type="checkbox"><a href="http://egi.utah.edu/research/current-projects/I01165" target="_blank">Karoo Basin Unconventional Characterization</a>
<hr>
<input type="checkbox"><a href="http://egi.utah.edu/research/current-projects/I01023" target="_blank">UK Shales</a>
<hr>
<input type="checkbox"><a...

CSS

a:visited {
    color:black;
}
a {
    color:black;
    text-decoration:none;
    //margin-left:5px;
}
body {
    font-family:'Calibri';
}
input {
    margin-right:10px;
}
hr {
    border:0px;
    background-color:gray;
    height:1px;
    //margin:0px;
}

JavaScript

// List of all EGI Current Projects

var link = document.getElementsByTagName('a');

function thiso(i2) {
    link[i2].style.backgroundColor = "lightgray";
}

for (i = 0; i < link.length; i = i + 2) {
    //thiso(i);
}

$('input').attr('checked', false);

//alert($('input').length);

$('body').prepend(
    "<p> Total Projects: &nbsp; " + $('input').length + "</p>"
);