Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aquarium Filter</title>
    <link rel="stylesheet" href="./styles.css" />
</head>
<body>
    <div id="filters">
        <button id="fish">🐠</button>
        <button id="bird">🐦</button>
        <button id="all">all</button>
    </div>

    <div id="grid">
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Estrilda_astrild_-Gran_Canaria%2C_Canary_Islands%2C_Spain-8_%281%29.jpg" alt="An adult Common Waxbill on Gran Canaria, Spain." />
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/0/00/Calidris-pusilla-001.jpg" alt="Semipalmated sandpiper" />
        <img class="fish" src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Chromis_atripectoralis_2.jpg" alt="Chromis atripectoralis 2" />
        <img class="fish" src="https://upload.wikimedia.org/wikipedia/commons/7/78/Yellowsaddle_goatfish_parupeneus_cyclostomus.JPG" alt="Goldsaddle goatfish" />
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/0/04/Lonchura_atricapilla_jagori_-Cebu-8-3c.jpg" alt="A wild Black-headed Munia on Cebu, Philippines." />
        <img class="fish" src="https://upload.wikimedia.org/wikipedia/commons/a/aa/ChairoYK.jpg" alt="チャイロヤッコ Centropyge fisheri" />
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/3/34/Coccyzus-americanus-001.jpg" alt="Yellow-billed cuckoo" />
        <img class="fish" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Scrawled_Filefish.jpg/2560px-Scrawled_Filefish.jpg" alt="Scrawled Filefish" />
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/3/32/Chasiempis_sandwichensis_ridgwayi.jpg" alt="Hawaiʻi ‘elepaio" />
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Lonchura_punctulata_%28Nagarhole%2C_2004%29.jpg/1920px-Lonchura_punctulata_%28Nagarhole%2C_2004%29.jpg" alt="Scaly-breasted munia in Nagarhole National Park" />
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Adult_Black-headed_Munia.jpg" alt="Chestnut munia" />
        <img class="fish" src="https://upload.wikimedia.org/wikipedia/commons/2/22/HutairoHGmaido.jpg" alt="フタイロハナゴイyg Pseudanthias bicolor" />
        <img class="fish" src="https://upload.wikimedia.org/wikipedia/commons/b/bd/Centropyge_interruptus.jpg" alt="Centropyge interruptus in Kashiwajima Kohchi-ken(Prefecture), Japan" />
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/7/7f/Myadestes_palmeri.jpg" alt="Puaiohi" />
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Falcated_Duck_%28Anas_falcata%29_RWD3.jpg/1920px-Falcated_Duck_%28Anas_falcata%29_RWD3.jpg" alt="♀ Falcated Duck (Anas falcata) at Sylvan Heights Waterfowl Park in Scotland Neck, North Carolina.">
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/7/79/Japanese_White-eye.jpg" alt="Japanese white-eye" />
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Lavender_waxbill_%28Estrilda_caerulescens%29.jpg/440px-Lavender_waxbill_%28Estrilda_caerulescens%29.jpg" alt="Lavender waxbill (Estrilda caerulescens), The Gambia" />
        <img class="fish" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Flame_angelfish_%28Centropyge_loricula%29.jpg/2560px-Flame_angelfish_%28Centropyge_loricula%29.jpg" alt="Flame angelfish" />
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Geopelia_striata_Big_Island_Hawaii.JPG/1920px-Geopelia_striata_Big_Island_Hawaii.JPG" alt="Zebra dove" />
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Red-crested_cardinal_-_Oahu.jpg/1280px-Red-crested_cardinal_-_Oahu.jpg" alt="Red-crested cardinal" />
        <img class="bird" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Acrocephalus_familiaris_-Laysan%2C_Northwestern_Hawaiian_Islands%2C_USA-8.jpg/2560px-Acrocephalus_familiaris_-Laysan%2C_Northwestern_Hawaiian_Islands%2C_USA-8.jpg" alt="Millerbird" />
        <img class="fish" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Chaetodon_lineolatus.jpg/2560px-Chaetodon_lineolatus.jpg" alt="Chaetodon lineolatus Great Barrier Reef, Cairns, Australia" />
    </div>

    <script src="./script.js" type="text/javascript"></script>
</body>
</html>
              
            
!

CSS

              
                body {background-color: #ebebeb;}

/* Filters */
#filters {
    margin-bottom: 1em;
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
}
#filters button {
    font-size: 20px;
    /* background: #fff; */
    /* border: 1px dotted #000; */
    height: 2em;
    border-radius: 3px;
    cursor: pointer;
}

/* Grid */
#grid {
    display: grid;
    grid-template-columns: repeat(4, 200px);
    gap: 10px;
}
#grid img {
    max-width: 100%;
}
              
            
!

JS

              
                // Let's declare our global constants
const filters = document.querySelectorAll('#filters');
const images = document.getElementsByTagName('img');

// Our little program that finds all the elements with the corresponding filter class and displays them
function filterImages(filterBy) {
    // Hide all our images so we can only show the filtered ones
    for (let image of images) {
        image.style.display = 'none';
    }

    // A if/else statement for the 'all' filter
    if (filterBy === 'all') {
        animals = images;
    } else {
        animals = document.querySelectorAll('.' + filterBy);
    }

    // Finally show the filtered images
    for (let animal of animals) {
        animal.style.display = 'block';
    }
}

// Loop through the filters and add an event listener to each filter button
for (let filter of filters) {
    filter.addEventListener('click', function(event) {
        // Get the id from the clicked filter button
        var filterBy = event.target.getAttribute('id');
        // See how we are passing `filterBy` into the function here
        filterImages(filterBy);
    })
}
              
            
!
999px

Console