04. Code from 03/05/2026

Introduction

Here's some stuff form 03/05/2026. I got kinda jazzed up after class, so dropping this stuff here now. At the time of this writing, you can find some of these on the HOT POTATO page., I encourage you to play with the code that is there.

Links to Demo Pages

Local Storage to Save "Settings"

LocalStorage is a browser feature that allows us to save values, and re-use them on other pages, in someone's browser. This doesn't change the actual website, it simply sets or changes a value on that person's browser. This is how this website saves the value you set for the website font or theme. To use it you need a little javascript.

This is probably cool/fine for people making more "gamic"-ideas.

The example above has two pages, in order to demonstrate that the value persists across pages.

In order to get it to work, we need a "key value pair" in javascript. This just means the key is the name of the thing we want to change, and the value is the actual...value that we want to change.

We can either getItem(), or setItem(), and in this case we are using a button to change the setting, and toggling it. If you'd like some more complex functionality, let me know.

Please view source on the above page to see all the code. But what you need is a button that sets the value when you click it:

(this is in the script tag)

//"connect" the functionality to this button
const button = document.getElementById("toggler");

button.addEventListener("click", () => 
{
    if(localStorage.getItem("has_hat") == "no_hat")
    {
        localStorage.setItem("has_hat", "yes_hat");
    }else
    {
        localStorage.setItem("has_hat", "no_hat");
    }
});

The other code on the page, is mainly to provide feedback about what the state of the button is right now.

Then, on pages you want to check this later you can do it like this: (somewhere in your HTML page)

<img id = "img_with_hat" src = "">

Note that there is nothing in the source property, and it has an id of img_with_hat Later in the script we check the value to set it:

(in your js script tag)

if(localStorage.getItem("has_hat") == "yes_hat")
{
    document.getElementById("img_with_hat").src = "img/guy_with_hat.gif";
}else
{
    document.getElementById("img_with_hat").src = "img/guy_no_hat.gif";
}

Rotating Text with CSS

We went over some of this in passing in another class, but you can rotate text in the following way.

Assuming we have an HTML page that looks like this (I've left out the the css and some extra tags and info for simplicity's sake).

<html> 
    <head>
        <title>
            rotating text example
        </title>
        <style>
        </style>
    </head>

    <body>
        <div class = "rotating_text">HELLO</div>
    </body>
</html>

We can then add this css, inside the style tag:

.rotating_text
{
    margin             : 0 auto;
    animation          : rotater 1s 2 ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes rotater
{
    0%      {transform: rotate(-10deg); }
    50%     {transform: rotate(20deg);  } 
    100%    {transform: rotate(-10deg); }
}

first, the .rotating_text references the rotating_text class we created in html, and tells it we want it to have the "rotater" animation applied to it. It will take place over 1s, repeat twice and have easing in and out (be slower at the beginning and end to look more naturalistic).

After this we create the actual animation which is called rotater. it says that at the beginning (0%) it will rotate -10 degrees, at 50% it will rotate 20 degrees, and then back the other way at 100%. Ending on the same value it starts on, creates the impression it is looping.

The animation-fill-mode property set to forwards is what makes sure the animation ends at the same place it began (-10 degrees).

Various Filters you can do in CSS

CSS also gives us access to some filters. Here's a couple:


h1#blur
{
    filter    : blur(10px);
}

/* use multiple filters to create desired effects*/
img#extreme
{
   filter:
        contrast(200%)
        saturate(200%)
        hue-rotate(90deg)
        blur(2px);
}

/*make the image black and white*/
img#b_w
{
    filter:
        contrast(160%)
        saturate(0%)
}

/* use drop shadow to simulate 
glowing */

h1#glow
{
    color: #990099;
    /* you can "stack" multiple glows like this*/
    filter: drop-shadow(0 0 10px #FFFFFF)
    drop-shadow(0 0 20px #FF99FF)
    drop-shadow(0 0 40px #FF00FF);
}