Click here for free DL of the app version that can save data.

No:41636

←

Prev Next

→

Caillou Make A Cookies
Developer User18645｜Date and time 24/2/8 19:33:20
Build time 10.321 sec｜Game capacity 2.895KB｜

Script

Caillou Make A Cookies

Flour

Sugar

Butter

Chocolate

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Caillou Make A Cookies</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        .container {
            margin-top: 50px;
        }
        .ingredients {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }
        .ingredient {
            margin: 0 10px;
        }
        .cookie-img {
            width: 200px;
            height: 200px;
            margin: 20px auto;
        }
        .btn {
            padding: 10px 20px;
            background-color: #1E90FF;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        .btn:hover {
            background-color: #0080FF;
        }
        .result {
            font-size: 20px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Caillou Make A Cookies</h1>
        <div class="ingredients">
            <div class="ingredient">
                <img src="flour.png" width="50" height="50" alt="Flour">
                <p>Flour</p>
            </div>
            <div class="ingredient">
                <img src="sugar.png" width="50" height="50" alt="Sugar">
                <p>Sugar</p>
            </div>
            <div class="ingredient">
                <img src="butter.png" width="50" height="50" alt="Butter">
                <p>Butter</p>
            </div>
            <div class="ingredient">
                <img src="chocolate.png" width="50" height="50" alt="Chocolate">
                <p>Chocolate</p>
            </div>
        </div>
        <img class="cookie-img" src="cookie.png" alt="Cookie">
        <button class="btn" onclick="makeCookies()">Make Cookies!</button>
        <p class="result" id="result"></p>
    </div>

// Check if all ingredients are selected
            for (var i = 0; i < ingredients.length; i++) {
                if (!ingredients[i].classList.contains('selected')) {
                    document.getElementById('result').innerHTML = 'Please select all ingredients.';
                    return;
                }
            }

// If all ingredients are selected, display the result
            document.getElementById('result').innerHTML = 'Congratulations! You made delicious cookies!';
        }

// Toggle ingredient selection on click
        var ingredientEls = document.querySelectorAll('.ingredient');
        for (var i = 0; i < ingredientEls.length; i++) {
            ingredientEls[i].addEventListener('click', function() {
                this.classList.toggle('selected');
            });
        }
    </script>
</body>
</html>