{"id":76,"date":"2026-02-13T16:06:31","date_gmt":"2026-02-13T16:06:31","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/a_alhallak\/?p=76"},"modified":"2026-02-13T16:06:31","modified_gmt":"2026-02-13T16:06:31","slug":"free-friday-2-13-2026","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/a_alhallak\/2026\/02\/13\/free-friday-2-13-2026\/","title":{"rendered":"Free Friday 2\/13\/2026"},"content":{"rendered":"\n

Currently Working on a pixel art website from last free friday:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

So far this is all I have- used ASMR Programming – 100 Days of JavaScript Coding – No Talking<\/a> to do this. <\/p>\n\n\n\n

Style.css:<\/p>\n\n\n\n

*{\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n    font-family: monospace;\n}\n\nbody{\n    background-color: chocolate;\n}\n\n.wrapper{\n    background-color: blanchedalmond;\n    width: 80vmin;\n    position: absolute;\n    transform: translate(-50%, -50%);\n    top: 50%;\n    left: 50%;\n    padding: 40px 20px;\n    border-radius: 8px;\n}\n\nlabel{\n    display: block;\n}\n\nspan{\n    position: relative;\n    font-size: 22px;\n    bottom: -1px;\n}\n\n.opt-wrapper{\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: 20px;\n    gap: 10px;\n}\n\nbutton{\n    background-color: darkgoldenrod;\n    border: none;\n    border-radius: 5px;\n    padding: 5px;\n    color: #fff;\n}\n\ninput[type=\"color\"]{\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    background-color: transparent;\n    width: 70px;\n    height: 40px;\n    border: none;\n    cursor: pointer;\n}\n\ninput[type=\"color\"]::-webkit-color-swatch{\n    border-radius: 8px;\n    border: 4px solid black;\n}\ninput[type=\"color\"]::-moz-color-swatch{\n    border-radius: 8px;\n    border: 4px solid black;\n}\n\n.gridCol{\n    height: 1em;\n    width: 1em;\n    border: 1px soldid #ddd;\n}\n\n.gridrow{\n    display: flex;\n}\n\n@media only screen and (max-width:768px){\n    .gridCol{\n        height: 0.8em;\n        width: 0.8em;\n    }\n}\n<\/code><\/pre>\n\n\n\n
index.html:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"style.css\">\n    <title>Pexil Art generator<\/title>\n<\/head>\n\n<body>\n\n\n    <div class=\"wrapper\">\n    <div class=\"options\">\n        <div class=\"opt-wrapper\">\n        <div class=\"slider\">\n            <label for=\"width-range\">Grid Width<\/label>\n            <input type=\"range\" id=\"width-range\" min=\"1\" max=\"1\">\n            <span id=\"width-value\">00<\/span>\n        <\/div>\n                <div class=\"slider\">\n                    <label for=\"height-range\">Grid Height<\/label>\n                    <input type=\"range\" id=\"height-range\" min=\"1\" max=\"1\">\n                    <span id=\"height-value\">00<\/span>\n                <\/div>\n            <\/div>\n\n                <div class=\"opt-wrapper\">\n                    <button id=\"submit-grid\">Create Grid<\/button>\n                    <button id=\"clear-grid\">Clear Grid<\/button>\n                    <input type=\"color\" id=\"color-input\">\n                    <button id=\"erase-btn\">Erase<\/button>\n                    <button id=\"pa-btn\">\"Paint\"<\/button>\n                <\/div>\n        <\/div>\n        <div class=\"container\"><\/div>\n    <\/div>\n\n\n    <script src=\"index.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
that html really only sets things up for the css and js to work on everything else.<\/p>\n\n\n\n
Js: to be honest I have no idea what most of these do, im guessing that “let” is like “def” in python<\/p>\n\n\n\n
(not complete)<\/p>\n\n\n\n
let container = document.querySelector(\".container\");\nlet gridButton = document.getElementById(\"submit-grid\");\nlet clearGridButton = document.getElementById(\"clear-grid\");\nlet gridWidth = document.getElementById(\"width-range\");\nlet gridHeight = document.getElementById(\"height-range\");\nlet colorButton = document.getElementById(\"color-input\");\nlet eraseBtn = document.getElementById(\"erase-btn\");\nlet paintBtn = document.getElementById(\"paint-btn\");\nlet widthValue = document.getElementById(\"width-value\");\nlet heightValue = document.getElementById(\"height-value\");\n\nlet events = {\n    mouse: {\n        down: \"mousedown\",\n        move: \"mousemove\",\n        up: \"mouseup\"\n    },\n    touch:{\n        down:\"touchstart\",\n        move: \"touchmove\",\n        up: \"touchend\",\n    },\n};\n\nlet deviceType = \"\";\n\nlet draw = false;\nlet erase = false;\n\nconst isTouchDevice = () =>{\n    try{\n        document.createEvent(\"TouchEvent\");\n        deviceType = \"touch\"\n        return true;\n    } catch(e) {\n        devideType = \"mouse\";\n        return false;\n    }\n};\n\nisTouchDevice();<\/code><\/pre>\n\n\n\n
I may work on it again next Friday to finalize it, or just pick a different project to work on.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Currently Working on a pixel art website from last free friday: So far this is all I have- used ASMR […]<\/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-76","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/posts\/76","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=76"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/posts\/76\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/posts\/76\/revisions\/78"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/media?parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/categories?post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_alhallak\/wp-json\/wp\/v2\/tags?post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}