Cat clickerv4

Developer
Juan Carlos Jara
Size
2,751 Kb
Views
14,168
  1. Cat clickerv4 Previews
  2. Cat clickerv4 HTML Codes
  3. Cat clickerv4 JS Codes

How do I make an cat clickerv4?

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

Cat clickerv4 Previews
IQ Test

Cat clickerv4 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>cat clickerv4</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 clickerv4 - Script Codes JS Codes

var model = { cats: [], selection: null, add: function(data) { data.counter = 0; this.cats.push(data); }, getAll: function() { return this.cats; }, setSelected: function(idx) { this.selection = this.cats[idx]; }
}
var octopus = { init: function(data) { for (var i=0, len = data.length; i < len; i++) { model.add(data[i]); } listView.init(); displayView.init(); }, getCats: function() { return model.getAll(); }, selected: function(idx) { model.setSelected(idx); displayView.render(); }, getSelected: function() { return model.selection; }, clicked: function() { model.selection.counter++; displayView.render(); }
}
var displayView = { init: function() { this.name = document.getElementById('name'); this.picture = document.getElementById('picture'); this.counter = document.getElementById('counter'); this.picture.addEventListener('click', function(){ octopus.clicked(); }) }, render: function() { var data = octopus.getSelected(); if (data) { this.name.textContent = data.name; this.picture.src = data.url;	this.counter.textContent = data.counter; } }
}
var listView = { init: function() { this.list = document.getElementById('list'); this.list.addEventListener('click', function(e) { octopus.selected(e.target.dataset.id); }) this.render(); }, render: function() { this.list.innerHTML = ''; var cats = octopus.getCats(); 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)); this.list.appendChild(entry); } }
}
var cats = [ { name: 'cat1', url: '//lh3.ggpht.com/nlI91wYNCrjjNy5f-S3CmVehIBM4cprx-JFWOztLk7vFlhYuFR6YnxcT446AvxYg4Ab7M1Fy0twaOCWYcUk=s0#w=640&h=426', }, { name: 'cat2', url: '//lh3.ggpht.com/kixazxoJ2ufl3ACj2I85Xsy-Rfog97BM75ZiLaX02KgeYramAEqlEHqPC3rKqdQj4C1VFnXXryadFs1J9A=s0#w=640&h=496', }, { name: 'cat3', url: '//lh5.ggpht.com/LfjkdmOKkGLvCt-VuRlWGjAjXqTBrPjRsokTNKBtCh8IFPRetGaXIpTQGE2e7ZCUaG2azKNkz38KkbM_emA=s0#w=640&h=454', }, { name: 'cat4', url: '//lh3.ggpht.com/nlI91wYNCrjjNy5f-S3CmVehIBM4cprx-JFWOztLk7vFlhYuFR6YnxcT446AvxYg4Ab7M1Fy0twaOCWYcUk=s0#w=640&h=426', }, { name: 'cat5', url: '//lh3.ggpht.com/kixazxoJ2ufl3ACj2I85Xsy-Rfog97BM75ZiLaX02KgeYramAEqlEHqPC3rKqdQj4C1VFnXXryadFs1J9A=s0#w=640&h=496', }
];
octopus.init(cats);
/*
var Cat = function(name, src) { this.name = name; this.imgSrc = src; this.counter = 0;
}
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 clickerv4 - Script Codes
Cat clickerv4 - Script Codes
Home Page Home
Developer Juan Carlos Jara
Username juancjara
Uploaded September 15, 2022
Rating 3
Size 2,751 Kb
Views 14,168
Do you need developer help for Cat clickerv4?

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
Json to survey
Test css hide
Cat clickerv5
Vue2 playground
Cat clickerv1
Cat clickerv2
Cat clickerv3
TreeHouse sticky Header
A Pen by Juan Carlos Jara
Create amazing art & images 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!