Cat clickerv3

Developer
Juan Carlos Jara
Size
2,401 Kb
Views
30,360
  1. Cat clickerv3 Previews
  2. Cat clickerv3 HTML Codes
  3. Cat clickerv3 JS Codes

How do I make an cat clickerv3?

What is a cat clickerv3? How do you make a cat clickerv3? This script and codes were developed by Juan Carlos Jara on 15 September 2022, Thursday.

Cat clickerv3 Previews
IQ Test

Cat clickerv3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>cat clickerv3</title>
</head>
<body>
<ul id="list"></ul>
<section> <h1 id="name"></h1><img id="picture"/> <div id="counter"></div>
</section> <script src="js/index.js"></script>
</body>
</html>

Cat clickerv3 - Script Codes JS Codes

var Cat = function(name, src) { this.name = name; this.imgSrc = src; this.counter = 0;	/*var elem = document.getElementById(img); elem.addEventListener('click', addCounter);	var label = document.getElementById(label); function addCounter() { label.innerHTML = counter++; }*/
}
Cat.prototype.update = function() { this.counter++; return this;
}
var App = function(cats, idUL) { var cats = cats; var list = document.getElementById(idUL); var selected = null; var section = { name: document.getElementById('name'), picture: document.getElementById('picture'), counter: document.getElementById('counter') } function showInfo(data) { section.name.innerHTML = data.name; section.picture.src = data.imgSrc; section.counter.innerHTML = data.counter; } function clicked() { showInfo(selected.update()); } function addEvents() { list.addEventListener('click', function(e) { selected = cats[e.target.dataset.id]; showInfo(selected); }) section.picture.addEventListener('click', function(){ clicked(); }); } function init() { for (var i = 0, len = cats.length; i < len; i++) {	var entry = document.createElement('li'); entry.dataset.id = i; entry.appendChild(document.createTextNode(cats[i].name)); list.appendChild(entry); } addEvents(); } return { init: init }
}
var cats = [ new Cat('cat1', '//lh3.ggpht.com/nlI91wYNCrjjNy5f-S3CmVehIBM4cprx-JFWOztLk7vFlhYuFR6YnxcT446AvxYg4Ab7M1Fy0twaOCWYcUk=s0#w=640&h=426'), new Cat('cat2', '//lh3.ggpht.com/kixazxoJ2ufl3ACj2I85Xsy-Rfog97BM75ZiLaX02KgeYramAEqlEHqPC3rKqdQj4C1VFnXXryadFs1J9A=s0#w=640&h=496'), new Cat('cat3', '//lh5.ggpht.com/LfjkdmOKkGLvCt-VuRlWGjAjXqTBrPjRsokTNKBtCh8IFPRetGaXIpTQGE2e7ZCUaG2azKNkz38KkbM_emA=s0#w=640&h=454'), new Cat('cat4', '//lh3.ggpht.com/nlI91wYNCrjjNy5f-S3CmVehIBM4cprx-JFWOztLk7vFlhYuFR6YnxcT446AvxYg4Ab7M1Fy0twaOCWYcUk=s0#w=640&h=426'), new Cat('cat5', '//lh3.ggpht.com/kixazxoJ2ufl3ACj2I85Xsy-Rfog97BM75ZiLaX02KgeYramAEqlEHqPC3rKqdQj4C1VFnXXryadFs1J9A=s0#w=640&h=496'),
];
var app = new App(cats, 'list')
app.init()
Cat clickerv3 - Script Codes
Cat clickerv3 - Script Codes
Home Page Home
Developer Juan Carlos Jara
Username juancjara
Uploaded September 15, 2022
Rating 3
Size 2,401 Kb
Views 30,360
Do you need developer help for Cat clickerv3?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Juan Carlos Jara (juancjara) Script Codes
Name
TreeHouse sticky Header
Test css hide
Cat clickerv2
Vue2 playground
Json to survey
Cat clickerv1
A Pen by Juan Carlos Jara
Cat clickerv4
Cat clickerv5
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!