JSFiddle - React, Tailwind, and code Playground

by taylorRichie

HTML

<script src="http://modernizr.com/downloads/modernizr-2.0.6.js"></script>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  
  <!--<link rel="stylesheet" href="css/style.css">-->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  
  <!--<script src="js/libs/modernizr-2.5.3.min.js"></script>-->
</head>
<body>
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

        <div data-role="page" id="Main">
            <div data-role="content">
                <h1>
                    funkyOrganizer
                </h1>
                <a data-role="button" data-transition="slide" href="#Personal" data-icon="star" data-iconpos="left">
                    Personal
                </a>
                <a data-role="button" data-transition="slide" href="#Home" data-icon="home" data-iconpos="left">
                    Home
                </a>
                <a data-role="button" data-transition="slide" href="#Work" data-icon="gear" data-iconpos="left">
                    Work
                </a>
                <a data-role="button" data-transition="slide" href="#Study" data-icon="info" data-iconpos="left">
                    Study
                </a>
                <a data-role="button" data-transition="slide" href="#Shopping"...

JavaScript

$(document).ready(function(){
     /*   
     if (Modernizr.localstorage) {
              var localStorage = window.storage;
        } else {
              alert('Your browser does not support local storage!');
        }
        */
        $('#submitPersonal').click(function(){
            var personalName = $('#personalNameInput').val();
            var personalNote = $('#personalNoteInput').val();
            var personalDate = $('#personalDateInput').val();
        
            var lsLength = localStorage.length;
        
            localStorage.setItem('personal' + lsLength, JSON.stringify({name: personalName, note: personalNote, date: personalDate}));
        });
        
        $('#showPersonal').live('pageshow', function(event, ui){
            window.location.reload(true);
        });
        
        $('#clearPersonal').click(function(){
            localStorage.clear();        
        });
        
        $("a[id^=doneItem]").click(function(){
                var index = $(this).attr("id").replace("doneItem", "");                
                var item = 'personal' + index;
                localStorage.removeItem(item);
                window.location.reload(true);
        });
    });