{"id":189,"date":"2026-02-26T17:30:57","date_gmt":"2026-02-26T17:30:57","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/a_carpenter\/?p=189"},"modified":"2026-02-26T17:30:57","modified_gmt":"2026-02-26T17:30:57","slug":"2-26-2026-web-development-for-past-two-weeks","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/a_carpenter\/2026\/02\/26\/2-26-2026-web-development-for-past-two-weeks\/","title":{"rendered":"2\/26\/2026, Web Development For Past Two Weeks"},"content":{"rendered":"\n

Introductions for the weeks of 2\/9\/26 – 2\/13\/26 and 2\/16\/26 – 2\/20\/26<\/h3>\n\n\n\n

My most recent project has been relearning HTML\/CSS and JS in time for the SkillsUSA PA state web development competitions. To prepare, I have been making a pseudo-clone of the PBIS rewards student portal. <\/p>\n\n\n\n

Html:<\/h3>\n\n\n\n

I have made the html code to make three pages of the website, though one page is largely underdeveloped. The code is for the Home, Store, and Points pages.<\/p>\n\n\n\n

Home (index.html):<\/h4>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"styles.css\">\n    <title>SBIS Rewards<\/title>\n<\/head>\n<body>\n    <h1 class=\"header dark\">SBIS<\/h1>\n    <button class=\"viewmode dark darkbutton\" id=\"viewmodebutton\">VIEWMODEPLACEHOLDER<\/button>\n    <div class=\"portal dark\">Shrudent portal<\/div>\n    <div class=\"sidebar dark\">\n        <ul>\n            <a rel=\"link\" href=\"\/index.html\" class=\"sidebaritem\">Shrome<\/a>\n        <\/ul>\n        <ul>\n            <a rel=\"link\" href=\"\/points.html\" class=\"sidebaritem\">Shroints<\/a>\n        <\/ul>\n        <ul>\n            <a rel=\"link\" href=\"\/stores.html\" class=\"sidebaritem\">Shrores<\/a>\n        <\/ul>    \n    <\/div>\n    <div class=\"container dark\">\n        <a href=\"index.html\">\n            <div class=\"card darkcard\">\n                <img src=\"shrek1.jpg\" alt=\"shrek with white powder on face\" class=\"cardimg\">\n                <p class=\"cardtext\">Shrek is a cocaine addict^ (home)<\/p>\n            <\/div>\n        <\/a>\n        <a href=\"points.html\">\n            <div class=\"card darkcard\">\n                <img src=\"shrek2.jpg\" alt=\"shrek and donkey\" class=\"cardimg\">\n                <p class=\"cardtext\">Shrek is also zoophile^ (points)<\/p>\n            <\/div>\n        <\/a>\n        <a href=\"stores.html\">\n            <div class=\"card darkcard\">\n                <img src=\"shrekshirt.jpg\" alt=\"shrek\" class=\"cardimg\">\n                <p class=\"cardtext\">Shrek is shirt^ (stores)<\/p>\n            <\/div>\n        <\/a>\n\n\n    <\/div>\n<script src=\"app.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Points (points.html [Hugely Underdeveloped]):<\/h4>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"styles.css\">\n    <title>SBIS Rewards<\/title>\n<\/head>\n<body>\n    <h1 class=\"header\">SBIS<\/h1>\n    <button class=\"viewmode dark\" id=\"viewmodebutton\">VIEWMODEPLACEHOLDER<\/button>\n    <div class=\"portal dark\">SHROINTS<\/div>\n        <div class=\"sidebar dark\">\n        <ul>\n            <a rel=\"stylesheet\" href=\"\/index.html\" class=\"sidebaritem\">Shrome<\/a>\n        <\/ul>\n        <ul>\n            <a rel=\"stylesheet\" href=\"\/points.html\" class=\"sidebaritem\">Shroints<\/a>\n        <\/ul>\n        <ul>\n            <a rel=\"stylesheet\" href=\"\/stores.html\" class=\"sidebaritem\">Shrores<\/a>\n        <\/ul>    \n    <\/div>\n    <div class=\"container dark\">\n        <div class=\"card darkcard\" id=\"pointsheader\">\n            <img src=\"pointstar.jpg\" alt=\"green star\" class=\"cardimg\">\n            <p class=\"cardtext\"><\/div>\n        <\/div>\n    <\/div>\n<script src=\"app.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Store (stores.html):<\/h4>\n\n\n\n
<!DOCTYPE html><\/p>\n\n\n\n
<html lang=”en”><\/p>\n\n\n\n
<head><\/p>\n\n\n\n
    <meta charset=”UTF-8″><\/p>\n\n\n\n
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″><\/p>\n\n\n\n
    <link rel=”stylesheet” href=”styles.css”><\/p>\n\n\n\n
    <title>SBIS Rewards<\/title><\/p>\n\n\n\n
<\/head><\/p>\n\n\n\n
<body><\/p>\n\n\n\n
    <h1 class=”header”>SBIS<\/h1><\/p>\n\n\n\n
    <button class=”viewmode dark” id=”viewmodebutton”>VIEWMODEPLACEHOLDER<\/button><\/p>\n\n\n\n
    <div class=”portal dark”>Shrores<\/div><\/p>\n\n\n\n
    <div class=”sidebar dark”><\/p>\n\n\n\n
        <ul><\/p>\n\n\n\n
            <a rel=”stylesheet” href=”\/index.html” class=”sidebaritem”>Shrome<\/a><\/p>\n\n\n\n
        <\/ul><\/p>\n\n\n\n
        <ul><\/p>\n\n\n\n
            <a rel=”stylesheet” href=”\/points.html” class=”sidebaritem”>Shroints<\/a><\/p>\n\n\n\n
        <\/ul><\/p>\n\n\n\n
        <ul><\/p>\n\n\n\n
            <a rel=”stylesheet” href=”\/stores.html” class=”sidebaritem”>Shrores<\/a><\/p>\n\n\n\n
        <\/ul>    <\/p>\n\n\n\n
    <\/div><\/p>\n\n\n\n
        <div class=”container dark”><\/p>\n\n\n\n
            <div class=”card darkcard”><\/p>\n\n\n\n
                <img src=”nightmarefuel.jpg” alt=”Ugly Shrek Toy” class=”cardimg”><\/p>\n\n\n\n
                <p class=”cardtext”>Shrek “Kill me” toy<\/p><\/p>\n\n\n\n
                <p class=”rewardprice”>100 shroint<\/p><\/p>\n\n\n\n
            <\/div><\/p>\n\n\n\n
            <div class=”card darkcard”><\/p>\n\n\n\n
                <img src=”shrekanddonkey.jpg” alt=”shrek and donkey plush” class=”cardimg”><\/p>\n\n\n\n
                <p class=”cardtext”>Shrek plushie<\/p><\/p>\n\n\n\n
                <p class=”rewardprice”>1000 shroint<\/p><\/p>\n\n\n\n
            <\/div><\/p>\n\n\n\n
            <div class=”card darkcard”><\/p>\n\n\n\n
                <img src=”shrekcupcake.jpg” alt=”shrek cake” class=”cardimg” id=”img3″><\/p>\n\n\n\n
                <p class=”cardtext”>Shrek Cupcake<\/p><\/p>\n\n\n\n
                <p class=”rewardprice”>50 shroint<\/p><\/p>\n\n\n\n
            <\/div><\/p>\n\n\n\n
            <div class=”card darkcard”><\/p>\n\n\n\n
                <img src=”uglyshrekbabies.jpg” alt=”Ugly Shrek Babies” class=”cardimg”><\/p>\n\n\n\n
                <p class=”cardtext”>Shrek Babies toys<\/p><\/p>\n\n\n\n
                <p class=”rewardprice”>10,000,000 shroint<\/p><\/p>\n\n\n\n
            <\/div><\/p>\n\n\n\n
        <\/div><\/p>\n\n\n\n
<script src=”app.js”><\/script><\/p>\n\n\n\n
<\/body><\/p>\n\n\n\n
<\/html><\/p>\n\n\n\n
CSS:<\/h3>\n\n\n\n
The CSS for the website does such wondrous things as hover effects, proper sizing and spacing of various elements, and other stylization to make the website more visually appealing across all html pages.<\/p>\n\n\n\n
*{\n    margin: 0;\n    padding: 0;\n}\nbody{\n    background-color: rgb(75,75,75);\n    display: grid;\n    grid-template-areas: \n    \"header header header header viewmode\"\n    \"sidebar portal portal portal portal\"\n    \"sidebar cards cards cards cards\"\n    \"sidebar footer footer footer footer\";\n}\nul{\n    margin: 5px 0px;\n}\n.header{\n    background-color: rgb(75, 75, 75);\n    color: lightgrey;\n    padding-left: 100px;\n    padding-right: 100px;\n    padding-top:10px;\n    padding-bottom:10px;\n    grid-area: header;\n}\n\n.portal{\n    \n    padding-left: 80px;\n    grid-area: portal;\n    font-size: xx-large;\n    color: lightgray;\n    background-color: rgb(75,75,75);\n}\n\n.container{\n    grid-area: cards;\n    \n    padding: 10px;\n    \n    display:grid;\n    grid-template-columns: auto auto auto auto;\n}\n\n\/*card css*\/\n.card{\n    display:flex;\n    justify-self:center;\n    flex-direction: column;\n    color: lightgray;\n    border: 3px;\n    border-color: white;\n    border-style: outset;\n    border-radius: 40px;\n    padding: 12px;\n}\n.card:hover{\n    cursor: pointer;\n    outline: 3px inset chartreuse;\n    outline-offset: 0.1vw;\n}\n\n.cardimg{\n    max-width: 200px;\n    max-height: 150px;\n    align-self: center;\n    margin-left: 0.2vw;\n    margin-right: 0.2vw;\n    margin-top: 0.2vw;\n    margin-bottom: 0.4vw;\n}\n\n.cardtext{\n    padding: 3px;\n    border: 1px white solid;\n    border-radius: 10px;\n}\n\n\/*sidebar css*\/\n.sidebar{\n    grid-area: sidebar;\n    display: flex;\n    flex-direction: column;\n    padding:25px;\n    background-color: rgb(75, 75, 75);\n}\n.sidebaritem{\n    color: chartreuse;\n}\n\n\/*viewmode css*\/\n.dark{\n    background-color: rgb(75,75,75);\n    color: lightgray;\n}\n.darkcard{\n    background-color: rgb(75,75,75);\n}\n.light{\n    background-color: white;\n    color: black;\n    a{\n        color: lightblue;\n    }\n}\n.lightcard{\n    background-color: antiquewhite;\n}\n\/*points specific css*\/\n#pointsheader{\n    display: flex;\n    flex-direction: row;\n}\n\n\/*buttoncss*\/\n#viewmodebutton{\n    border: 1px gray solid;\n    border-radius: 10px;\n}<\/code><\/pre>\n\n\n\n
Javascript:<\/h3>\n\n\n\n
For now, I have made a light and dark mode function. They activate when a button is clicked and switch the function of the button to be the alternate function (ex: lightmode -> darkmode and vice versa) The code is as follows:<\/p>\n\n\n\n
\n
const viewmode = document.getElementById(\"viewmodebutton\")\nviewmode.addEventListener(\"click\", lightmode)\n\nfunction lightmode(){\n    document.body.style.backgroundColor = \"white\";\n    let darkModes = document.querySelectorAll(\".dark\")\n    let darkModesCards = document.querySelectorAll(\".darkcard\")\n    darkModes.forEach(element => {\n        if (element.classList.contains(\"dark\"))\n        {\n            element.classList.remove(\"dark\");\n            element.classList.add(\"light\");\n        }})\n    darkModesCards.forEach(element => {\n        if (element.classList.contains(\"darkcard\"))\n        {\n            element.classList.remove(\"darkcard\");\n            element.classList.add(\"lightcard\");\n        }\n\n    });\n    viewmode.removeEventListener(\"click\", lightmode);\n    viewmode.addEventListener(\"click\", darkmode);\n}\n\nfunction darkmode(){\n    document.body.style.backgroundColor = \"rgb(75,75,75)\";\n    let lightModes = document.querySelectorAll(\".light\");\n    let lightModesCards = document.querySelectorAll(\".lightcard\");\n    lightModes.forEach(element => {\n        if (element.classList.contains(\"light\"))\n        {\n            element.classList.remove(\"light\");\n            element.classList.add(\"dark\");\n        }})\n    lightModesCards.forEach(element => {\n        if (element.classList.contains(\"lightcard\"))\n        {\n            element.classList.remove(\"lightcard\");\n            element.classList.add(\"darkcard\");\n        }\n    });\n    viewmode.removeEventListener(\"click\", darkmode);\n    viewmode.addEventListener(\"click\", lightmode);\n}<\/code><\/pre>\n\n\n\n
<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Introductions for the weeks of 2\/9\/26 – 2\/13\/26 and 2\/16\/26 – 2\/20\/26 My most recent project has been relearning HTML\/CSS and JS in time for the SkillsUSA PA state web development competitions. To prepare, I have been making a pseudo-clone of the PBIS rewards student portal. Html: I have made the html code to make […]<\/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-189","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/posts\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/posts\/189\/revisions"}],"predecessor-version":[{"id":190,"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/posts\/189\/revisions\/190"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/media?parent=189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/categories?post=189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/tags?post=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}