Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Waste Management Challenge</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f8ff;
        }

        #game-area {
            margin: 20px auto;
            position: relative;
            width: 400px;
            height: 300px;
            border: 2px solid #333;
            background-color: #fff;
        }

        #waste-item {
            position: absolute;
            top: 20px;
            left: 150px;
            font-size: 24px;
        }

        .bin {
            width: 100px;
            height: 100px;
            margin: 10px;
            display: inline-block;
            border: 2px solid #333;
            line-height: 100px;
            font-size: 20px;
            cursor: pointer;
        }

        #compost-bin {
            background-color: #d0e0d0;
        }

        #recycle-bin {
            background-color: #b0d0f0;
        }

        #landfill-bin {
            background-color: #f0b0b0;
        }
    </style>
</head>
<body>
    <h1>Waste Management Challenge</h1>
    <div id="score">Score: 0</div>
    <div id="timer">Time Left: 30</div>
    <div id="game-area">
        <div id="waste-item"></div>
        <div class="bin" id="compost-bin">Compost</div>
        <div class="bin" id="recycle-bin">Recycle</div>
        <div class="bin" id="landfill-bin">Landfill</div>
    </div>
    <script>
        let score = 0;
        let timeLeft = 30;
        let wasteItems = [
            { name: "Banana Peel", type: "Compost" },
            { name: "Plastic Bottle", type: "Recycle" },
            { name: "Paper", type: "Recycle" },
            { name: "Food Scraps", type: "Compost" },
            { name: "Cans", type: "Recycle" },
            { name: "Old Clothes", type: "Landfill" }
        ];

        function randomItem() {
            return wasteItems[Math.floor(Math.random() * wasteItems.length)];
        }

        function displayItem() {
            let item = randomItem();
            document.getElementById('waste-item').innerText = item.name;
            document.getElementById('waste-item').setAttribute('data-type', item.type);
        }

        function checkBin(binType) {
            let currentItemType = document.getElementById('waste-item').getAttribute('data-type');
            if (binType === currentItemType) {
                score += 10;
            } else {
                score -= 5;
            }
            document.getElementById('score').innerText = "Score: " + score;
            displayItem();
        }

        document.getElementById('compost-bin').addEventListener('click', () => checkBin("Compost"));
        document.getElementById('recycle-bin').addEventListener('click', () => checkBin("Recycle"));
        document.getElementById('landfill-bin').addEventListener('click', () => checkBin("Landfill"));

        function startGame() {
            displayItem();
            let timer = setInterval(() => {
                timeLeft--;
                document.getElementById('timer').innerText = "Time Left: " + timeLeft;
                if (timeLeft <= 0) {
                    clearInterval(timer);
                    alert("Game Over! Your score: " + score);
                }
            }, 1000);
        }

        startGame();
    </script>
</body>
</html>
Editor is loading...