14.10

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<style>
    table,
    td {
        border: 2px solid black;
    }

    td {
        width: 17vw;
        height: 17vw;
    }

    .red {
        background-color: red;
    }

    h1 {
        font-size: 10vw;
        text-align: center;
    }

    img {
        height: 10vw;
        width: auto;
    }

    text {
        font-size: 10vw;
    }

    .noborder {
        border: none;
    }
</style>

<body>
    <h1>Clicker Game</h1>
    <center>
        <table class="noborder">
            <tr>
                <td class="noborder">
                    <img src="heart.jpg">
                </td>
                <td class="noborder">
                    <text>3</text>
                </td>
                <td class="noborder">
                    <img src="score.png">
                </td>
                <td class="noborder">
                    <text>0</text>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td id="11"></td>
                <td id="12"></td>
                <td id="13"></td>
                <td id="14"></td>
                <td id="15"></td>
            </tr>
            <tr>
                <td id="21"></td>
                <td id="22"></td>
                <td id="23"></td>
                <td id="24"></td>
                <td id="25"></td>
            </tr>
            <tr>
                <td id="31"></td>
                <td id="32"></td>
                <td id="33"></td>
                <td id="34"></td>
                <td id="35"></td>
            </tr>
            <tr>
                <td id="41"></td>
                <td id="42"></td>
                <td id="43"></td>
                <td id="44"></td>
                <td id="45"></td>
            </tr>
            <tr>
                <td id="51"></td>
                <td id="52"></td>
                <td id="53"></td>
                <td id="54"></td>
                <td id="55"></td>
            </tr>
        </table>
    </center>
</body>

<script>
    function getRandomNumber() {
        return Math.floor(Math.random() * 5) + 1;
    }

    function getRandomSquare() {
        let y = getRandomNumber().toString();
        let x = getRandomNumber().toString();
        return y + x;
    }

    function makeRedSquare() {
        $("td").removeClass("red");
        let id = getRandomSquare();
        console.log(id);
        $("#" + id).addClass("red");
    }


    setInterval(makeRedSquare, 3000);


</script>

</html>