-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (101 loc) · 2.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<title>Cat Clicker</title>
<link rel="stylesheet" type="text/css" href="index.css"></link>
</head>
<body>
<ol id="myList"></ol>
<div id="cat">
<h2 id="cat-name"></h2>
<div id="cat-count">
</div>
<img id="cat-img" src="" alt="cute cat">
</div>
<script>
var model1 = {
currentCat: null,
cats: [{
clickCount: 0,
name: 'Tabby',
imgSrc: 'http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg',
}, {
clickCount: 0,
name: 'Tiger',
imgSrc: 'https://www.petfinder.com/wp-content/uploads/2012/11/101438745-cat-conjunctivitis-causes.jpg',
}, {
clickCount: 0,
name: 'Tossy',
imgSrc: 'https://www.funnypica.com/wp-content/uploads/2015/05/TOP-30-Cute-Cats-Cute-Cat-30.jpg',
}, {
clickCount: 0,
name: 'Tussel',
imgSrc: 'https://pbs.twimg.com/profile_images/602729491916435458/hSu0UjMC.jpg',
},
]
};
var model2 = {
getCurrentCat: function() {
return model1.currentCat;
},
getCats: function() {
return model1.cats;
},
setCurrentCat: function(cat) {
model1.currentCat = cat;
},
incrementCounter: function() {
model.currentCat.clickCount++;
catView.render();
}
}
var model3 = {
init: function() {
this.catListElem = document.getElementById('myList');
this.render();
},
render: function() {
var cats = model2.getCats();
this.catListElem.innerHTML = '';
for (i = 0; i < cats.length; i++) {
var cat = cats[i];
var x = document.createElement('LI');
x.textContent = cat.name;
x.addEventListener('click', (function(catCopy) {
return function() {
model2.setCurrentCat(catCopy);
display(catCopy);
increment(catCopy);
};
})(cat));
this.catListElem.appendChild(x);
}
}
};
this.catElem = document.getElementById('cat');
this.catNameElem = document.getElementById('cat-name');
this.catImageElem = document.getElementById('cat-img');
this.countElem = document.getElementById('cat-count');
function display(cat1){
var currentCat = model2.getCurrentCat();
this.countElem.textContent = cat1.clickCount;
if(this.countElem.textContent==0)
this.catNameElem.textContent = "Newborn";
else if(this.countElem.textContent>0 && this.countElem.textContent<10)
this.catNameElem.textContent = "Infant";
else
this.catNameElem.textContent = "Teen";
this.catImageElem.src = cat1.imgSrc;
}
function increment(cat2) {
this.catImageElem.addEventListener('click',function(){
cat2.clickCount++;
display();
});
}
model3.init();
display();
myFunction();
</script>
</body>
</html>