{"id":18514118,"url":"https://github.com/kooltheba/cat-clicker-kata","last_synced_at":"2025-05-14T13:10:34.106Z","repository":{"id":104892623,"uuid":"171267424","full_name":"KoolTheba/cat-clicker-kata","owner":"KoolTheba","description":"A cat clicker app for Node Girls Madrid event javascript intermediate kata","archived":false,"fork":false,"pushed_at":"2019-02-21T14:59:38.000Z","size":541,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-17T03:37:08.975Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KoolTheba.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-18T10:57:04.000Z","updated_at":"2019-02-21T14:59:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"b3c6e376-794d-4798-a4f8-b0670f67e31f","html_url":"https://github.com/KoolTheba/cat-clicker-kata","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoolTheba%2Fcat-clicker-kata","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoolTheba%2Fcat-clicker-kata/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoolTheba%2Fcat-clicker-kata/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoolTheba%2Fcat-clicker-kata/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KoolTheba","download_url":"https://codeload.github.com/KoolTheba/cat-clicker-kata/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149986,"owners_count":22022852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T15:42:02.366Z","updated_at":"2025-05-14T13:10:29.086Z","avatar_url":"https://github.com/KoolTheba.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Cat Clicker\n\n### Contexto \n\nEsta es la clásica aplicación llamada Cat Clicker!\n\n![screenshot](other/cat-clicker-screen-shot.png)\n\n### Cómo funciona\n\nSimplemente del menú elige el nombre de tu gato favorito para ver su foto y clicarla tantas veces cómo quieras! 🐱\n\n### Para trabajar el kata/requerimientos:\n\nHaremos un menú (dónde quieras en la pantalla), y partimos de una vista en la que sólo el menú (y quizá un título) se vea.\n\nCuando se clique en cualquier nombre de gato del menú, aparecerá (dónde quieras en la pantalla) la foto del gato, un título como por ejemplo \"Conoce al gato `{nombre.gato}`\" y un marcador del nº de clicados (mira screen-shot de la app como referencia). \n\nLos links los hemos cogido de [flickr.com](https://www.flickr.com/photos/poplinre/624194179/in/photostream/), elige las fotos de gatos que más te gusten!!\n\nEstilos: trabaja con la `font-family` que quieras; igual con los colores, tamaños, etc. Trata de hacer una aplicación `responsive`. Añade las `media queries` que consideres. \n\nPuedes trabajar en Codepen o en local con tus 3 archivos (HTML, CSS, script.js), elige la que más te guste!\nPreferimos evitar cualquier el uso de jQuery ;)\n\n### Referencias:\n\nTrabajaremos la manipulación del DOM, eventos/delegación de eventos y una función sencilla que hace que el contador aumente cada vez que clicamos la foto del gato y que vuelva a cero cuando el nombre del gato en el menú se vuelva a elegir.\n\n⚠️ Imp! Las mentoras de las Node Girls Madrid hemos elegido este ejercicio para que no solo trabajemos con el DOM y eventos, sino también el ser capaces de hacer una aplicación escalable, de tal manera que si nos pidieran añadir más gatos y fotos (urls), el código se modifique lo menos posible.\n\nQue este código que sirva sólo como referencia. Está refactorizado con ES6 y hemos usado dataset. Hay muchas formas de hacerlo, elige la tuya! \n\nSi quieres, puedes tratar de documentar la función que tendrás del contador. Mira los links que añadimos!!\n\n- [Atributos data](https://cybmeta.com/los-atributos-data-y-el-dataset-api)\n- [Delegación de eventos](https://ed.team/blog/como-usar-la-delegacion-de-eventos-en-javascript)\n- [ES6 by Carlos Azaustre](https://carlosazaustre.es/ecmascript6/)\n- [Js docs](http://usejsdoc.org/)\n\n#### Original features\n- ES6\n- Events and event delegation\n- Template string\n- Dataset attribute\n- Code documented with Js Docs\n- Everything follows the Udacity Js/HTML/CSS guidelines\n- External dependencies: Google fonts\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkooltheba%2Fcat-clicker-kata","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkooltheba%2Fcat-clicker-kata","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkooltheba%2Fcat-clicker-kata/lists"}