nadaa/app.js

## app.js
// model

$(function(){
var Cat =function(name,img)
{
this.name=name;
this.img=img;
this.clickCount=0;
}

var cat1=new Cat('cat1','http://r.ddmcdn.com/s_f/o_1/cx_0/cy_0/cw_300/ch_300/w_300/APL/uploads/2014/10/kitten-cuteness300.jpg');
var cat2=new Cat('cat2','http://videos.usatoday.net/Brightcove3/29906170001/201610/1089/29906170001_5189972487001_5189953163001-vs.jpg?pubId=29906170001&quality=10');
var cat3=new Cat('cat3','http://r.ddmcdn.com/s_f/o_1/cx_0/cy_0/cw_300/ch_300/w_300/APL/uploads/2014/10/kitten-cuteness300.jpg');

var arrCats=[cat1,cat2,cat3];

var currentCat=null;
// octopus


var octopus={

addCat:function(){},

removeCat:function(){},

getCatNams:function(){
	var catNames=[];
	arrCats.forEach(function(c){
		catNames.push(c.name);

	})
	return catNames;

},
increaseCount:function(){
currentCat.clickCount+=1;
//console.log(currentCat)


},

getCurrentCat:function(index){
	return arrCats[index];
},

init: function(){

	currentCat=arrCats[0];
	view1.init();
	view2.init();

}


}


//view1 to display cats names

var view1={

init:function(){
//fill the ul by catsnames
	this.catList=$('#catList');
	this.catNameTemplate=$('script[data-template="catsNames"]').html();
	this.catNames=octopus.getCatNams();


	this.render();
// listen to li elements
	this.catList.on('click','li',function(){
		var indexCat=$(this).index();

		currentCat=octopus.getCurrentCat(indexCat);

		//view1.render();
		view2.init();


	});
},

render:function(){
	// we have the list of catsnames (catNames)
	// we selected the ul item by the variable (catList)
	//we have the template (catNameTemplate)

	this.catList.html('');
	var that=this;
	this.catNames.forEach(function(name){
		var templateCats=that.catNameTemplate.replace(/{{catName}}/g,name);
		that.catList.append(templateCats);

	});


}

}
// view2 to display the selected cat image and click number
var view2={
init:function(index){
	// get the div of image and clickcount

	this.catDetails=$('#catDetails');
	this.catDetails.html('');

	var button=$('button');


	this.templateDetails=$('script[data-model="catsdetails"]').html();


	this.render();


	//listen to the image click event
var that=this;
this.catDetails.on('click','#divImg',function(){
	//console.log(currentCat.clickCount)
	octopus.increaseCount()


    that.render();

})


},

render:function(){

// get the information of the current cat.
	var clickedImage= currentCat.img;
	var clickCount=currentCat.clickCount;
	var catName=currentCat.name;


	var tempName=this.templateDetails.replace(/{{catName}}/g,catName);
	var tempImg=tempName.replace(/{{src}}/g,clickedImage);
    var tempClick=tempImg.replace(/{{count}}/g,clickCount);

    // append the template to the cat details div
       this.catDetails.html(tempClick);

}


}


 octopus.init();
}());

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Cat Clicker</title>
	<link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>

<h1> Cat Clicker App</h1>
<!-- to list all cats' names -->
<button>CountClick</button>
<div id=cats>
<ul id="catList"> </ul>
</div>


<!-- to display the selected cat info -->
<div id="catDetails">


</div>


<!-- view1 -->
<script type="text/template" data-template='catsNames'>
	<li class='cats' data-name='{{catName}}'>
	{{catName}}
	</li>

</script>


<!-- view2 -->
<script type="text/template" data-model='catsdetails'>

<div id="divName">
	{{catName}}
</div>
<div id="divImg">
<img src='{{src}}'>
</div>
<div id="divCount">
<span> {{count}}</span>Clicks
</div>

</script>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"> </script>

  <script src="app.js"> </script>

