MONTHLY EVALUATION INDICATORS RED ~ YELLOW ~ GREEN CHANGING 3-COLORS OF CLICKABLE BUTTONNO DATABASE CONNECTION YET! AKA DATA STORAGE NEEDED to RECORD "ONGOING/LAST-CLICK OF COLOR-STATUS" [RED][YELLOW][GREEN]

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

SOURCE CODE

    <style>

        /* Use a specific class to avoid conflicts with global Blogger styles */

        .month-grid-container {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));

            gap: 5px;

            width: 100%;

            margin: 20px 0;

        }

        .month-box {

            aspect-ratio: 1 / 1;

            /* Changed to 1:1 for better visibility */

            display: flex;

            align-items: center;

            justify-content: center;

            border: 2px solid #333;

            font-family: sans-serif;

            font-weight: bold;

            text-transform: uppercase;

            cursor: pointer;

            transition: background-color 0.4s ease;

            padding: 5px;

            font-size: 12px;

            /* Responsive font size */

            text-align: center;

        }

        /* Color States */

        .state-0 {

            background-color: #ff0000;

            color: white;

        }

        .state-1 {

            background-color: #ffff00;

            color: black;

        }

        .state-2 {

            background-color: #008000;

            color: white;

        }

    </style>

    <div class="month-grid-container" id="monthGrid">

        <div class="month-box state-0" data-state="0">Jan</div>

        <div class="month-box state-0" data-state="0">Feb</div>

        <div class="month-box state-0" data-state="0">Mar</div>

        <div class="month-box state-0" data-state="0">Apr</div>

        <div class="month-box state-0" data-state="0">May</div>

        <div class="month-box state-0" data-state="0">Jun</div>

        <div class="month-box state-0" data-state="0">Jul</div>

        <div class="month-box state-0" data-state="0">Aug</div>

        <div class="month-box state-0" data-state="0">Sep</div>

        <div class="month-box state-0" data-state="0">Oct</div>

        <div class="month-box state-0" data-state="0">Nov</div>

        <div class="month-box state-0" data-state="0">Dec</div>

    </div>

    <script>

        // Event delegation is cleaner for Blogger environments

        document.getElementById('monthGrid').addEventListener('click', function (e) {

            if (e.target.classList.contains('month-box')) {

                let el = e.target;

                let state = (parseInt(el.getAttribute('data-state')) + 1) % 3;

                el.setAttribute('data-state', state);

                el.className = 'month-box state-' + state;

            }

        });

    </script>