index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
        rel="stylesheet">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>TODO</title>
</head>

<body>
    <h1>TODO</h1>
    <form autocomplete="off">
        <input type="text" name="todo-text" id="todo-input" placeholder="New Task...">
        <input type="submit" value="ADD">
    </form>
    <ul id="todo-list">
    </ul>
    <div class="import-export">
        <a href="" id="export">Export TODO's</a>
        <label for="import" id="import-label">Import TODO's</label>
        <input type="file" name="import" id="import" accept="application/json">
    </div>
</body>
<script src="app.js" defer></script>

</html>