1

I have just found a set of codes that fits my need right now for my blog.

Here I'll attach the code and a glimpse of what it looks like. Although It's still very simple.

What I want to ask is if it's possible to tweak these code possible using JS localstorage, so that it will keep all the saved text even after the user refresh the page, or even better if it stays there even after a user closed the window and reopened it later?

Here's what it looks like right now

enter image description here

and here is the code:

$(document).ready(function(){

  var noteCount = 0;
  var activeNote = null;

  $('.color-box').click(function(){
    var color = $(this).css('background-color');
    $('notepad').css('background-color', color);
    $('#title-field').css('background-color', color);
    $('#body-field').css('background-color', color);
  })

  $('#btn-save').click(function(){
    var title = $('#title-field').val();
    var body = $('#body-field').val();
    if (title === '' && body === '') {
      alert ('Please add a title or body to your note.');
      return;
    }
    var created = new Date();
    var color = $('notepad').css('background-color');
    var id = noteCount + 1;
    if (activeNote) {
      $('#' + activeNote)[0].children[0].innerHTML = title;
      $('#' + activeNote)[0].children[1].innerHTML = created.toLocaleString("en-US");
      $('#' + activeNote)[0].children[2].innerHTML = body;
      $('#' + activeNote)[0].style.backgroundColor = color;
      activeNote = null;
      $('#edit-mode').removeClass('display').addClass('no-display');
    } else {
      var created = new Date();
      $('#listed').append('<div id="note' + id + '" style="background-color: ' + color + '"><div class="list-title">' + title + '</div> <div class="list-date">' + created.toLocaleString("en-US") + '</div> <div class="list-text">' + body + '</div> </div>');
      noteCount++;
    };
    $('#title-field').val('');
    $('#body-field').val('');
    $('notepad').css('background-color', 'white');
    $('#title-field').css('background-color', 'white');
    $('#body-field').css('background-color', 'white');
  });

  $('#btn-delete').click(function(){
    if (activeNote) {
      $('#' + activeNote)[0].remove();
      activeNote = null;
      $('#edit-mode').removeClass('display').addClass('no-display');
    }
      $('#title-field').val('');
      $('#body-field').val('');
      $('notepad').css('background-color', 'white');
      $('#title-field').css('background-color', 'white');
      $('#body-field').css('background-color', 'white');
  });

  $('#listed').click(function(e){
    var id = e.target.parentElement.id;
    var color = e.target.parentElement.style.backgroundColor;
    activeNote = id;
    $('#edit-mode').removeClass('no-display').addClass('display');
    var titleSel = $('#' + id)[0].children[0].innerHTML;
    var bodySel = $('#' + id)[0].children[2].innerHTML;
    $('#title-field').val(titleSel);
    $('#body-field').val(bodySel);
    $('notepad').css('background-color', color);
    $('#title-field').css('background-color', color);
    $('#body-field').css('background-color', color);
  })

})
header {
  text-align: left;
  font-weight: 800;
  font-size: 28px;
  border-bottom: solid 3px #DEDEDE;
  display: flex;
  justify-content: space-between;
}

footer {
  display: flex;
  flex-flow: row-reverse;
  padding: 5px 20px;
}

.headers {
  margin-top: 20px;
  margin-bottom: -10px;
  font-size: 20px;
}

#list-head {
  margin-left: 2.5%;
  width: 30.5%;
  display: inline-block;
  text-align: center;
}

#note-head {
  width: 60%;
  margin-left: 5%;
  display: inline-block;
  text-align: center;
}

noteList {
  margin-top: 20px;
  display: inline-block;
  margin-left: 2.5%;
  width: 30.5%;
  height: 400px;
  overflow: scroll;
  border: solid 3px #929292;
  border-radius: 5px;
  background-color: #DEDEDE;
}

.within-list {
  cursor: pointer;
}

.list-title {
  font-weight: 600;
  font-size: 20px;
  padding: 5px 5px 0 5px;
}

.list-date {
  font-weight: 200;
  font-style: italic;
  font-size: 12px;
  padding: 0 5px 0 5px;
}

.list-text {
  padding: 0 5px 5px 5px;
  border-bottom: solid 1px black;
}

notePad {
  display: inline-block;
  border: solid 3px black;
  border-radius: 10px;
  height: 400px;
  overflow: scroll;
  width: 60%;
  margin-left: 5%;
  margin-top: 0;
}

#note-title {
  font-size: 24px;
  padding: 0 0 5px 5px;
  border-bottom: solid 2px #DEDEDE;
}

#note-body {
  padding: 5px;
}

#body-field, #title-field {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
}

#title-field {
  font-size: 18px;
  font-weight: 600;
}

#body-field {
  font-size: 14px;
  font-weight: 500;
  height: 400px;
}

#color-select {
  display: flex;
  flex-flow: row-reverse nowrap;
  padding: 5px 10px 0 0;
}

.color-box {
  border: solid 2px #929292;
  height: 10px;
  width: 10px;
  margin-left: 5px;
}

.display {
  display: visible;
}

.no-display {
  display: none;
}

button {
  margin: 5px;
  border: solid 3px grey;
  border-radius: 10%;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  color: #DEDEDE;
}

button:hover, .color-box:hover {
  cursor: pointer;
}

