kitty

by gentou

HTML

<div class="master">
  
  
  
</div>

CSS

.master{
  
  width: 100%;
  height: 100%;
  
}


.container{
  width: 60%;
  text-align:center;
}

.h-center{
  display: block;
  margin-left:auto;
  margin-right:auto;
}

.container img{
  width: 100%;
  height: 100%;
}

.container img:

#number{
  text-align: center;
}

JavaScript

function Clicker(container_identifier, name, picURL){
		this.kitty_name = name; 
    this.container_identifier = container_identifier;
    this.picURL = picURL;
    this.clicks = 0;
}

Clicker.prototype.initDOM = function(){
		var master = document.querySelector(".master");
    var template = '<div class="h-center container '+ this.container_identifier +  '"> <span id="name">' + this.kitty_name + '</span> <img src="' + this.picURL + '" class="kitty"> <span id="number"> 0 </span> </div>'
    console.log(template);
    master.insertAdjacentHTML('beforeend', template);
    this.container_element = document.querySelector("." + this.container_identifier + " .kitty");
    console.log("." + this.container_identifier + " .kitty")
		this.kitty = document.querySelector("." + this.container_identifier + " .kitty");
    console.log(this);
    this.counter = document.querySelector("." + this.container_identifier + " #number");
    
}


Clicker.prototype.init = function(){
		this.initDOM()
		var that = this;
    console.log(this.kitty);
		that.kitty.onclick = function(){
    	that.clicks = that.clicks + 1;
      that.counter.innerHTML = that.clicks;
    }
}

var neon = new Clicker("cat1", "MURLIKA", "http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg");
var neon2 = new Clicker("cat2", "KOTUN", "https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg");
neon.init();
neon2.init();