Untitled

!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head lang="en">
        <meta charset="UTF-8" />
        <title>Tasks</title>
    </head>
    <body>

        <h2>Tasks</h2>

        <!-- TODO: add the ability to list tasks -->
        <ul id="tasks">
        </ul>


        <form>
            <input type="text" name="name" id="name"/>
            <input type="button" onclick="addTask();" value="Add!"/>
        </form>

        <!-- the javascript has been embedded to the same site -->
        <script th:inline="javascript">
            // The URL to the application server that holds the tasks.
            var url = /*[[@{/tasks}]]*/ null;

            function loadTasks() {
                alert("hello world! it'd be nice if i would load the tasks from the server and show them on this page.");

				const http = new XMLHttpRequest();
				http.open("GET", url, true);
                http.setRequestHeader("Content-type", "application/json");

                http.onreadystatechange = function () {
                    if (http.readyState === 4) {
                        if (http.status === 200) {
                            addTaskToList(JSON.parse(http.responseText));
                        }
                    }
                }

                http.send(null);
            }

            function addTask() {
                var name = document.querySelector("#name").value;
                if (!name) {
                    return;
                }

                console.log(name);

                var http = new XMLHttpRequest();
                http.open("POST", url, true);
                http.setRequestHeader("Content-type", "application/json");
                var data = new Object();
                data.name = name;

                http.onreadystatechange = function () {
                    if (http.readyState === 4) {
                        if (http.status === 200) {
                            addTaskToList(JSON.parse(http.responseText));
                        }
                    }
                }

                http.send(JSON.stringify(data));
            }


            function addTaskToList(task) {
                var liElement = document.createElement("li");
                liElement.appendChild(document.createTextNode(task.name));
                document.querySelector("#tasks").appendChild(liElement);
            }


            window.onload = function () {
                loadTasks();
            };
        </script>
    </body>
</html>