02. Code from 02/19/2026

Introduction

Below are some snippets from class from 02/19/2026. These were things people mentioned in class during their progress presentations. All the examples are linked in this link if you want to see it working, but explained below.

Links to Demo Pages

Buttons

Buttons are just another HTML tag. Below is the code for buttons.

<!--BUTTON TAG -->
<!--
simplest button we
can make!
-->
<button>
    ENTER!
</button>

<!--
we can also give it styles
via ids or classes.

we will need the id
later, to do something
with the button.
-->
<button id = "specific_btn" class = "red">
CLICK HERE!
</button>

By default buttons will have a "silvery" or "gray" look on the page (see the linked example page). Below is the css that is applied to buttons on that page. We can add styling to them in order to make them look and behave how we want.

/* BUTTON STYLES */
/*
make the button black
with white text. 

make the text uppercase. 

no border, and give some space.
*/
button
{
    background-color: #000000;
    color           : #FFFFFF;
    border          : none;
    padding         : 10px 40px;
    text-transform  : uppercase;
}

/*
when you hover, 
make the button a different
color, and the cursor will 
be a hand. 
*/
button:hover
{
    background-color: #3300FF;
    cursor          : pointer;
}

/*
when you click the button, 
change the color again!
and make it move a little, 
as if it were pressed.
*/
button:active
{
    background-color: #9900FF;
    transform       : translateY(5px) translateX(5px);
}

Here are some resrouces on buttons from w3Schools

Buttons with Images

To add images to buttons we can do one of two things:

  • make an image with button-like behavior
  • give a button an image as a background

Both are fine. However, it might be easier for you to put your images in your HTML file rather than linking them in CSS, ultimately up to you.

<style>
    #image_button
    {
        pointer: cursor; 
    }
</style>

<img 
    id = "image_button"
    src = "img/cool_thing.jpg">

Here is how you would style a button with an image as the background:

#img_button
{
    width              : 400px;
    height             : 400px;
    background-image   : url('img/JOHNNY.gif');
    background-size    : cover;                  
    background-position: center;                 
    background-repeat  : no-repeat;             
    border             : none;
    color              : white;
}

Button that Switches Between Two (or more) Images

The example on the page has two buttons, in order to change the image, we need to use JavaScript. You do not need to know exactly how it works but given this HTML:

<!-- OUR BUTTONS -->
<div class = "buttons">
    <button id = "button_01">JOHNNY</button>
    <button id = "button_02">SUZIE</button>
</div>

<!-- OUR IMAGE -->
<div class = "image">
    <img id = "image_area" src = "img/JOHNNY.gif" alt = "face of JOHNNY">        
</div>

We have this part of the script (inside a script tag), that says which HTML elements we want to interact with. The text inside the quotation marks must be the same as the name of our id.

const button_01 = document.getElementById("button_01");
const button_02 = document.getElementById("button_02");
const image = document.getElementById("image_area");

Then to actually make the buttons do something we need to add a "listener." These will make the actual contents of the src of the image change, so that we see a different image. These events are specifically meant to trigger when you click on the respective button.

button_01.addEventListener("click", () => 
{
    image.src = "img/JOHNNY.gif";
});

button_02.addEventListener("click", () => 
{
    image.src = "img/SUZIE.gif";
});

This page has a list of all the events you can access, but major ones you'd want to do something for might be:

  • mousedown
  • mouseover
  • mouseout
  • keyup
  • keydown
  • keypress

Audio

Audio is relatively easy we just need to add a tag, that is linked to a specific audio file:

<audio id = "audio" src = "audio/telepath.mp3" loop></audio>

If you want to actually show the controls, for whatever reason, you'd write it like this:

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
</audio>

If you want to use a button to control audio you would first create a button:

<button id = "play_pause">Pause</button>

We then need the following inside a script tag. This just connects our HTML to the script (similar to how the buttons worked).

const audio      = document.getElementById("audio");
const play_pause = document.getElementById("play_pause");

We also need to control what happens when the button is pressed. This code will change the text inside button, as well as actually play or pause the audio.

play_pause.addEventListener("click", ()=>
{
    if(audio.paused)
    {
        play_pause.textContent = "Pause";
        audio.play();
    }else
    {
        play_pause.textContent = "Play";
        audio.pause();
    }

});

Here's the last thing that we need. This is because, browsers will not allow audio to simply start playing when you enter a page. This code makes it so that when we click into the page when we first load it, it will start playing the audio.

This is more a standards issue, than anything to do with security. In the past, for example, you might have encountered aggressive pop-up ads that played audio when they loaded, or mySpace pages with audio players set to play "I'm Not Okay" on full blast.

document.body.addEventListener("click", () => 
{
    audio.play().catch(() => {});
}, { once: true });

Page with the Same Audio

In order to simulate having multiple pages, but with the same audio playing the easiest thing is to put all the page contents into one div, and then make that div set to display none:

.page 
{
    height         : 90vh;
    display        : none;
    align-items    : center;
    justify-content: center;
    font-size      : 3rem;
    color          : white;
}

.active
{
    display: flex;
    flex-direction: column;
}

Then the code linked here, will make the selected page (via buttons) have the "active" class that then shows it:

function showPage(id) 
{
    //hide errrrrrthing
    document.querySelectorAll(".page").forEach(page => 
    {
        page.classList.remove("active");
    });

    //show the one we asked for
    document.getElementById(id).classList.add("active");
}

Our buttons just need to then call the function above, just like this:

<button class = "tomorrow-bold" onclick="showPage('red')">Red</button>