JSFiddle - React, Tailwind, and code Playground

by Shidhin C R

HTML

<div id="controls">
    <input type="text" id="txtTask" value="" />
    <input type="button" id="addTask" value="Add task" />
</div>
<div id="main">
</div>

CSS

.open,.completed {
    color: green;
    cursor: pointer;
}
.completed {
    text-decoration: line-through;
}
#main ul li {
    text-transform: capitalize;
    list-style: decimal;
    margin-left: 20px;
}
#main,#controls {
    background-color: #eee;
    width: 500px;
    padding: 10px;
    margin: auto;
}
#controls {
    border-bottom:1px dashed black;
}

JavaScript

(function($){
    
    window.TaskManager = {};

    var Event = TaskManager.Event = function(eventname,ctx){
        this.eventName = eventname;
        this.ctx = ctx || window;
        this.subscribers = [];(function($){
    
    window.TaskManager = {};

    var Event = TaskManager.Event = function(eventname,ctx){
        this.eventName = eventname;
        this.ctx = ctx || window;
        this.subscribers = [];
    };
    Event.prototype = {
        constructor: Event
        ,attach: function(handler,ctx){
            this.subscribers.push({
                ctx: ctx,
                handler:handler
            });
        }
        ,notify: function( data ){
            $(this.subscribers).each(function(){
                this.handler.call(this.ctx , data);
            });
        }
    };

    TaskManager.Task = function(t){
        var me = this;
        this.text = t.text || "";
        this.completed = t.completed || false;
        this.onchanged = new Event("change",this);
    };

    var TaskController = TaskManager.TaskController = function(task){
        this._task = task;
    };
    TaskController.prototype = {
         constructor : TaskController
        ,setText : function( text ) {
            this._task.text = text || this._task.text;
            this._task.onchanged.notify();
        }
        ,setCompleted : function( complete ) {
            this._task.completed = complete;
            this._task.onchanged.notify();
        }
        ,isCompleted : function(){
            return this._task.complete;
        }
    };
    var TaskView = TaskManager.TaskView = function( model , controller , elements ){
        this._model = model;
        this._ctr = controller;
        this._elements = elements;
        this.renderView();
        this._model.onchanged.attach(this.onmodelChange,this);
    };
    TaskView.prototype = {
        constructor: TaskView
        ,renderView :  function(){
            this.elem = this.getTaskElem();
           ...