Помогите подлючить к LocalStorage (js)

Проблема в том,что нужно при перезагрузке страницы сохранять создание заметки(левый верхний угол)
Вот код на JavaScript

var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => { 
  var noteCount = 0;
  var activeNote = null;
document.querySelector('#btn-save').addEventListener("click", () => {
    var title = document.getElementById('title-field').value;
    var body = document.getElementById('body-field').value;
    if (title === '' && body === '') {
      alert ('Please add a title or body to your note.');
      return;
    }
    var created = new Date();
    var color = document.querySelector("notepad");
    color.style.backgroundColor = "white";
    var id = noteCount + 1;
    if (activeNote) {

       const note = document.getElementById(activeNote)
  note.children[0].innerHTML = title;
  note.children[1].innerHTML = created.toLocaleString("en-US");
  note.children[2].innerHTML = body;
  note.style.backgroundColor = color;
  activeNote = null;
        var box = document.querySelector('#edit-mode');
        box.classList.remove('display');
        box.classList.add("no-display");

    } else {
      var created = new Date();
       const listed = document.getElementById("listed");
        listed.innerHTML = listed.innerHTML + '<div id="note' + id  + '"><div class="list-title">' + title + '</div> <div class="list-date">' + created.toLocaleString("en-US") + '</div> <div class="list-text">' + body + '</div> </div>';
      noteCount++;
    };

     document.getElementById('title-field').value = ''
      document.getElementById('body-field').value = ''
  });

document.querySelector('#btn-delete').addEventListener("click", () => {
    if (activeNote) {
      let note = document.getElementById(activeNote);
  note.parentElement.removeChild(note);
      activeNote = null;
      var box_2 = document.querySelector('#edit-mode');
        box_2.classList.remove('display');
        box_2.classList.add("no-display");
    }
    document.getElementById('title-field').value = ''
      document.getElementById('body-field').value = ''

  });

    document.querySelector('#listed').addEventListener("click", (e) => { 
    var id = e.target.parentElement.id;
    var color = e.target.parentElement.style.backgroundColor;
    activeNote = id;
    var box_1 = document.querySelector('#edit-mode');
        box_1.classList.remove('display');
        box_1.classList.add("no-display");
    var titleSel = document.querySelectorAll('#' + id)[0].children[0].innerHTML;
    var bodySel = document.querySelectorAll('#' + id)[0].children[2].innerHTML;
    document.getElementById('title-field').value = titleSel;
    document.getElementById('body-field').value = bodySel;;

  })

});

HTML

<<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title></title>
    <link rel='stylesheet' href='main.css'>
  </head>
  <body>
    <header>
      The Note Machine

    </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='Code.js'></script>
</html>

Css

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-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;
}

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

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

.lavendar {
  background-color: #D687FC;
}
[email protected] 21.09.2020 в 12:33

Ответы (0)


Добавить новый ответ