<style id="jsbin-css">
.current {
  background-color: #FCDC13;
}

#next {
  background-color: #FFA7C0;
}

.finished {
  text-decoration: line-through;
}

.cool {
  border: 2px solid #00D0CB;
  margin: 5px 0;
}
</style>
<h1>Reading List</h1>

<ul class="list">
  <li class="current">The Wind Up Bird Chronicle</li>
  <li class="current">A Visit From the Goon Squad</li>
  <li id="next">The Flamethrowers</li>
  <li>To Kill a Mockingbird</li>
  <li>Kafka on the Shore</li>
</ul>

<button id="chill">Chill!</button>
<script id="jsbin-javascript">
var change = document.getElementsByClassName('.current');
for (var i = 0; i < change.length; i++){
  change[i].className = 'finished';
}


document.getElementById('next').removeAttribute('id');
document.getElementsByTagName('li')[3].setAttribute('id', 'next');

var ul = document.getElementsByClassName("list");
function newClass() {
  for(var i = 0; i < ul.length; i++) {
    ul[i].classList.add("cool");
  }
}
var button = document.getElementById("chill");
button.addEventListener("click", newClass);
var li = document.getElementsByTagName('li')[0];
li.click(function() {
    alert("JavaScript is Fun");
});
</script>
<script id="jsbin-source-html" type="text/html"><h1>Reading List</h1>

<ul class="list">
  <li class="current">The Wind Up Bird Chronicle</li>
  <li class="current">A Visit From the Goon Squad</li>
  <li id="next">The Flamethrowers</li>
  <li>To Kill a Mockingbird</li>
  <li>Kafka on the Shore</li>
</ul>

<button id="chill">Chill!</button>
</script>

<script id="jsbin-source-css" type="text/css">.current {
  background-color: #FCDC13;
}

#next {
  background-color: #FFA7C0;
}

.finished {
  text-decoration: line-through;
}

.cool {
  border: 2px solid #00D0CB;
  margin: 5px 0;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var change = document.getElementsByClassName('.current');
for (var i = 0; i < change.length; i++){
  change[i].className = 'finished';
}


document.getElementById('next').removeAttribute('id');
document.getElementsByTagName('li')[3].setAttribute('id', 'next');

var ul = document.getElementsByClassName("list");
function newClass() {
  for(var i = 0; i < ul.length; i++) {
    ul[i].classList.add("cool");
  }
}
var button = document.getElementById("chill");
button.addEventListener("click", newClass);
var li = document.getElementsByTagName('li')[0];
li.click(function() {
    alert("JavaScript is Fun");
});


</script>