Ich entwickle eine Notiz App für den Browser (Javascript LocalStorage Anleitung)

von | Mai 22, 2023 | Allgemein | 0 Kommentare

Schlagwörter: App - clearbutton - CSS - CSS3 - f0f3bd - fff - HTML - Javascript - Webdesign

Habt ihr gewusst, dass jeder Browser auch eine Art Datenbank eingebaut hat, den man als Webseitenbetreiber auch verwenden könnt? Ja man muss nicht nur alles in Cookies einbauen, sondern könnte gewisse Dinge auch in diesen Zwischenspeicher einbauen.

Damit ihr seht wie das ganze mit Javascript funktioniert, programmiere ich mit euch gemeinsam eine Notiz-App die ihr dann selbst nachbauen und verwenden könnt.

Video

HTML

1
2
3
4
5
6
7
<div class="container">
      <h2>Notizen</h2>
      <div id="app">
        <button class="add-note" type="button">+</button>
      </div>
      <button id="clearbutton">Clear</button>
    </div>

CSS

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
body {
  margin: 0;
  background: #00a896;
}
 
.container {
  text-align: center;
}
 
h2 {
  color: #f0f3bd;
}
 
#app {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  padding: 24px;
  gap: 24px;
}
 
.note {
  height: 200px;
  box-sizing: border-box;
  padding: 16px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
  resize: none;
  font-family: sans-serif;
  font-size: 16px;
  background-color: #f0f3bd;
}
 
.add-note {
  height: 200px;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-size: 120px;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background 0.2s;
}
 
.add-note:hover {
  background: rgba(0, 0, 0, 0.2);
}
 
#clearbutton {
  width: 100px;
  height: 50px;
  background: #028090;
  color: #f0f3bd;
  border: none;
}
#clearbutton:hover {
  background: #05668d;
  color: #fff;
}

Javascript

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
const notesContainer = document.getElementById("app");
const addNoteButton = notesContainer.querySelector(".add-note");
 
getNotes().forEach((note) => {
  const noteElement = createNoteElement(note.id, note.content);
  notesContainer.insertBefore(noteElement, addNoteButton);
});
 
addNoteButton.addEventListener("click", () => addNote());
 
function getNotes() {
  return JSON.parse(localStorage.getItem("database") || "[]");
}
 
function saveNotes(notes) {
  localStorage.setItem("database", JSON.stringify(notes));
}
 
function createNoteElement(id, content) {
  const element = document.createElement("textarea");
 
  element.classList.add("note");
  element.value = content;
  element.placeholder = "leere Notiz";
 
  element.addEventListener("change", () => {
    updateNote(id, element.value);
  });
 
  element.addEventListener("dblclick", () => {
    const doDelete = confirm("Löschen?");
 
    if (doDelete) {
      deleteNote(id, element);
    }
  });
 
  return element;
}
 
function addNote() {
  const notes = getNotes();
  const noteObject = {
    id: Math.floor(Math.random() * 100000),
    content: "",
  };
 
  const noteElement = createNoteElement(noteObject.id, noteObject.content);
  notesContainer.insertBefore(noteElement, addNoteButton);
 
  notes.push(noteObject);
  saveNotes(notes);
}
 
function updateNote(id, newContent) {
  const notes = getNotes();
  const targetNote = notes.filter((note) => note.id == id)[0];
 
  targetNote.content = newContent;
  saveNotes(notes);
}
 
function deleteNote(id, element) {
  const notes = getNotes().filter((note) => note.id != id);
 
  saveNotes(notes);
  notesContainer.removeChild(element);
}
 
const clearButton = document.getElementById("clearbutton");
 
clearButton.addEventListener("click", () => {
  localStorage.removeItem("database");
  location.reload();
});

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert