daZjRb

dazjrb.markdown

daZjRb

A Pen by Jason Livesay on CodePen.

License.

index.html

<div class="cell">
  <div class="name"><span style="vertical-align:middle">JOBS IN QUEUE</span></div>
  <div class="biginfo">784</div>
</div>

<ul><li><a href="" data-id="1001" class="job">Job #1001</a></li>
  <li><a href="" data-id="1002" class="job">Job #1002</a></li></ul>
  
  <div id="details"></div>

script.js

function selJob(e) {
  let id = this.getAttribute("data-id");
  document.getElementById('details').innerHTML = 'Job #'+id+' details go here.';
  e.preventDefault();
};

let jobs = document.getElementsByClassName("job");
for (let i=0; i<jobs.length; i++) {
    jobs[i].addEventListener('click', selJob, false);
};

style.css

div {
  font-family: sans-serif;
  vertical-align: top;
}
.cell {
  background-color: #383838;
  width: 200px;
  height: 200px;
  border: solid 7px black;
}

.name {
  background-color: #232323;
  color: white;
  height: 35px;
  font-weight: bold;
  font-size: 12px;
  padding-top: 15px;
  padding-bottom: 5px;
  padding-left: 15px;
  line-height: 30px;
}

.name::before {
  content: "•"; 
  color: lightgreen;
  font-size: 30px;
  vertical-align: middle;
  padding-right: 10px;
}
.dot {
  color: lightgreen;
  font-size: 30px;
  line-height: 12px;
  margin-top: 10px;
}
.biginfo {
  font-size: 52px;
  color: white;
  font-weight: bold;
  padding-left: 30px;
  padding-top: 35px;
}