D3 Examples - JS Bin // source https://jsbin.com/nedehut

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#dogList{
  width:200px;
}
.clickableName{ 
  padding:5px;
  
}
.clickableName:hover{
  color:red;
}
img{
  width:600px;
}
</style>
</head>
<body>
  <div id="dogList"></div>
  <div id="dogImage"></div>
  <div id="counter"></div>
<script id="jsbin-javascript">
(function() {
  //store data
  var dogModel = {
    dogs: [{
      name: 'Husky on grass',
      count: 0,
      img: 'https://c1.staticflickr.com/5/4064/4716348948_ef8b600421_b.jpg'
    }, {
      name: 'Husky watch',
      count: 0,
      img: 'https://c1.staticflickr.com/9/8450/7963612704_9438621071_b.jpg'
    }, {
      name: 'Shiba Inu on grass',
      count: 0,
      img: 'https://c1.staticflickr.com/4/3061/2723229689_a9b6710c4e_b.jpg'
    },{
      name: 'Shiba Inu watch',
      count: 0,
      img: 'https://c1.staticflickr.com/4/3552/3350511997_679390dd00_b.jpg'
    },{
      name: 'retriver with sunglasses',
      count: 0,
      img: 'https://c1.staticflickr.com/5/4120/4759108993_ab9059beed_b.jpg'
    },{
      name: 'retriver on grass',
      count: 0,
      img: 'https://c1.staticflickr.com/6/5442/9287313264_e5bbe53a87_z.jpg'
    },{
      name: 'Schnauzer in the rain',
      count: 0,
      img: 'https://c1.staticflickr.com/5/4250/34254659334_10b17043b2_b.jpg'
    },{
      name: 'Schnauzer in city',
      count: 0,
      img: 'https://c1.staticflickr.com/2/1593/26024637754_436eabfffe_b.jpg'
    }]
  };
​
  var octopus = {
    getDogNames: function(e) {
      var dogNames = [];
      for (var i = 0; i < dogModel.dogs.length; i++) {
        dogNames.push(dogModel.dogs[i].name);
      }
      return dogNames;
    },
    getDogImages: function() {
      var dogImages = [];
      for (var i = 0; i < dogModel.dogs.length; i++) {
        dogImages.push(dogModel.dogs[i].img);
      }
      return dogImages;
    },
    add:function(e){
      for(var i=0; i<dogModel.dogs.length;i++){
        if(this.src ==dogModel.dogs[i].img){
          dogModel.dogs[i].count++;
          document.getElementById('counter').innerHTML = "Count: "+ dogModel.dogs[i].count;
        }
      }
    },
    resetCounter:function(jnum){
      dogModel.dogs[jnum].count=0;
    },
    init: function() {
      view.init();
    }
  };
​
  var view = {
    init: function() {
      var t = octopus.getDogNames();
      this.renderList(t);
    },
    
    renderList: function(t) {
      for (var i = 0; i < t.length; i++) {
        var div = document.createElement('div');
        var text = document.createTextNode(t[i]);
        div.appendChild(text);
        div.setAttribute('class', 'clickableName');
        document.getElementById('dogList').appendChild(div);
      }
      this.renderImage();
    },
    
    renderImage: function() {
      var clickableNames = document.getElementsByClassName('clickableName');
      var images = octopus.getDogImages();
      var tt = document.getElementById('counter');
      for (var j = 0; j < clickableNames.length; j++) {
        clickableNames[j].addEventListener('click', (function(jcopy) {
          return function() {
            this.style.color='green';
            var divImage = document.createElement('img');
            var removeImage = document.getElementById('dogImage');
            var h2 = document.createElement('h2');
            var h2text = document.createTextNode(this.textContent);
            h2.appendChild(h2text);
            while (removeImage.hasChildNodes()) {
              removeImage.removeChild(removeImage.lastChild);
            }
            while(tt.hasChildNodes()){
              tt.removeChild(tt.lastChild);
            }
            divImage.setAttribute('src', images[jcopy]);
            document.getElementById('dogImage').appendChild(h2);
            document.getElementById('dogImage').appendChild(divImage);
            divImage.addEventListener('click', octopus.add); 
            octopus.resetCounter(jcopy);
          };
        }(j)));
      }
    }
  };
  octopus.init();
}());
</script>
​
​
<script id="jsbin-source-css" type="text/css">#dogList{
  width:200px;
}
.clickableName{ 
  padding:5px;
  
}
.clickableName:hover{
  color:red;
}
img{
  width:600px;
}
</script>
​
<script id="jsbin-source-javascript" type="text/javascript">(function() {
  //store data
  var dogModel = {
    dogs: [{
      name: 'Husky on grass',
      count: 0,
      img: 'https://c1.staticflickr.com/5/4064/4716348948_ef8b600421_b.jpg'
    }, {
      name: 'Husky watch',
      count: 0,
      img: 'https://c1.staticflickr.com/9/8450/7963612704_9438621071_b.jpg'
    }, {
      name: 'Shiba Inu on grass',
      count: 0,
      img: 'https://c1.staticflickr.com/4/3061/2723229689_a9b6710c4e_b.jpg'
    },{
      name: 'Shiba Inu watch',
      count: 0,
      img: 'https://c1.staticflickr.com/4/3552/3350511997_679390dd00_b.jpg'
    },{
      name: 'retriver with sunglasses',
      count: 0,
      img: 'https://c1.staticflickr.com/5/4120/4759108993_ab9059beed_b.jpg'
    },{
      name: 'retriver on grass',
      count: 0,
      img: 'https://c1.staticflickr.com/6/5442/9287313264_e5bbe53a87_z.jpg'
    },{
      name: 'Schnauzer in the rain',
      count: 0,
      img: 'https://c1.staticflickr.com/5/4250/34254659334_10b17043b2_b.jpg'
    },{
      name: 'Schnauzer in city',
      count: 0,
      img: 'https://c1.staticflickr.com/2/1593/26024637754_436eabfffe_b.jpg'
    }]
  };
​
  var octopus = {
    getDogNames: function(e) {
      var dogNames = [];
      for (var i = 0; i < dogModel.dogs.length; i++) {
        dogNames.push(dogModel.dogs[i].name);
      }
      return dogNames;
    },
    getDogImages: function() {
      var dogImages = [];
      for (var i = 0; i < dogModel.dogs.length; i++) {
        dogImages.push(dogModel.dogs[i].img);
      }
      return dogImages;
    },
    add:function(e){
      for(var i=0; i<dogModel.dogs.length;i++){
        if(this.src ==dogModel.dogs[i].img){
          dogModel.dogs[i].count++;
          document.getElementById('counter').innerHTML = "Count: "+ dogModel.dogs[i].count;
        }
      }
    },
    resetCounter:function(jnum){
      dogModel.dogs[jnum].count=0;
    },
    init: function() {
      view.init();
    }
  };
​
  var view = {
    init: function() {
      var t = octopus.getDogNames();
      this.renderList(t);
    },
    
    renderList: function(t) {
      for (var i = 0; i < t.length; i++) {
        var div = document.createElement('div');
        var text = document.createTextNode(t[i]);
        div.appendChild(text);
        div.setAttribute('class', 'clickableName');
        document.getElementById('dogList').appendChild(div);
      }
      this.renderImage();
    },
    
    renderImage: function() {
      var clickableNames = document.getElementsByClassName('clickableName');
      var images = octopus.getDogImages();
      var tt = document.getElementById('counter');
      for (var j = 0; j < clickableNames.length; j++) {
        clickableNames[j].addEventListener('click', (function(jcopy) {
          return function() {
            this.style.color='green';
            var divImage = document.createElement('img');
            var removeImage = document.getElementById('dogImage');
            var h2 = document.createElement('h2');
            var h2text = document.createTextNode(this.textContent);
            h2.appendChild(h2text);
            while (removeImage.hasChildNodes()) {
              removeImage.removeChild(removeImage.lastChild);
            }
            while(tt.hasChildNodes()){
              tt.removeChild(tt.lastChild);
            }
            divImage.setAttribute('src', images[jcopy]);
            document.getElementById('dogImage').appendChild(h2);
            document.getElementById('dogImage').appendChild(divImage);
            divImage.addEventListener('click', octopus.add); 
            octopus.resetCounter(jcopy);
          };
        }(j)));
      }
    }
  };
  octopus.init();
}());</script></body>
</html>
    