{"id":2036,"date":"2022-10-15T17:30:00","date_gmt":"2022-10-15T14:30:00","guid":{"rendered":"https:\/\/jenniina.fi\/?p=2036"},"modified":"2023-03-27T10:14:37","modified_gmt":"2023-03-27T07:14:37","slug":"dogs","status":"publish","type":"post","link":"https:\/\/jenniina.fi\/finnish\/dogs\/","title":{"rendered":"Accessible Random Dog Generator in JavaScript"},"content":{"rendered":"<section class=\"wp-block-group alignfull is-style-no-margin-vertical shadow-under-nav has-palette-2-color has-palette-1-background-color has-text-color has-background\" style=\"padding-bottom:100px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\"><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Etusivu<\/span><\/p><\/nav>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:80%\">\n<h1 class=\"has-text-align-center wp-block-heading\" id=\"dogs\">Random Dog Generator in JavaScript<\/h1>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"align-horizontal-wrap alignright size-thumbnail\"><img decoding=\"async\" width=\"480\" height=\"320\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/sheltie-pomeranian-rylie-480x320.jpg\" alt=\"random dog generator image: sheltie-pomeranian Rylie\" class=\"wp-image-3207 lazyload\" data-srcset=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/sheltie-pomeranian-rylie-480x320.jpg 480w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/sheltie-pomeranian-rylie-640x427.jpg 640w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/sheltie-pomeranian-rylie-18x12.jpg 18w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/sheltie-pomeranian-rylie-680x453.jpg 680w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/10\/sheltie-pomeranian-rylie.jpg 768w\" data-sizes=\"(max-width: 480px) 100vw, 480px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 480px; --smush-placeholder-aspect-ratio: 480\/320;\" \/><figcaption class=\"wp-element-caption\">One of the images on the random dog generator<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Connecting to the <a title=\"\" href=\"https:\/\/dog.ceo\/dog-api\/\" rel=\"nofollow noopener\">dog.ceo<\/a> API to get random dog pictures sorted by breed. Idea from a <a title=\"\" href=\"https:\/\/medium.com\/swlh\/dog-app-using-javascript-with-an-api-72d944af6773\" rel=\"nofollow noopener\">tutorial<\/a>.  My additions are a button to cycle through the current category, named dynamically, and a link to the image in order make use of the lightbox. Additionally, I extracted the filename for the caption. <\/p>\n\n\n\n<p>The loading animation  is a simple @keyframes animation of transform: rotateZ(360deg) on a rounded element with a box-shadow and a border-radius of 50%, with an absolutely positioned ::after-pseudoelement as the dot. <\/p>\n\n\n\n<p>Also made a custom select dropdown for the random dog generator <a title=\"\" href=\"https:\/\/github.com\/WebDevSimplified\/custom-select-dropdown\" rel=\"nofollow noopener\">based on this code<\/a>, but heavily edited to add the same functionality as the regular breed select box, and to be more accessible with suitable ARIA attributes. Tested with NVDA screen reader. The custom dropdown fetches the information dynamically from the existing select and its label. It has a blue border similar to the button. You may try refreshing the browser if it is not showing up; it works in browsers that support modules, but does have a no-module fallback. <\/p>\n\n\n\n<p>Edited the code to also include the nested breed types (i.e. &#8220;afghan&#8221; in category &#8220;hound&#8221;) if there were more than one. <\/p>\n\n\n\n<div class=\"dogcontainer selection\">\n<label for=\"breedsselect\" data-selectlabel=\"affenpinscher\">Valitse koirarotu <\/label>\n<select name=\"dog breeds\" id=\"breedsselect\" data-select=\"affenpinscher\" class=\"breeds\"><\/select>\n<button class=\"moredogs\">hae uusi affenpinscher<\/button>\n<\/div>\n<div class=\"dogcontainer dogs\">\n   <div class=\"loading\"><\/div>\n<figure><a class=\"doggress\" href=\"https:\/\/images.dog.ceo\/breeds\/affenpinscher\/n02110627_3246.jpg\" rel=\"nofollow noopener\">\n          <img decoding=\"async\" height=\"400px\" width=\"auto\" data-src=\"https:\/\/images.dog.ceo\/breeds\/affenpinscher\/n02110627_3246.jpg\" class=\"dog-img show lazyload\" alt=\"Dog, mankind's best friend\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\"><\/a>\n<figcaption class=\"dogcaption\">affenpinscher<\/figcaption>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div><\/section>\n\n\n\n<section class=\"wp-block-group alignfull topclip bottomclip is-style-no-margin-vertical has-palette-2-color has-palette-3-background-color has-text-color has-background\" style=\"padding-top:120px;padding-bottom:120px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\">\n<h2 class=\"wp-block-heading\">Code for the random dog generator fetch API<\/h2>\n\n\n\n<p>Making the regular select box contents for the no-module fallback:<\/p>\n\n\n<div class=\"alignwide-wrap\" data-block=\"embed\">\n<figure class=\"wp-block-embed alignwide is-type-wp-embed is-provider-codepen wp-block-embed-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe class=\"wp-embedded-content lazyload\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Random dog breed generator\" data-src=\"https:\/\/codepen.io\/Jenniina\/embed\/preview\/KKezEjr?default-tabs=js%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=KKezEjr#?secret=jWXFS62tJx\" data-secret=\"jWXFS62tJx\" scrolling=\"no\" frameborder=\"0\" height=\"300\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>See also my accessible <a href=\"https:\/\/jenniina.fi\/finnish\/draggable-blobs\/\" data-type=\"post\" data-id=\"3630\">draggable blobs app<\/a> ja <a href=\"https:\/\/jenniina.fi\/finnish\/pong\/\" data-type=\"post\" data-id=\"4243\">pong javascript game<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/section>","protected":false},"excerpt":{"rendered":"<div class=\"entry-summary\">\nConnecting to thedog.ceo API to get random dog pictures sorted by breed for a random dog generator.\n<\/div>\n<div class=\"link-more-container\"><a href=\"https:\/\/jenniina.fi\/finnish\/dogs\/\" class=\"link-more\" aria-label=\"Continue reading Accessible Random Dog Generator in JavaScript\">More &raquo;<\/a><\/div>","protected":false},"author":1,"featured_media":3207,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[6,9],"tags":[],"class_list":["post-2036","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","category-javascript","entry","entry-type-post"],"_links":{"self":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/2036","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/comments?post=2036"}],"version-history":[{"count":84,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/2036\/revisions"}],"predecessor-version":[{"id":5207,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/2036\/revisions\/5207"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/media\/3207"}],"wp:attachment":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/media?parent=2036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/categories?post=2036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/tags?post=2036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}