whackamole/whackamole.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Duncan&rsquo;s Whack-a-mole</title>
    <link rel="stylesheet" type="text/css" href="../main.css" />
    <link rel="icon" href="https://www.duncanritchie.co.uk/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="https://www.duncanritchie.co.uk/favicon-96x96.png" type="image/png" />
</head>
<body>
    <main>
        <h1>Duncan&rsquo;s Whack-a-mole</h1>
        <p class="explanation">Whack the mole by clicking on it!</p>
        <div id="whackamoleBody">
            <img src="mole_clipart_T.png" alt="Mole clipart" id="whackamoleMole" />
        </div>
        <p id="whackamoleMessage">
            It took you <a id="whackamoleTimeToKill"></a> milliseconds to whack that mole!<br />
            You have whacked <a id="whackamoleMolesWhacked"></a> moles. Your fastest time is <a id="whackamoleBestTime"></a> milliseconds.
        </p>
        <p id="whackamoleScoreMessage">
            You have earned <a id="whackamoleScore"></a> mole-whacking points.
        </p>
    </main>
    <footer>
        <ul>
            <li>
                <a href="https://www.duncanritchie.co.uk" title="Duncan Ritchie&rsquo;s website">
                    Made by Duncan Ritchie
                </a>
            </li>
            <li>
                <a href="../" title="Duncan Ritchie&rsquo;s game page">
                    Games homepage
                </a>
            </li>
            <li>
                <a href="https://github.com/DuncanRitchie/jsChallenges/tree/main/whackamole" title="Code on GitHub">
                    See the code
                </a>
            </li>
        </ul>
    </footer>
    <script src="whackamole.js"></script>
</body>
</html>