{"id":220,"date":"2026-01-09T20:26:54","date_gmt":"2026-01-09T20:26:54","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/h_francois\/?p=220"},"modified":"2026-01-09T20:26:54","modified_gmt":"2026-01-09T20:26:54","slug":"friday-1-9-2026","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/h_francois\/2026\/01\/09\/friday-1-9-2026\/","title":{"rendered":"friday 1\/9\/2026"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-contrast-color has-text-color has-link-color wp-elements-a08d8503077e2c3f2eae819c26bdbdad has-global-padding is-layout-constrained wp-container-core-group-is-layout-23b1a4dc wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-b585a4aa wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-layout-flex wp-container-core-group-is-layout-7a92790e wp-block-group-is-layout-flex\"><div class=\"is-default-size wp-block-site-logo\"><a href=\"https:\/\/theroyalscode.com\/students\/h_francois\/\" class=\"custom-logo-link\" rel=\"home\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"200\" src=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2023\/12\/cropped-F-removebg-preview.png\" class=\"custom-logo\" alt=\"Rookie Programmer\" srcset=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2023\/12\/cropped-F-removebg-preview.png 280w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2023\/12\/cropped-F-removebg-preview-158x113.png 158w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/a><\/div>\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-30a70405 wp-block-group-is-layout-flex\"><h1 class=\"has-link-color wp-elements-d6202aa7d337f2ce08aedc8ed261a84e wp-block-site-title\"><a href=\"https:\/\/theroyalscode.com\/students\/h_francois\" target=\"_self\" rel=\"home\">Rookie Programmer<\/a><\/h1>\n\n<\/div>\n<\/div>\n\n\n<nav class=\"has-small-font-size is-responsive items-justified-right wp-block-navigation is-content-justification-right is-layout-flex wp-container-core-navigation-is-layout-f665d2b5 wp-block-navigation-is-layout-flex\" aria-label=\"Navigation\" \n\t\t data-wp-interactive=\"core\/navigation\" data-wp-context='{\"overlayOpenedBy\":{\"click\":false,\"hover\":false,\"focus\":false},\"type\":\"overlay\",\"roleAttribute\":\"\",\"ariaLabel\":\"Menu\"}'><button aria-haspopup=\"dialog\" aria-label=\"Open menu\" class=\"wp-block-navigation__responsive-container-open\" \n\t\t\t\tdata-wp-on--click=\"actions.openMenuOnClick\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t><svg width=\"24\" height=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 7.5h16v1.5H4z\"><\/path><path d=\"M4 15h16v1.5H4z\"><\/path><\/svg><\/button>\n\t\t\t\t<div class=\"wp-block-navigation__responsive-container\"  id=\"modal-1\" \n\t\t\t\tdata-wp-class--has-modal-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-class--is-menu-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-watch=\"callbacks.initMenu\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t\tdata-wp-on--focusout=\"actions.handleMenuFocusout\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t>\n\t\t\t\t\t<div class=\"wp-block-navigation__responsive-close\" tabindex=\"-1\">\n\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-dialog\" \n\t\t\t\tdata-wp-bind--aria-modal=\"state.ariaModal\"\n\t\t\t\tdata-wp-bind--aria-label=\"state.ariaLabel\"\n\t\t\t\tdata-wp-bind--role=\"state.roleAttribute\"\n\t\t\t>\n\t\t\t\t\t\t\t<button aria-label=\"Close menu\" class=\"wp-block-navigation__responsive-container-close\" \n\t\t\t\tdata-wp-on--click=\"actions.closeMenuOnClick\"\n\t\t\t><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z\"><\/path><\/svg><\/button>\n\t\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-container-content\" \n\t\t\t\tdata-wp-watch=\"callbacks.focusFirstElement\"\n\t\t\t id=\"modal-1-content\">\n\t\t\t\t\t\t\t\t<ul class=\"wp-block-navigation__container has-small-font-size is-responsive items-justified-right wp-block-navigation has-small-font-size\"><li class=\"has-small-font-size wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/theroyalscode.com\/students\/h_francois\/author\/hfrancois\/\"><span class=\"wp-block-navigation-item__label\">blog<\/span><\/a><\/li><\/ul>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/nav><\/div>\n<\/div>\n\n\n\n<p>today for my first project i worked on building an accessible audio controller very small project that took about 10 minutes i used spans and input elements nested in a div element i also added id&#8217;s to the span elements and type, min, max, and value attributes on the input element i will add pictures below.  <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"952\" height=\"568\" src=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/01\/4.png\" alt=\"\" class=\"wp-image-221\" srcset=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/01\/4.png 952w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/01\/4-300x179.png 300w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/01\/4-768x458.png 768w\" sizes=\"auto, (max-width: 952px) 100vw, 952px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"954\" height=\"564\" src=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/01\/5.png\" alt=\"\" class=\"wp-image-222\" srcset=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/01\/5.png 954w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/01\/5-300x177.png 300w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/01\/5-768x454.png 768w\" sizes=\"auto, (max-width: 954px) 100vw, 954px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"953\" height=\"565\" src=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/01\/6.png\" alt=\"\" class=\"wp-image-223\" srcset=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/01\/6.png 953w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/01\/6-300x178.png 300w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/01\/6-768x455.png 768w\" sizes=\"auto, (max-width: 953px) 100vw, 953px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;button type=\"button\">Play&lt;\/button><\/code><\/pre>\n\n\n\n<p>button element i forgot to add in description above also added a type attribute to this.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"range\" min=\"0\" max=\"100\" value=\"50\"\n           aria-labelledby=\"volume-label volume-description\"><\/code><\/pre>\n\n\n\n<p>also added range, value, aria-labelledby attributes to this input element.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>today for my first project i worked on building an accessible audio controller very small project that took about 10 minutes i used spans and input elements nested in a div element i also added id&#8217;s to the span elements and type, min, max, and value attributes on the input element i will add pictures [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-220","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/comments?post=220"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/220\/revisions"}],"predecessor-version":[{"id":224,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/220\/revisions\/224"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/media?parent=220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/categories?post=220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/tags?post=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}