</body>
</html>
	// model

	$(function(){
	var Cat =function(name,img)
	{
	this.name=name;
	this.img=img;
	this.clickCount=0;
	}

	var cat1=new Cat('cat1','http://r.ddmcdn.com/s_f/o_1/cx_0/cy_0/cw_300/ch_300/w_300/APL/uploads/2014/10/kitten-cuteness300.jpg');
	var cat2=new Cat('cat2','http://videos.usatoday.net/Brightcove3/29906170001/201610/1089/29906170001_5189972487001_5189953163001-vs.jpg?pubId=29906170001&quality=10');
	var cat3=new Cat('cat3','http://r.ddmcdn.com/s_f/o_1/cx_0/cy_0/cw_300/ch_300/w_300/APL/uploads/2014/10/kitten-cuteness300.jpg');

	var arrCats=[cat1,cat2,cat3];

	var currentCat=null;
	// octopus


	var octopus={

	addCat:function(){},

	removeCat:function(){},

	getCatNams:function(){
	var catNames=[];
	arrCats.forEach(function(c){
	catNames.push(c.name);

	})
	return catNames;

	},
	increaseCount:function(){
	currentCat.clickCount+=1;
	//console.log(currentCat)


	},

	getCurrentCat:function(index){
	return arrCats[index];
	},

	init: function(){

	currentCat=arrCats[0];
	view1.init();
	view2.init();

	}


	}



	//view1 to display cats names

	var view1={

	init:function(){
	//fill the ul by catsnames
	this.catList=$('#catList');
	this.catNameTemplate=$('script[data-template="catsNames"]').html();
	this.catNames=octopus.getCatNams();


	this.render();
	// listen to li elements
	this.catList.on('click','li',function(){
	var indexCat=$(this).index();

	currentCat=octopus.getCurrentCat(indexCat);

	//view1.render();
	view2.init();


	});
	},

	render:function(){
	// we have the list of catsnames (catNames)
	// we selected the ul item by the variable (catList)
	//we have the template (catNameTemplate)

	this.catList.html('');
	var that=this;
	this.catNames.forEach(function(name){
	var templateCats=that.catNameTemplate.replace(/{{catName}}/g,name);
	that.catList.append(templateCats);

	});


	}

	}
	// view2 to display the selected cat image and click number
	var view2={
	init:function(index){
	// get the div of image and clickcount

	this.catDetails=$('#catDetails');
	this.catDetails.html('');

	var button=$('button');


	this.templateDetails=$('script[data-model="catsdetails"]').html();


	this.render();


	//listen to the image click event
	var that=this;
	this.catDetails.on('click','#divImg',function(){
	//console.log(currentCat.clickCount)
	octopus.increaseCount()


	that.render();

	})


	},

	render:function(){

	// get the information of the current cat.
	var clickedImage= currentCat.img;
	var clickCount=currentCat.clickCount;
	var catName=currentCat.name;


	var tempName=this.templateDetails.replace(/{{catName}}/g,catName);
	var tempImg=tempName.replace(/{{src}}/g,clickedImage);
	var tempClick=tempImg.replace(/{{count}}/g,clickCount);

	// append the template to the cat details div
	this.catDetails.html(tempClick);

	}


	}


	octopus.init();
	}());
	<!DOCTYPE html>
	<html>
	<head>
	<title>Cat Clicker</title>
	<link rel="stylesheet" type="text/css" href="styles.css">

	</head>
	<body>

	<h1> Cat Clicker App</h1>
	<!-- to list all cats' names -->
	<button>CountClick</button>
	<div id=cats>
	<ul id="catList"> </ul>
	</div>



	<!-- to display the selected cat info -->
	<div id="catDetails">


	</div>


	<!-- view1 -->
	<script type="text/template" data-template='catsNames'>
	<li class='cats' data-name='{{catName}}'>
	{{catName}}
	</li>

	</script>





	<!-- view2 -->
	<script type="text/template" data-model='catsdetails'>

	<div id="divName">
	{{catName}}
	</div>
	<div id="divImg">
	<img src='{{src}}'>
	</div>
	<div id="divCount">
	<span> {{count}}</span>Clicks
	</div>

	</script>




	<script src="https://code.jquery.com/jquery-3.3.1.min.js"
	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	crossorigin="anonymous"> </script>

	<script src="app.js"> </script>

	</body>
	</html>