JSFiddle - React, Tailwind, and code Playground

by marko4286

HTML

<a href="#" id="previous"> << </a>  <span id="currentDate"></span>
 <a href="#"
id="next"> >> </a>
<br />
<span data-bind="visible: findDataBlog().length == 0">no data</span>
<div data-bind="foreach: findDataBlog, visible: findDataBlog().length > 0">
    <ul>
        <li> <a>
              <h1><span data-bind="text: title"></span></h1>
              <p>
                <span data-bind="date: date"></span>
                <span data-bind="text: content"></span>
              </p>
             </a>

        </li>
    </ul>
</div>

JavaScript

var myViewModel = {
    findDataBlog: ko.observableArray()
}
    
ko.applyBindings(myViewModel);

var data = {
    "Blog": [{
        "date": "23/02/2013",
            "title": "Title 1",
            "content": "Text 1"
    }, {
        "date": "24/02/2013",
            "title": "Title 2",
            "content": "Text 2"
    }, {
        "date": "25/02/2013",
            "title": "Title 3",
            "content": "Text 3"
    }, {
        "date": "26/02/2013",
            "title": "Title 4",
            "content": "Text 4"
    }]
};

var current = new Date();

function formatCurrentDate() {
    return ('0' + current.getDate()).slice(-2) + '/' + ('0' + (current.getMonth() + 1)).slice(-2) + '/' + current.getFullYear();
}

function getDataByCurrentDate() {
    var output = [];
    for (var i in data.Blog) {
        if (data.Blog[i].date == formatCurrentDate()) {
        output.push(data.Blog[i]);
        }
    }
    return output;
}

function showData(data) {
    myViewModel.findDataBlog.removeAll() 
    if (data.length > 0) {
        for (var i in data) {
            myViewModel.findDataBlog.push(data[i]);
        }
    }
}

function loadData() {
    var data = getDataByCurrentDate();
    showData(data);
    showCurrentDate();
    console.log(data.length);
}

function showCurrentDate() {
    document.getElementById('currentDate').innerHTML = formatCurrentDate();
}

document.getElementById('next').onclick = function () {
    current.setTime(current.getTime() + 1000 * 60 * 60 * 24);
    loadData();
    return false;
}

document.getElementById('previous').onclick = function () {
    current.setTime(current.getTime() - 1000 * 60 * 60 * 24);
    loadData();
    return false;
}

loadData();