D3 Examples - JS Bin dog clicker premium version // source https://jsbin.com/nedehut

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
<meta name="description" content="dog clicker premium version">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
img {
  width: 600px;
}
#dog {
  margin-bottom: 10px;
}
#dogList {
  width: 300px;
}
#admin {
  margin-bottom: 10px;
}
#adminName,
#adminURL,
#adminNumber {
  margin-bottom: 10px;
}
​
.changeForm{
  display:none
}
.active{
  display:block;
}
</style>
</head>
​
<body>
  <div id="dogList"></div>
  <div id='dog'>
    <h2 id='dogName'></h2>
    <img id='dogImage' src=''>
    <div id='counter'></div>
    <button id='admin'>Admin Change</button>
​
    <form id='changeForm' class='changeForm'>
      <div id='adminName'>
        <label>Name: </label>
        <input id='inputName' type='text' name='name'>
      </div>
      <div id='adminURL'>
        <label>Image URL: </label>
        <input id="inputURL" type='text' name='imageUrl'>
      </div>
      <div id='adminNumber'>
        <label>Number of Clicks: </label>
        <input id='inputNumber' type='number' name='numberClick'>
      </div>
      <input id='cancelform' type='button' value='Cancel'>
      <input id='saveform' type='button' value='Save'>
    </form>
  </div>
