[ { "path": ".gitignore", "content": ".DS_Store" }, { "path": "CODEOWNERS", "content": "* @udacity/active-public-content" }, { "path": "README.md", "content": "# Cat Clicker Premium Vanilla\n\nHere's Ben's solution for Cat Clicker Premium from [Udacity's Javascript Design Patterns course](https://www.udacity.com/course/javascript-design-patterns--ud989).\n\nClone the repo and open up `index.html` in your browser of choice.\n" }, { "path": "index.html", "content": "\n\n\n \n Cat Clicker\n\n\n \n
\n

\n
\n \"cute\n
\n \n\n" }, { "path": "js/app.js", "content": "\n/* ======= Model ======= */\n\nvar model = {\n currentCat: null,\n cats: [\n {\n clickCount : 0,\n name : 'Tabby',\n imgSrc : 'img/434164568_fea0ad4013_z.jpg',\n imgAttribution : 'https://www.flickr.com/photos/bigtallguy/434164568'\n },\n {\n clickCount : 0,\n name : 'Tiger',\n imgSrc : 'img/4154543904_6e2428c421_z.jpg',\n imgAttribution : 'https://www.flickr.com/photos/xshamx/4154543904'\n },\n {\n clickCount : 0,\n name : 'Scaredy',\n imgSrc : 'img/22252709_010df3379e_z.jpg',\n imgAttribution : 'https://www.flickr.com/photos/kpjas/22252709'\n },\n {\n clickCount : 0,\n name : 'Shadow',\n imgSrc : 'img/1413379559_412a540d29_z.jpg',\n imgAttribution : 'https://www.flickr.com/photos/malfet/1413379559'\n },\n {\n clickCount : 0,\n name : 'Sleepy',\n imgSrc : 'img/9648464288_2516b35537_z.jpg',\n imgAttribution : 'https://www.flickr.com/photos/onesharp/9648464288'\n }\n ]\n};\n\n\n/* ======= Octopus ======= */\n\nvar octopus = {\n\n init: function() {\n // set our current cat to the first one in the list\n model.currentCat = model.cats[0];\n\n // tell our views to initialize\n catListView.init();\n catView.init();\n },\n\n getCurrentCat: function() {\n return model.currentCat;\n },\n\n getCats: function() {\n return model.cats;\n },\n\n // set the currently-selected cat to the object passed in\n setCurrentCat: function(cat) {\n model.currentCat = cat;\n },\n\n // increments the counter for the currently-selected cat\n incrementCounter: function() {\n model.currentCat.clickCount++;\n catView.render();\n }\n};\n\n\n/* ======= View ======= */\n\nvar catView = {\n\n init: function() {\n // store pointers to our DOM elements for easy access later\n this.catElem = document.getElementById('cat');\n this.catNameElem = document.getElementById('cat-name');\n this.catImageElem = document.getElementById('cat-img');\n this.countElem = document.getElementById('cat-count');\n\n // on click, increment the current cat's counter\n this.catImageElem.addEventListener('click', function(){\n octopus.incrementCounter();\n });\n\n // render this view (update the DOM elements with the right values)\n this.render();\n },\n\n render: function() {\n // update the DOM elements with values from the current cat\n var currentCat = octopus.getCurrentCat();\n this.countElem.textContent = currentCat.clickCount;\n this.catNameElem.textContent = currentCat.name;\n this.catImageElem.src = currentCat.imgSrc;\n }\n};\n\nvar catListView = {\n\n init: function() {\n // store the DOM element for easy access later\n this.catListElem = document.getElementById('cat-list');\n\n // render this view (update the DOM elements with the right values)\n this.render();\n },\n\n render: function() {\n var cat, elem, i;\n // get the cats we'll be rendering from the octopus\n var cats = octopus.getCats();\n\n // empty the cat list\n this.catListElem.innerHTML = '';\n\n // loop over the cats\n for (i = 0; i < cats.length; i++) {\n // this is the cat we're currently looping over\n cat = cats[i];\n\n // make a new cat list item and set its text\n elem = document.createElement('li');\n elem.textContent = cat.name;\n\n // on click, setCurrentCat and render the catView\n // (this uses our closure-in-a-loop trick to connect the value\n // of the cat variable to the click event function)\n elem.addEventListener('click', (function(catCopy) {\n return function() {\n octopus.setCurrentCat(catCopy);\n catView.render();\n };\n })(cat));\n\n // finally, add the element to the list\n this.catListElem.appendChild(elem);\n }\n }\n};\n\n// make it go!\noctopus.init();\n" } ]