{"id":79,"date":"2026-02-20T15:09:05","date_gmt":"2026-02-20T15:09:05","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/a_alhallak\/?p=79"},"modified":"2026-02-20T15:09:05","modified_gmt":"2026-02-20T15:09:05","slug":"free-friday-2-20-2026","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/a_alhallak\/2026\/02\/20\/free-friday-2-20-2026\/","title":{"rendered":"Free Friday 2\/20\/2026"},"content":{"rendered":"\n<p>I&#8217;ve worked on the Assignment for making a website. the plan is to make three pages, one where people can rank whatever pictures they have, one where they can view my own rankings, and one that will mostly be just the &#8220;Popular&#8221; ranking, I&#8217;ll get there later<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"679\" src=\"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-content\/uploads\/2026\/02\/image-2-1024x679.png\" alt=\"\" class=\"wp-image-80\" srcset=\"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-content\/uploads\/2026\/02\/image-2-1024x679.png 1024w, https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-content\/uploads\/2026\/02\/image-2-300x199.png 300w, https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-content\/uploads\/2026\/02\/image-2-768x510.png 768w, https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-content\/uploads\/2026\/02\/image-2.png 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>So far, I have the buttons, all working. a footer with a random copyright because I see it a lot. That&#8217;s just for Index.html, the main page<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"686\" src=\"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-content\/uploads\/2026\/02\/image-3-1024x686.png\" alt=\"\" class=\"wp-image-81\" srcset=\"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-content\/uploads\/2026\/02\/image-3-1024x686.png 1024w, https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-content\/uploads\/2026\/02\/image-3-300x201.png 300w, https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-content\/uploads\/2026\/02\/image-3-768x515.png 768w, https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-content\/uploads\/2026\/02\/image-3.png 1410w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Above is page1, or&#8230; the area people rank in. as you see, there is a &#8220;Back to Home&#8221; button that actually works and takes you to index.html. And you can paste the URL of images anywhere on the tier list thing. you can also press the little X mark to remove and replace.<\/p>\n\n\n\n<p>the grid made me suffer and that&#8217;s where I needed Copilot. JavaScript was really needed to do everything, so I also needed copilot for it. but it looks simple.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"285\" height=\"188\" src=\"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-content\/uploads\/2026\/02\/image-4.png\" alt=\"\" class=\"wp-image-82\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>document.querySelectorAll(\".url-input\").forEach(input => {\n    input.addEventListener(\"change\", () => {\n        const url = input.value.trim();\n        if (url === \"\") return;\n\n        const box = input.parentElement;\n        const img = document.createElement(\"img\");\n        img.src = url;\n\n        img.onload = () => {\n            box.innerHTML = \"\"; \/\/ remove input\n            box.appendChild(img);\n\n            \/\/ create remove button\n            const removeBtn = document.createElement(\"button\");\n            removeBtn.className = \"remove-btn\";\n            removeBtn.textContent = \"\u00d7\";\n            box.appendChild(removeBtn);\n\n            removeBtn.addEventListener(\"click\", () => {\n                box.innerHTML = \"\"; \/\/ clear image + button\n\n                \/\/ restore input\n                const newInput = document.createElement(\"input\");\n                newInput.type = \"text\";\n                newInput.placeholder = \"Paste image URL\";\n                newInput.className = \"url-input\";\n                box.appendChild(newInput);\n\n                \/\/ reattach the same behavior\n                newInput.addEventListener(\"change\", () => {\n                    input.dispatchEvent(new Event(\"change\"));\n                });\n            });\n        };\n\n        img.onerror = () => {\n            alert(\"Invalid image URL\");\n        };\n    });\n});\n<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve worked on the Assignment for making a website. the plan is to make three pages, one where people can [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-79","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/posts\/79","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/posts\/79\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/posts\/79\/revisions\/83"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/media?parent=79"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/categories?post=79"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/tags?post=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}