Notes

A web notes app using jquery Tabs, similar to the Notes App of MAC OS X

by Ange Loron

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<button class="notes">NOTES</button><br><br>
<div id="notes">
<div class='header'>
<div class='closenote'></div>
<div class='minusnote'></div>
<div class='movenote'></div>
<div>
<button id="add_tab"><img src="https://www.dropbox.com/s/jk37bzyoxdcac88/addnote.png?raw=1"></button>
</div>
</div>
<div id="tabs" name="tabs">
  <ul>
    <li>
    <a href="#tabs-0"></a> <span class="" role="presentation"></span>
    </li>
  </ul>
  <div id="tabs-0">
  </div>
</div>
</div>

CSS

#notes {
 position: fixed;
 display: none;
 background-color: #fff;
 background-image: linear-gradient(90deg, transparent 200px, #abced4 200px, #abced4 202px, transparent 202px), linear-gradient(#eee .1em, transparent .1em);
 background-size: 100% 1.65em;
 border: 1px solid black;
 width: 740px;
 border-radius: 10px;
}
#tabs-0 {
 width: 20px;
 height: 400px;
}
#tabs textarea {
 background: transparent;
 width: 500px;
 height: 382px;
 border: 0;
 overflow:auto;
 outline: none;
 resize: none;
 padding-top: 0.7em;
 line-height: 1.5em;
 font-size: 1em !important;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
}
#tabs {
 background: transparent;
 width: 740px;
 padding:0;
 outline: none;
}
#tabs div {
 width: 500px;
}
#tabs .ui-tabs-nav {
 border: 0px;
 background: transparent;
 width: 178px;
 top: 0;
}
#tabs ul {
 margin-left: 15px;
}
#tabs li { 
 margin: 0;
 width: 10em;
 border: 0;
 background: transparent;
 outline: none;
 height: 1em;
 margin: 0.1em 0 0.4em 0;
} 
#tabs li a {
 padding: 0;
 width: 65%;
 color: black;
 overflow-x: hidden;
 outline: none;
}
#tabs li a:focus {
 outline: none;
}
#tabs li input {
 border: 0px;
 background: transparent;
 outline: none;
}
#tabs li .ui-icon-close {
 float: left;
 cursor: pointer;
 border-radius: 50%;
 margin-left: 8px;
 margin-top: 3px;
}
#tabs li:hover .ui-icon-close {
 background-color: #abced4; 
}
.header {
 display: flex;
 width: 100%;
 background-color: #fff;
 background-image:   linear-gradient(90deg, transparent 200px, #abced4 200px, #abced4 202px, transparent 202px);
 background-size: 100% 1.65em;
 height: 52px;
 border-radius: 10px;
}
#add_tab {
 cursor: pointer;
 padding: 5px 5px 5px 5px;
 margin-left: 217px;
 margin-top: 13px;
}
.ui-tabs-vertical {
 width: 55em;
}
.ui-tabs-vertical .ui-tabs-nav {
 padding: .2em .1em .2em .2em;
 float: left;
 width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
 clear: left;
 width: 100%;
...

JavaScript

// HTML 5 local storage --- THAT'S MY PROBLEM!!!!
$(document).ready(function() {
 $(window).unload(saveSettings);
 loadSettings();
});
function saveSettings() {
 localStorage.notes = $('#notes').html();
}
function loadSettings() {
 $('#notes').html(localStorage.notes);
}




$('.notes').click(function() {
 $("#notes").toggle('fade');
});
$('.closenote').click(function() {
 $("#notes").toggle('fade');
});
$('.minusnote').click(function() {
 $("#notes").toggle('fade');
 $("#notes").css('width','50px');
 $("#notes").css('height','30px');
 $("#notes").css('bottom','0');
$("#notes").css('right','0');
});
$( function() {
$( "#notes" ).draggable();
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
var tabTitle = $( "#tab_title" ),
      tabContent = $( "#tab_content" ),
      tabTemplate = "<li><a href='#{href}'><input type='text' value='#{label}'></a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
      tabCounter = 1;
 
    var tabs = $( "#tabs" ).tabs();
 
    // Modal dialog init: custom buttons and a "close" callback resetting the form inside
    var dialog = $( "#dialog" ).dialog({
      autoOpen: false,
      modal: true,
      resizable: false,
      dialogClass: "dialog",
      buttons: {
        Add: function() {
          addTab();
          $( this ).dialog( "close" );
        },
      },
      close: function() {
        form[ 0 ].reset();
      }
    });

    // AddTab form: calls addTab function on submit and closes the dialog
    var form = dialog.find( "form" ).on( "submit", function( event ) {
      addTab();
      dialog.dialog( "close" );
      event.preventDefault();
    });
 
    // Actual addTab function: adds new tab using the input from the form above
    $("#add_tab").click(function addTab() {
      var label = tabTitle.val() || "Note " + tabCounter,
        id = "tabs-" + tabCounter,
        li = $(...