index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple to do list</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <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="./css/normalize.css">
    <link rel="stylesheet" href="./css/skeleton.css">
    <link rel="stylesheet" href="./css/style.css">

</head>

<body>

    <div class="container">
        <div class="row">
            <form action="" class="p-5" id="dataentry">
                <h2 class='text-center'>TO DO LIST</h2>
                <input class="u-full-width mt-3 main" type="text" placeholder="Task" name="main">
                <input class="u-full-width mt-3 category" type="text" placeholder="Category" name="category">
                <button type='submit' class="u-full-width mt-3 btn btn-primary">submit</button>
            </form>
        </div>

        <div class="row">
            <table class="u-full-width">
        
                <thead>
                <tr>
                    <th>Tasks</th>
                    <th>Category</th>
                </tr>
                </thead>
                <tbody id='addNewItem'>


                </tbody>
            </table>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <script src="./js/main.js"></script>

</body>

</html>