JSFiddle - React, Tailwind, and code Playground

by marko4286

HTML

<script src="http://datejs.googlecode.com/files/date.js"></script>
<script src="http://knockoutjs.com/js/knockout-2.2.0.js"></script>
<a href="#" id="previous"> << </a>  
        <span id="currentDate"></span>
        <a href="#" id="next"> >> </a>

        <div data-bind="foreach: Blog">
          <ul>
            <li>
             <a>
              <h1><span data-bind="text: naslov"></span></h1>
              <p>
                <span data-bind="text: datum"></span>
                <span data-bind="text: opis"></span>
              </p>
             </a>
            </li>
          </ul>
       </div>

JavaScript

var findDataBlog = ko.observableArray();   

var data = { "Blog": [
     {
       "datum":"24/02/2013",
       "naslov":"Naslov 1", 
       "opis":"Opis 1"
     },
     {
       "datum":"25/02/2013",
       "naslov":"Naslov 2", 
       "opis":"Opis 2"
     }, 
     {
       "datum":"26/02/2013",
       "naslov":"Naslov 3", 
       "opis":"Opis 3"
      }, 
      {
       "datum":"23/02/2013",
       "naslov":"Naslov 4", 
       "opis":"Opis 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].datum == formatCurrentDate()) {
                  output.push(data.Blog[i]);
              }
          }
          return output;
      }

      function showData(test12) {
          var output = 'No data';
          if (test12.length > 0) {
              for(var i in test12) {
             self.findDataBlog.push(test12[i]); 

           }
          }

      }
      function loadData() {
          var test = getDataByCurrentDate();
          showData(test);
          showCurrentDate();
      }

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

      window.onload = function () {
          loadData();

          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;
          };
      };