JSFiddle - React, Tailwind, and code Playground

by NickJosevski

HTML

<form action="/Activity/Create" method="post">    <fieldset>
        <legend>Activity</legend>
        <div id="last-action" 
            style="float:right; margin-right:50px; height:200px; width:200px; background-color:#C0504D; color:white">Status:</div>
        <div class="editor-label">
            <label for="Deadline">Deadline</label>
        </div>
        <div class="editor-field">
            <input class="t-b s-l" data-val="true" 
                data-val-required="The Deadline field is required." 
                id="Deadline" name="Deadline" type="text" value="" />
            <span class="f-v-v" data-valmsg-for="Deadline" data-valmsg-replace="true"></span>
        </div>
        <div class="editor-label">
            <label for="Name">Name</label>
        </div>
        <div class="editor-field">
            <input class="t-b s-l" id="Name" name="Name" type="text" value="" />
            <span class="f-v-v" data-valmsg-for="Name" data-valmsg-replace="true"></span>
        </div>
        <div class="editor-label">
            <label for="Field3">Field3</label>
        </div>
        <div class="editor-field">
            <input class="t-b s-l" id="Field3" name="Field3" type="text" value="" />
            <span class="f-v-v" data-valmsg-for="Field3" data-valmsg-replace="true"></span>
        </div>
        <div class="editor-label">
            <label for="Field4">Field4</label>
        </div>
        <div class="editor-field">
            <input class="t-b s-l" data-val="true" 
                data-val-number="The field Field4 must be a number." 
                data-val-required="The Field4 field is required." id="Field4" 
                name="Field4" type="text" value="" />
            <span class="f-v-v" data-valmsg-for="Field4" data-valmsg-replace="true"></span>
        </div>
        <div class="editor-label">
            <label for="Field5">Field5</label>
        </div>
        <div class="editor-field">
            <input class="t-b s-l"...

JavaScript

function startCountDownAndSendData(data, waitDuration) {
      
    function go(){
        if(waitDuration <= 0)
        {
            //$(data).when($('#last-action').append('sent ' + data.val()))
            $('#last-action').append('<br />sent ' + data.val());
            return;
        }
        waitDuration--;
        setTimeout(go, 1e3);
    }
    go();
}

(function($) {
    
    $('#Deadline').focusout(
        function() { 
            startCountDownAndSendData($(this), 5);
        }
    );
})(jQuery);


/*

1. On lost focus
2. a) b) Function that counts down, (need to reset countdown if it get edited again)
3. End of count down, send of request (when...)
4. Receive request (...then)

*/

function makeRed($, i) {
    $(i).css('backgroundColor', '#f00');
}