index.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typing speed</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
    <script src="app/script.js" defer></script>
</head>

<body>
    <header class="welcome-note">
        <h1>Start your typing test </h1>
    </header>
    <main class="mainbox">
        <section class="instructions">
            <p>Instructions: Start typing to start the counter. Type in the content correctly. When typed correctly, the counter stops. Click on "Reset" to restart.</p>
        </section>
        <section class="work-area">
            <div class="test-sent">
                <p>I am taking a typing test.</p>
            </div>
            <div class="input-box">
                <textarea name="textbox" id="text-box" rows="6" placeholder="Enter the above sentence."></textarea>
            </div>
            <div class="event-area">
                <section class="event-box">
                    <div class="count">00:00:00</div>
                </section>
                <button class="btn-reset">Reset</button>
            </div>
        </section>
    </main>
</body>

</html>