index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ping Pong</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.png" type="image/x-icon" />
</head>

<body>
    <div class="container">
        <div class="details">
            <h1>Ping Pong</h1>
            <form action="" class="form1">
                <label>
                    Max Score: (Default: 3)<br />
                    <input type="number" max="12" min="2" name="win-score" id="win-score" placeholder="Enter a number">
                </label>
                <label>
                    Ball Color: (Default: red)<br />
                    <select name="ball-color" id="ball-color">
                        <option value="red" selected>Red</option>
                        <option value="lime">Green</option>
                        <option value="blue">Blue</option>
                        <option value="yellow">Yellow</option>
                        <option value="deeppink">Deep Pink</option>
                        <option value="chocolate">Chocolate</option>
                    </select>
                </label>
                <label>
                    Frames per sec: (Default: 50)<br />
                    <select id="fps" name="fps">
                        <option value="30">30</option>
                        <option value="50" selected>50 (Recommended)</option>
                        <option value="60">60</option>
                        <option value="90">90</option>
                    </select>
                </label>
                <button type="submit" id="ready">Get Ready!</button>
                <br />
                <button type="reset" id="reset">Reset Settings</button>
            </form>
            <br />
            <button id="pause">Pause</button>
            <br />
            <button id="play-btn">Continue</button>
        </div>
        <div class="game">
            <canvas id="gameCanvas" width="1000" height="600"></canvas>
        </div>
    </div>
    <footer>
        <p>
            Connect on <a href="https://www.linkedin.com/in/ankitgoel25/" target="_blank">
                <img src="linkedin-white.svg" id="linked" alt="">
            </a>
            <span>Please give your views and suggestions to improve!</span>
        </p>
        <p>Created by &ensp;<b>ANKIT GOEL</b></p>
    </footer>
    <script src="main.js"></script>
</body>

</html>