notes-app/script.js at main · bashkatoveugene/notes-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
"use strict";

/* let obj = [
   '12.01.05 31.12.2019': 'dadadas',
   '12.01.05 31.12.2019': 'dadadas',
   '12.01.05 31.12.2019': 'dadadas',
   '12.01.05 31.12.2019': 'dadadas',
   '12.01.05 31.12.2019': 'dadadas',


   1: {text: 'dadadas', time: '12.01.05 31.12.2019'},
   2: {text: 'dadadas', time: '12.01.05 31.12.2019'},
   3: {text: 'dadadas', time: '12.01.05 31.12.2019'},
];
*/

let notes = [];
let textarea = document.querySelector("#textarea");
let list = document.querySelector("#list");
let state = {edit: false, key: undefined};


textarea.addEventListener("blur", function () {
    if (!this.value.trim()) {
    showError("Write something before saving ✍️");
     this.focus();
    return;
  }


  if (state.edit) {
    notes[state.key].text = this.value;
    saveNotes();
    this.value = "";

    state = {edit: false, key: undefined};
  } else {
    let date = new Date();
    let now =
      addZero(date.getHours()) +
      ":" +
      addZero(date.getMinutes()) +
      ":" +
      addZero(date.getSeconds()) +
      " " +
      addZero(date.getDate()) +
      "." +
      addZero(date.getMonth() + 1) +
      "." +
      date.getFullYear();
    notes.push({text: this.value, time: now});
    renderNote(notes[notes.length - 1], notes.length - 1);
    saveNotes();
    this.value = "";
    //  console.log(notes);

  //   let li = document.createElement("li");
  //   li.classList.add("note-enter")
  //   li.dataset.num = notes.length - 1;
  //   li.innerHTML = now;
  //   list.append(li);
  //   let self = this;
  //   li.addEventListener("click", function () {
  //     let num = this.dataset.num
  //     self.value = notes[num].text;

  //   state = {edit: true, key: num};
  //   });
  // }
  }
});

function addZero(num) {
  if (num >= 0 && num <= 9) {
    return "0" + num;
  } else {
    return num;
  }
}

function renderNote(note, index) {
  let li = document.createElement("li");

  li.classList.add("note-enter");
  li.dataset.num = index;
  li.innerHTML = note.time;
  list.append(li);

  li.addEventListener('click', function(){
    textarea.value = notes[index].text;
    state = {edit: true, key: index};
  })
}


  function saveNotes() {
  localStorage.setItem('notes', JSON.stringify(notes));
}

function loadNotes() {
  let data = localStorage.getItem('notes');
  if (!data) return;
  notes = JSON.parse(data);

  notes.forEach((note, index) => {
    renderNote(note, index);
  });
}


function showError(message) {
  let error = document.querySelector('#error');
  error.textContent = message;
  error.classList.add('error-show');

  setTimeout(() => {
    error.classList.remove('error-show');
  }, 2000);
}

loadNotes();