JSFiddle - React, Tailwind, and code Playground

by brantolsen

HTML

<!doctype html>
<html>
    <head>
        <title>TODO</title>
        <meta charset="utf-8">

<link href='http://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'>


    </head>
    <body>

        <div id="container">
        <header>
            <h1> Todo App</h1>
        </header>
        
        <section id="main-content">
          <div class="form-area">

            <form id="tasks-form">
              <label for="task">Enter a note  </label>

              <input id="task" type="text" placeholder='enter a note!'>

              <div class="select-box">
                <select id="color">
                  <option value="white">Choose your :</option>
                  <option value="#fe3015">red</option>
                  <option value="#ea8916">Orange </option>
                  <option value="#2dea55">green</option>
                </select>
              </div>

              <input value="Send!" type="submit"/>

            </form>

          </div>
        
          <ul id="tasks"></ul>
          
           <input type="submit" class='clear' value="clear all">

        </section>
     
    </div>

    </body>
</html>
<!doctype html>

CSS

*{
    padding:0;
    margin:0;
}


body{
    color:#666666;  
    font-size:16px; 
    background-color: #3D3D3D;
    font-family: arial;

}

    ul, li{
        list-style:none;
    }


    #container{
        width:30%;
        margin:5% auto;
        border:1px solid #e1e1e1;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;

        background-color: #E9EAEE
    }

    header{
        width: 99%;
        height:60px;

        background: rgb(147,206,222); /* Old browsers */
        background: -moz-linear-gradient(top,  rgb(147,206,222) 0%, rgb(148,205,221) 43%, rgb(66,155,170) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(147,206,222)), color-stop(43%,rgb(148,205,221)), color-stop(100%,rgb(66,155,170))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgb(147,206,222) 0%,rgb(148,205,221) 43%,rgb(66,155,170) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgb(147,206,222) 0%,rgb(148,205,221) 43%,rgb(66,155,170) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgb(147,206,222) 0%,rgb(148,205,221) 43%,rgb(66,155,170) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgb(147,206,222) 0%,rgb(148,205,221) 43%,rgb(66,155,170) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#429baa',GradientType=0 ); /* IE6-9 */
      
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

        border:2px solid #fff;

        color:#fff;
        font-family: 'Advent Pro', sans-serif;

    }


        h1{
         text-align: center;
         text-transform: uppercase;
           
        }


    #main-content{}

  ...

JavaScript

jQuery(document).ready(function() {

  // Initial loading of tasks
  var i = 0;

    // clear All

  jQuery('.clear').on('click',function(e){

    e.preventDefault();
    jQuery('#tasks li').remove();
    localStorage.clear();
    jQuery(this).data('erase', true);
    i = 0;

  });

 
  if(localStorage.length){  
     for( i = 0; i < localStorage.length; i++){ 

        var lsReturn = JSON.parse(localStorage.getItem('task-'+i));
         
        if (lsReturn == null){ // HERE IS THE PROBLEM
          var b = 0; //

        }else{
            jQuery("#tasks").append("<li id='task-"+i+"'>" + lsReturn.text  + " <a href='#'>Delete</a></li>");
           jQuery('#tasks li#task-'+i+'').css('background-color', lsReturn.color );

        }

      
     }
        
  }else{

    jQuery('header').after("<p class='error'>Vous n'avez aucune note pour le moment</p>");
        
  }
 
  // ----------------- ADD A TASK ----------------------//

  jQuery("#tasks-form").submit(function() {

    if (jQuery("#task").val() != "" ) {

      jQuery('#task').attr('placeholder', "Enter a note")

      var text = jQuery("#task").val(); 
      var color = jQuery('#color').val(); 

      var allNotes = {}; 
      var note = {}; 

      note.text = text; 
      note.color = color;
      
      allNotes['task-'+i] = note; 
     
      var lsStore = JSON.stringify(allNotes['task-'+i ]);

      localStorage.setItem( "task-"+i, lsStore); 

      var lsStoreReturn = JSON.parse(localStorage.getItem("task-"+i, lsStore)); 

      jQuery("#tasks").append("<li id='task-"+i+"'>"+ lsStoreReturn.text +" <a href='#'>Delete</a></li>"); 
      jQuery('#tasks li#task-'+i+'').css('background-color', lsStoreReturn.color );
      jQuery("#task").val(""); 

      i++; 

    }else{
      
       jQuery('#task').attr('placeholder', "nothing in it !")

    }

    return false; 

  });

  // ----------------- REMOVE A TASK ----------------------//

  jQuery("#tasks li a").live("click", function(e) {

   ...