<script id="jsbin-javascript">
(function() {
  //store data
  var dogModel = {
    currentDog: null,
    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 = {
    init: function() {
      dogModel.currentDog = dogModel.dogs[0];
      dogListView.init();
      dogView.init();
    },
    getCurrentDog: function() {
      return dogModel.currentDog;
    },
    getDogs: function() {
      return dogModel.dogs;
    },
    setCurrentDog: function(dog) {
      dogModel.currentDog = dog;
​
    },
    add: function() {
      dogModel.currentDog.count++;
      dogView.render();
    },
    resetDogInfo:function(updateDog){
      for (var i = 0; i < dogModel.dogs.length; i++) {
          if (octopus.getCurrentDog().name == dogModel.dogs[i].name) {
            dogModel.dogs[i].name = updateDog.name;
            dogModel.dogs[i].img = updateDog.img;
            dogModel.dogs[i].count = updateDog.count;
          }
        }
    },
    clearForm:function(){
      document.getElementById('inputName').value='';
      document.getElementById('inputURL').value='';
      document.getElementById('inputNumber').value='';
      document.getElementById('changeForm').className = 'changeForm';
    }
  };
​
​
  var dogView = {
    init: function() {
      this.dogName = document.getElementById('dogName');
      this.dogImage = document.getElementById('dogImage');
      this.dogCounter = document.getElementById('counter');
​
      this.dogImage.addEventListener('click', octopus.add);
      this.render();
    },
    render: function() {
      var currentDog = octopus.getCurrentDog();
​
      this.dogName.textContent = currentDog.name;
      this.dogImage.src = currentDog.img;
      this.dogCounter.textContent = currentDog.count;
    }
  };
​
  var dogListView = {
    init: function() {
      this.dogList = document.getElementById('dogList');
      this.adminButton = document.getElementById('admin');
      this.adminButton.addEventListener('click', function(){
      document.getElementById('cancelform').addEventListener('click', octopus.clearForm);         document.getElementById('changeForm').classList.toggle('active');
      });
      this.render();
      this.renderForm();
    },
    
    render: function() {
      var dog = octopus.getDogs();
      this.dogList.innerHTML = '';
      for (var i = 0; i < dog.length; i++) {
        var div = document.createElement('div');
        var text = document.createTextNode(dog[i].name);
        div.appendChild(text);
        this.dogList.appendChild(div);
        div.addEventListener('click', (function(icopy) {
          return function() {
            octopus.setCurrentDog(icopy);
            dogView.render();
          }
        }(dog[i])));
      }
    },
    renderForm: function() {
      document.getElementById('saveform').addEventListener('click', function() { 
        //new updated dog
        var updateDog = {};
        updateDog.name = document.getElementById('inputName').value;
        updateDog.img = document.getElementById('inputURL').value;
        updateDog.count = document.getElementById('inputNumber').value;
        //get the currentDog name;
        if(updateDog.name==''){
          alert('please put name');
        }else if(updateDog.img==''){
          alert('please put img url');
        }else if(updateDog.count==''){
          alert('please put count');
        }else{
          octopus.resetDogInfo(updateDog);
          octopus.setCurrentDog(updateDog);
        }
        dogListView.render();
        dogView.render();
        octopus.clearForm();
      });
    },
  }
  octopus.init();
}());
</script>
​
​
<script id="jsbin-source-css" type="text/css">img {
  width: 600px;
}
#dog {
  margin-bottom: 10px;
}
#dogList {
  width: 300px;
}
#admin {
  margin-bottom: 10px;
}
#adminName,
#adminURL,
#adminNumber {
  margin-bottom: 10px;
}
​
.changeForm{
  display:none
}
.active{
  display:block;
}</script>
​
<script id="jsbin-source-javascript" type="text/javascript">(function() {
  //store data
  var dogModel = {
    currentDog: null,
    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 = {
    init: function() {
      dogModel.currentDog = dogModel.dogs[0];
      dogListView.init();
      dogView.init();
    },
    getCurrentDog: function() {
      return dogModel.currentDog;
    },
    getDogs: function() {
      return dogModel.dogs;
    },
    setCurrentDog: function(dog) {
      dogModel.currentDog = dog;
​
    },
    add: function() {
      dogModel.currentDog.count++;
      dogView.render();
    },
    resetDogInfo:function(updateDog){
      for (var i = 0; i < dogModel.dogs.length; i++) {
          if (octopus.getCurrentDog().name == dogModel.dogs[i].name) {
            dogModel.dogs[i].name = updateDog.name;
            dogModel.dogs[i].img = updateDog.img;
            dogModel.dogs[i].count = updateDog.count;
          }
        }
    },
    clearForm:function(){
      document.getElementById('inputName').value='';
      document.getElementById('inputURL').value='';
      document.getElementById('inputNumber').value='';
      document.getElementById('changeForm').className = 'changeForm';
    }
  };
​
​
  var dogView = {
    init: function() {
      this.dogName = document.getElementById('dogName');
      this.dogImage = document.getElementById('dogImage');
      this.dogCounter = document.getElementById('counter');
​
      this.dogImage.addEventListener('click', octopus.add);
      this.render();
    },
    render: function() {
      var currentDog = octopus.getCurrentDog();
​
      this.dogName.textContent = currentDog.name;
      this.dogImage.src = currentDog.img;
      this.dogCounter.textContent = currentDog.count;
    }
  };
​
  var dogListView = {
    init: function() {
      this.dogList = document.getElementById('dogList');
      this.adminButton = document.getElementById('admin');
      this.adminButton.addEventListener('click', function(){
      document.getElementById('cancelform').addEventListener('click', octopus.clearForm);         document.getElementById('changeForm').classList.toggle('active');
      });
      this.render();
      this.renderForm();
    },
    
    render: function() {
      var dog = octopus.getDogs();
      this.dogList.innerHTML = '';
      for (var i = 0; i < dog.length; i++) {
        var div = document.createElement('div');
        var text = document.createTextNode(dog[i].name);
        div.appendChild(text);
        this.dogList.appendChild(div);
        div.addEventListener('click', (function(icopy) {
          return function() {
            octopus.setCurrentDog(icopy);
            dogView.render();
          }
        }(dog[i])));
      }
    },
    renderForm: function() {
      document.getElementById('saveform').addEventListener('click', function() { 
        //new updated dog
        var updateDog = {};
        updateDog.name = document.getElementById('inputName').value;
        updateDog.img = document.getElementById('inputURL').value;
        updateDog.count = document.getElementById('inputNumber').value;
        //get the currentDog name;
        if(updateDog.name==''){
          alert('please put name');
        }else if(updateDog.img==''){
          alert('please put img url');
        }else if(updateDog.count==''){
          alert('please put count');
        }else{
          octopus.resetDogInfo(updateDog);
          octopus.setCurrentDog(updateDog);
        }
        dogListView.render();
        dogView.render();
        octopus.clearForm();
      });
    },
  }
  octopus.init();
}());</script></body>
​
</html>
    