#listed:nth-child(odd):hover {
  cursor: pointer;
}

#btn-save {
  background-color: #2F5032;
}

#btn-delete {
  background-color: #E41A36;
}

.white {
  background-color: white;
}

.orange {
  background-color: #FFD37F;
}

.banana {
  background-color: #FFFA81;
}

.honeydew {
  background-color: #D5FA80;
}

.flora {
  background-color: #78F87F;
}

.aqua {
  background-color: #79FBD6;
}

.ice {
  background-color: #79FDFE;
}

.sky {
  background-color: #7AD6FD;
}

.orchid {
  background-color: #7B84FC;
}

.lavendar {
  background-color: #D687FC;
}

.pink {
  background-color: #FF89FD;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title></title>
    <link rel='stylesheet' href='style.css'>
  </head>
  <body>
    <header>
      The Note Machine
      <div id='color-select'>
        <div class='color-box white'></div>
        <div class='color-box orange'></div>
        <div class='color-box banana'></div>
        <div class='color-box honeydew'></div>
        <div class='color-box flora'></div>
        <div class='color-box aqua'></div>
        <div class='color-box ice'></div>
        <div class='color-box sky'></div>
        <div class='color-box orchid'></div>
        <div class='color-box lavendar'></div>
        <div class='color-box pink'></div>
      </div>
    </header>
    <main>
      <div class="headers">
        <div id="list-head">
          <b>Your Notes</b> <i>(click to edit/delete)</i>
        </div>
        <div id="note-head">
          <b>Your Notepad</b>
          <span id="edit-mode" class="no-display">
            <i> (edit mode) </i>
          </span>
        </div>
      </div>
      <noteList>
        <div id='listed'>
        </div>
      </noteList>
      <notepad>
        <div id="note-title">
          <input id="title-field" type="text" placeholder="title your note">
        </div>
        <div id="note-body">
          <textarea id="body-field"></textarea>
        </div>
      </notepad>
    </main>
    <footer>
      <button id="btn-save">Save</button>
      <button id="btn-delete">Delete / Clear </button>
    </footer>
  </body>
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
  <script type='text/javascript' src='app.js'></script>
</html>

I tried searching in the net for other notepads, but they aren't working on my blog, and here's the one that is finally working. I would really appreciate any kind of suggestions and assistance. T

Shawn
  • 1,232
  • 1
  • 14
  • 44
ivmaxifa
  • 53
  • 7
  • you will have to use AJAX and mysql to work togather so that when user types something AJAX sends the data from textarea to mysql database –  Feb 24 '20 at 04:53
  • 1
    I am assuming you mean 'before' the user saves the note by explicitly clicking the save button you want to keep the note saved in local storage so user can continue editing even after refresh or reopening the window? – Nawed Khan Feb 24 '20 at 05:02
  • `localStorage.propertyHere = 'value here is string';` – StackSlave Feb 24 '20 at 05:49

3 Answers3

0

If all you want to do is save to LocalStorage when save is clicked, then it would be as simple as saving the title and body variables to LocalStorage in the $('#btn-save').click() handler.

Assuming that (as @Nawed Khan guessed) you want to have the note saved without the user having to click save, then you'll want to make three changes:

  1. In the main body of your $(document).ready() function, check for existing LocalStorage values, and if they exist, then set them on your $('#title-field') and $('#body-field') elements.

  2. Add two new change handlers to your $('#title-field') and $('#body-field') elements. When these change handlers fire, get the title and body values from the elements and save them to LocalStorage.

  3. In the $('#btn-save').click() and $('#btn-delete').click() handlers, reset the LocalStorage values of the active note.

You should find these links useful:

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

https://api.jquery.com/change/

P.S. The information stored in LocalStorage can be lost if the user chooses to clear their browser data. If preservation of the data is vital, then implementing a solution using AJAX to connect to a database as @The Rahul Jha suggested would guarantee preservation of the data.

JoshuaCWebDeveloper
  • 585
  • 5
  • 16
0

Yes , You can save the data in localStorage and fetch the data on page load. To set the localStorage item add below function in your script which is setting the item on keyup of textarea in localstorage.

$(document).on("keyup","#body-field",function(){
 var text = $("#body-field").val();
  localStorage.setItem("savedData", text);
});

Add below method to fetch the data from local storage 

function loadDataFromLocalStorage(){
     if (localStorage.getItem("savedData") !== null) {
      $("#body-field").val(localStorage.getItem("savedData"))
     }
    }

And at last call the above method in $(document).ready() or page load to set the data back in text area after page load.

Abhishek
  • 972
  • 3
  • 12
  • 24
0

Put this inside the $(document).ready block:

$(“#title-field”).val(window.localStorage.getItem(“title”) || “”);
$(“#body-field”).val(window.localStorage.getItem(“body”) ||  “”);

$(“#title-field, #body-field”).change(function() {
  var title = $(“#title-field”).val();
  var body = $(“#body-field”).val();

  window.localStorage.setItem(“title”, title);
  window.localStorage.setItem(“body”, body)
})

The 2 first lines will load the text from the localStorage and sets the data on the corresponding inputs

The rest of the code is the part where the data is being saved to localStorage every time the value of #title-field OR #body-field changes.

Sebastián Espinosa
  • 2,123
  • 13
  • 23