Sticky notes with local storage

Question

I am using this codepen https://codepen.io/ravitadi/pen/CsIFL and I would like to add another field for the user to input a title for the note.

I am a javascript noobie and I can't seem to get it right. This is the function for adding notes. The full script is in the codepen .

function addNote(){
     var usrInput = $('.txtBox').val();
     //console.log(usrInput);

    if(usrInput.length > 0){
        console.log($(this));
        $('#').removeClass('ntActv');
        addtoSticky(usrInput);
        cnclOvrly();
        //console.log(notes);
    }else{

    }
}


function addtoSticky(note){
    if(note.length > 0){
        console.log(note);
        createSticky(note);
        localStorage.setItem('note_'+note.length, note);
    }
}

function createSticky(text){
    $('#stkyNts').append('<li class="box">'+text+'</li>');
}

Any help is highly appreciated.

Codepen

Answer 1

In the modal, add another text box for title before the textarea.

<!-- add this -->
<input type="text" id="title" />
<!-- /add this -->
<textarea class="txtBox"></textarea>

Now you have to grab the value from the title. In the createSticky() function:

function createSticky(text) {
  var heading = $("#title").val();
  $('#stkyNts').append('<li class="box"><h3>' + heading + '</h3>'+text+'</li>');
}

And there you go:

For the extended functionality, try to change the way, heading is included in the local storage while setting and getting it. For doing so, you need to include the heading in the functions addtoSticky() and getStoredNotes() .

Answer 2

I tried to update following your requirement.

You should change way to save object and load object from localstorage.

storedNotes = JSON.parse(localStorage.getItem("notes"));

if(current == null) current = [];
        current.push(JSON.stringify(note));
        localStorage.setItem('notes', JSON.stringify(current));

https://codepen.io/viethien/pen/RdqKxM