{% include 'header.html' %}

<script>
function newItem() {
    var list = document.getElementById("list");

    let xhr = new XMLHttpRequest();
    xhr.open('get', "/hornswiggle_api");
    xhr.send();

    xhr.onload = function () {
        var newItem = document.createElement("li");
        newItem.textContent = xhr.response;
        list.appendChild(newItem);
    };
}
</script>

<h1>Dr. Hornswiggle's Trancendental Ideations Generator</h1>
<input type="submit" value="Additional Ideation" class="purpleButton" onclick="newItem()">

<ul id="list">
    <li>{{ item }}</li>
</ul>

{% include 'footer.html' %}