JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<h1>localStorage Demo</h1>
<div id="dlArea">
  <h2>json type zip download</h2>
  <p><a id="ziplink" href="#">download</a><br/>Alt+Click</p>
</div>
<form action="javascript:void(0);" method="post">
  <div id="info">add your todo items and download after</div>
  <dl>
    <dt>Title</dt>
    <dd><input type="text" id="todo_title" name="todo" value=""/></dd>
    <dt>Message</dt>
    <dd><textarea  id="todo_msg" name="todo"></textarea></dd>
    <dt>Buttons</dt>
    <dd><input type="button" id="todo_submit" name="todo_submit" value="submit"/>
        <input type="button" id="todo_allclear" name="todo_allclear" value="all clear"/></dd>
    <dt>Result</dt>
    <dd id="result"></dd>
  </dl>
</form>

CSS

body { background-color: #DDDDDD; font: 12px sans-serif; }
#dlArea{
  position:absolute;
  top:5px;
  right:5px;
  width:150px;
  padding:5px 0px 0;
  background:#fff;
  color:#333;
  text-align:center;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
#dlArea h2{
  font-size:12px;
  margin:0;
  padding:0;
}
#ziplink{
  display:inline-block;
  padding:5px 10px;
  margin-bottom:10px;
  color:#fff;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  background: #539e01;
  background: -moz-linear-gradient(top, #a1e649, #539e01);
  background: -webkit-gradient(linear, left top, left bottom, from(#a1e649), to(#539e01));
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#a1e649,EndColorStr=#539e01);
  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
#ziplink:hover{
  background: #a1e649;
  background: -moz-linear-gradient(top, #539e01, #a1e649);
  background: -webkit-gradient(linear, left top, left bottom, from(#539e01), to(#a1e649));
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#539e01,EndColorStr=#a1e649);
}

#info{
 width:262px;
 border:1px solid #333;
 padding:5px;
}

input[type=text],
textarea{
  width:100%;
}
table {
  width:100%;
  border-collapse:collapse;
  border-top:1px solid #000;
  border-left:1px solid #000;
}
table th{width:30%;}
table td:nth-child(2){width:50%;}
table td:nth-child(3){width:20%;}
table td,table th{
  padding:0px 5px;
  border-bottom:1px solid #000;
  border-right:1px solid #000;
}
dt{
  border-bottom:1px solid #fff;
  padding-bottom:2px;
  margin-bottom:5px;
}
dd{
  padding-bottom:5px;
}

JavaScript

/*
 * localStorage
 */
var model = {
  id : "diary",
  serialize : function(){
    return JSON.stringify(this);
  },
  deserialize : function(jsonstr){
    var data = eval("(" + jsonstr + ")");
    for(var key in data){
      this[key] = data[key];
    }
    return this;
  }
};
$(function(){
  loadlib();
  var storage = window.localStorage;
  if(storage){
    var jsonStr = storage.getItem(model.id);
    var jsonObj = model.deserialize(jsonStr);   
    if(!jsonObj.data){ jsonObj.data={}; }
    if(!jsonObj.data.items){ jsonObj.data.items=[]; }
    createTable(jsonObj.data);
    var todo_submit = $("#todo_submit");
    var todo_title = $("#todo_title");
    var todo_msg = $("#todo_msg");
    var todo_allclear = $("#todo_allclear");
    var info = $("#info");
    todo_submit.click(function(){todoSet();});
    todo_allclear.click(function(){todoAllClear();});
  }
  // create table
  function createTable(json){
    var result = $("#result");
    var html = [];
    if(json.items.length>0){
      //download zip file
      $("#dlArea").show();
      var zip = new Zip;
      zip.addString(model.serialize(), 'diary.json');
      var dataURI = zip.getDataURI();
      $("#ziplink").attr("href",dataURI);
      //create html
      html.push('<table>');
      html.push('<thead><tr><th>title</th><td>message</td><td>timestamp</td></tr></thead>');
      html.push('<tbody>');
      for(var i=0;i<json.items.length;i++){
        html.push('<tr id="local_strage_'+model.id+'_'+i+'">');
        html.push('<th>'+json.items[i].title+'</th>');
        html.push('<td>'+json.items[i].msg+'</td>');
        html.push('<td>'+json.items[i].date+'</td>');
        html.push('</tr>');
      }
      html.push('</tbody>');
      html.push('</table>');
      result.html(html.join('\n'));
    }else{
      $("#dlArea").hide();
      result.html("feeling empty");
    }
  }
  // clear
  function todoAllClear(){
    model.data.items = [];
    storage.setItem(model.id,model.serialize());
   ...