JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<div id="container" class="list">
      <ul id="toons" class="list-group">
        <!-- Conatct Object li.list-group-item.contact will be added here by js -->
      </ul>
    </div>

JavaScript

//create firebase reference
var dbRef = new Firebase("https://my-firebase.firebaseio.com/");
 var contactsRef = dbRef.child('toons');

  //load older conatcts as well as any newly added one...
  contactsRef.on("child_added", function(snap) {
    console.log("added", snap.key(), snap.val());
  document.querySelector('#toons')
.innerHTML += contactHtmlFromObject(snap.val());


// For each <li> inside #links
 for (var i = 0; i < links.length; i++) {
   var link = links[i];
 link.onclick = myFunction;
  }
});

//prepare conatct object's HTML
function contactHtmlFromObject(toons){
  console.log( toons );
  var html = '';
  html += '<li class="list-group-item contact">';
    html += '<div>';
      html += '<p class="lead">'+"john"+'</p>';
      html += '<p>'+"999-000-1234"+'</p>';
       html += '<p><small title="'
            +toons.photoUrl+'">'
            +"User Name: " + toons.userId
            +'</small></p>';
html += '</div>';
  html += '</li>';

  return html;
}
  var cars = document.querySelector(".list");

 cars.addEventListener("click", function(e)
{
 var toonName = (e.target.innerHTML);
  alert(toonName);

 window.location = 'toonInfo.html';
  window.sessionStorage.setItem('toon',toonName);

});