JSFiddle - React, Tailwind, and code Playground

by Tistklehoff

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div>
<p>
  goal: <input type="text" name="goal" data-bind="value:newGoalText"/>
</p>
<p>
  text: <input type="text" name="text" data-bind="value:newTypeText"/>
</p>
<p>
  date: <input type="text" name="date" data-bind="value:newDateText"/>
</p>
<p>
<button type="button" data-bind="click: addTask">
Add task
</button>
</p>
</div>
<div>
  <ul data-bind="foreach: tasks">
    <li data-bind="text: goal() + ' - ' + type() + ' - ' + date()"></li>
  </ul>
</div>

JavaScript

$(document).ready(function(){

    function Task(data){
    		var self=this;
        self.goal=ko.observable(data.goal);
        self.type=ko.observable(data.type);
        self.date=ko.observable(data.date);
        console.log("Data"+ " " + data.goal);
    }



    var myViewModel=function(tasks){
        var self=this;
        self.tasks=ko.observableArray([new Task({goal:"abc", type:"Intermediate", date:"12/13/1122"})]);
        self.newGoalText=ko.observable("");
        self.newTypeText=ko.observable("");
        self.newDateText=ko.observable("");


        self.addTask=function(){
            self.tasks.push(new Task({
            	goal:self.newGoalText(),
              type:self.newTypeText(), 
              date:self.newDateText()
             }));

            console.log(self.tasks);

        self.newGoalText("");
        self.newTypeText("");
        self.newDateText("");


    }//addTask function

    }//viewModel


    ko.applyBindings(new myViewModel())

});