index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>To Do List</title>
        <link rel="stylesheet" href="to-do-list.css">
    </head>

    <body>
        <h1>To Do List</h1>
        <div class="css-elements">
            <input onclick="document.querySelector('.ontype-title').innerHTML='';
            document.querySelector('.js-add-button').innerHTML='Add';" class="js-title css-title css-text" type="text" placeholder="Title...">
            <input class="js-date css-date css-text" type="date" placeholder="Date">
            <input class="js-time css-time css-text" type="time" placeholder="Time">
            <button class="js-add-button css-add-button" type="button">Add</button>
        </div>

        <p class="ontype-title"></p>

        <div class="js-para-container css-para-container">
        </div>

        <script src="to-do-list.js"></script>
    </body>
</html>