{"id":25969143,"url":"https://github.com/diraneyya/quest-adopt-a-cat","last_synced_at":"2026-03-08T01:32:49.539Z","repository":{"id":135933308,"uuid":"599593273","full_name":"diraneyya/quest-adopt-a-cat","owner":"diraneyya","description":"An odyssey quest called \"adopt the cat\" (quest number 1343)","archived":false,"fork":false,"pushed_at":"2023-02-09T13:24:55.000Z","size":2,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-16T17:32:15.444Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/diraneyya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-02-09T13:24:15.000Z","updated_at":"2023-02-09T13:24:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"59344ff5-4dfe-4520-9bfd-df5b171b5ae0","html_url":"https://github.com/diraneyya/quest-adopt-a-cat","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/diraneyya/quest-adopt-a-cat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diraneyya%2Fquest-adopt-a-cat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diraneyya%2Fquest-adopt-a-cat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diraneyya%2Fquest-adopt-a-cat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diraneyya%2Fquest-adopt-a-cat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diraneyya","download_url":"https://codeload.github.com/diraneyya/quest-adopt-a-cat/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diraneyya%2Fquest-adopt-a-cat/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30240897,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T00:58:18.660Z","status":"ssl_error","status_checked_at":"2026-03-08T00:55:48.608Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2025-03-04T22:40:28.135Z","updated_at":"2026-03-08T01:32:49.512Z","avatar_url":"https://github.com/diraneyya.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"Odyssey question number 1343\n\n# Introduction Challenge\n\n###### ⚠️ Before starting this exercise, you must have finished some of the JavaScript quests\n\n```quests\n1262,1267,1268,1269, 1270, 1278, 1281, 1283, 1282, 1259\n```\n\n# 💪 Challenge\n\nWe are going to create a small website for cat adoption.\n\nWith dom manipulation, we can create easily some HTML elements without having to recreate them over and over.\n\nIn this exercise, you will see how we can generate cards from an array of objects easily.\n\nIn the following codesandbox, you will find a JavaScript file called `index.js` in this JavaScript file, you will find an array with a list of cats to adopt:\n\n```javascript\nconst animalsToAdopt = [\n  {\n    name: \"Lucky\",\n    picture: \"https://placekitten.com/200/287\"\n  },\n  {\n    name: \"Symba\",\n    picture: \"https://placekitten.com/200/139\"\n  },\n  {\n    name: \"Léo\",\n    picture: \"https://placekitten.com/200/90\"\n  },\n  {\n    name: \"Milo\",\n    picture: \"https://placekitten.com/200/194\"\n  },\n  {\n    name: \"Charly\",\n    picture: \"https://placekitten.com/200/179\"\n  }\n];\n```\n\nOur goal here is to create one card for each animal. \nThat way, if we want to add a new animal to the list, we will simply have to add a new object in the array. \n \nFor that, we need a function, because we don't want to run the same code over and over. To make this exercise more simple, we already created the function for you.\n\n```javascript\nfunction createCard(title, imageUrl) {\n}\n```\n\nEach card will have a different `title` and a different `imageUrl`. \n\nTo create new DOM elements, we have to use `document.createElement()`. We add a couple of example on how to proceed.\n\n```javascript\nconst card = document.createElement(\"div\");\ncard.classList.add(\"card\");\ncards.appendChild(card);\n```\n\n\nYou have to create the element, then add the right class, and finally, add the element to its parent. \n\nLook at the example, and create the missing elements:\n\n- cardBody: a div with the class `card-body` added to `card`\n- cardTitle: a h2 with the class `card-title`, change the innerHTML with the `title` argument and add it to the `cardBody`\n- cardButton: a button with the class `card-button`, the InnerHTML \"Adopt Now\" and add it to the `cardBody`\n\nOnce you've finished, now, create a for loop, that goes through the `animalsToAdopt` array and create one card for every element of the array.\n\n```codesandbox\nhttps://codesandbox.io/s/exercise-dom-forked-0vebn\n```\n\n# 🧐 Acceptance criteria\n\n* [ ] The card contains all elements\n* [ ] There is one card for each array element\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiraneyya%2Fquest-adopt-a-cat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiraneyya%2Fquest-adopt-a-cat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiraneyya%2Fquest-adopt-a-cat/lists"}