{% extends "base.html" %}

{% block main_content %}
<h1>Hello!</h1>

<p>This app computes elements of the Collatz sequence using Ajax. Use a url like <a href="{{ url_for('getCollatz', num=50 ) }}">{{ url_for('getCollatz', num=50 ) }}</a></p>

<form>
    <p><label for="form-num">Form Number: <input type="text" name="num" id="form-num"></label></p>
    <p><input type="button" id="btn-submit" value="submit"></p>
</form>

<p>Click on the list items to append the next value!</p>

<ul id="collatzNumbers"></ul>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script id="collatz-script">
var URL = {{url_for('getCollatz')}};

function addToList(obj) {
    $("<li>")
        .attr("data-num",obj.out)
        .text("the number "+obj.in+" produces "+obj.out)
        .appendTo("#collatzNumbers");
}

addToList({in: 50, out: 25});        
addToList({in: 27, out: 82});        

function sendNum(num) {
    $.get(URL,{num: num},addToList);
}        

$("#btn-submit").on("click", function () {
    var num = $("#form-num").val();
    sendNum(num);
});

$("#collatzNumbers").on("click","[data-num]",function(event) {
        var num = $(this).attr("data-num");
        console.log("Sending "+num+" to the back end");
        sendNum(num);
        });
</script>

<p>Here's the JS/JQ code to do the front-end work. Try them in the JS console.</p>

<pre id="collatz-pre" style="color: blue"></pre>

<script>
    document.getElementById('collatz-pre').textContent =
    document.getElementById('collatz-script').textContent;
</script>

{% endblock %}