JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<p>This is just a snippet of the code so the actual result won't be visible, but here is what happens. It would be unnecessary to have the Timeline constantly reaching to the server to update. Instead there is a JSON_Model object that maintains contact with the server, and sends information to the visual Timeline when there is something worth sending. This is accomplished by having the Model have a callback function from each Timeline element, that it can send the data through. The menu bar has a '+' button, when you click on it, a new Timeline element is created. When that element is created, it sends a new callback function to the Model along with a unique id so that it will be the only one to get its information.</p>I am using the term socket, though the structure may not exactly fit that definition.
<p>socket_id is used to keep track of how many Timeline elements have been created. With this we can simply insure that each Timeline element has a unique ID. The problem is if I passed socket_id along with every callback, everyone would have the same ID. Instead, I create a new element_id inside of the add_timeline_element, which is then sent and is able to maintain its uniqueness.</p>

JavaScript

var JSON_Model = (function () {
    var question_sockets = {};
    return {
        create_socket_for_questions: function (id, controller_callback) {
            question_sockets[id] = controller_callback;
            update_controller();
        }
    }
}

var socket_id = 0;
function add_timeline_element() {
    var element_id = ++socket_id;
    var pulled_question_content = JSON_Model.create_socket_for_questions(element_id,

    function (new_content) {
        for (var title in new_content) {
            var list_elem = $('<li />', {
                class: pulled_content,
                text: title
            });
            $("#" + element_id).append(list_elem);
        }
    });
}



//MAIN MENU
//TIME LINE CREATION BUTTON
var add_element_button = $("<button />", {
    text: '+',
    click: add_timeline_element,
    class: "add_button t_intect_button"

});