index.html

<!doctype html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <!-- <meta http-equiv="refresh" content="1"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=JetBrains+Mono">
    <link rel="stylesheet" href="style.css">
    <title>gilgeekify</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <h2 class="page_title">
                    [ Word, Character And Line Counter ]
                </h2>
                <div class="field">
                    <span class="btn-clear btn-danger" id="clear_button">Clear</span>
                    <label for="textarea" class="form-label">Enter Some Text</label>
                    <textarea class="form-control" id="textarea" rows="10"></textarea>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col text-center" id="word_counter">
                Word: 0
            </div>
            <div class="col text-center" id="character_counter">
                Character: 0
            </div>
            <div class="col text-center" id="line_counter">
                Line: 1
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>

</html>