Shared note

lab 1

<style>
    body{
        font-family: Arial,sans-serif;
        padding:20px;
    }
    .buttons{
        margin-bottom: 20px;
    }
    button{
        margin-right: 10px;
        padding: 10px;
        border: none;
        background-color: #06d6f1;
        color: white;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover{
        background-color: #13a1f3;
    }
    .gallery{
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }
    .gallery img{
        width: 200px;
        height: 150px;
        object-fit: cover;
        display: block;
    }

</style>

<div class="buttons" id="buttonsContainer"></div>
<div class="gallery" id="imageGallery">
    <img src="IMAGES/NATURE1.JPG" data-tags="nature">
    <img src="IMAGES/mountain.jpg" data-tags="mountain">
    <img src="IMAGES/city.jpg" data-tags="city">
    <img src="IMAGES/bridge.jpg" data-tags="bridge">
    <img src="IMAGES/beach.jpg" data-tags="beach">
    <img src="IMAGES/NATURE1.JPG" data-tags="nature">
</div>
<script>
    const images = document.querySelectorAll('#imageGallery img');
    const tagged = {};

    images.forEach(img => {
        const tags = img.dataset.tags.split(',');
        tags.forEach(tag => {
            if (!tagged[tag]) {
                tagged[tag] = [];
            }
            tagged[tag].push(img);
        });
    });

    const buttonsContainer = document.getElementById('buttonsContainer');

    const allBtn = document.createElement('button');
    allBtn.textContent = 'Show All';
    allBtn.onclick = () => {
        images.forEach(img => img.style.display = 'block');
    };
    buttonsContainer.appendChild(allBtn);

    Object.keys(tagged).forEach(tag => {
        const btn = document.createElement('button');
        btn.textContent = tag;
        btn.onclick = () => {
            images.forEach(img => img.style.display = 'none');
            tagged[tag].forEach(img => img.style.display = 'block');
        };
        buttonsContainer.appendChild(btn);
    });
</script>