Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ea83e76

Browse files
update note app project
1 parent e7e3b9a commit ea83e76

File tree

3 files changed

+54
-56
lines changed

3 files changed

+54
-56
lines changed

‎projects/note-app/index.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,21 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Note App</title>
7+
<title>Document</title>
88
<link rel="stylesheet" href="style.css" />
99
</head>
1010
<body>
1111
<h1 class="heading">Note App</h1>
1212
<p class="info-text">Double click on a note to remove it</p>
13-
<div id="app" class="app">
13+
<div class="app" id="app">
1414
<!-- <textarea
15-
class="note"
1615
cols="30"
1716
rows="10"
17+
class="note"
1818
placeholder="Empty Note"
1919
></textarea> -->
20-
<button class="btn" id="btn" type="button">+</button>
20+
21+
<button class="btn" id="btn">+</button>
2122
</div>
2223
<script src="index.js"></script>
2324
</body>

‎projects/note-app/index.js

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,64 @@
1-
const notesContainerEl = document.getElementById("app");
21
const btnEl = document.getElementById("btn");
2+
const appEl = document.getElementById("app");
33

44
getNotes().forEach((note) => {
55
const noteEl = createNoteEl(note.id, note.content);
6-
notesContainerEl.insertBefore(noteEl, btnEl);
6+
appEl.insertBefore(noteEl, btnEl);
77
});
88

9-
btnEl.addEventListener("click", () => addNote());
10-
11-
function getNotes() {
12-
return JSON.parse(localStorage.getItem("note-ap") || "[]");
13-
}
14-
15-
function saveNotes(notes) {
16-
localStorage.setItem("note-ap", JSON.stringify(notes));
17-
}
18-
199
function createNoteEl(id, content) {
2010
const element = document.createElement("textarea");
21-
2211
element.classList.add("note");
23-
element.value = content;
2412
element.placeholder = "Empty Note";
25-
26-
element.addEventListener("input", () => {
27-
updateNote(id, element.value);
28-
});
13+
element.value = content;
2914

3015
element.addEventListener("dblclick", () => {
31-
const noteDelete = confirm("Want to Delete the note?");
32-
if (noteDelete) {
16+
const warning = confirm("Do you want to delete this note?");
17+
if (warning) {
3318
deleteNote(id, element);
3419
}
3520
});
3621

22+
element.addEventListener("input", () => {
23+
updateNote(id, element.value);
24+
});
25+
3726
return element;
3827
}
3928

29+
function deleteNote(id, element) {
30+
const notes = getNotes().filter((note)=>note.id != id)
31+
saveNote(notes)
32+
appEl.removeChild(element)
33+
}
34+
35+
function updateNote(id, content) {
36+
const notes = getNotes();
37+
const target = notes.filter((note) => note.id == id)[0];
38+
target.content = content;
39+
saveNote(notes);
40+
}
41+
4042
function addNote() {
4143
const notes = getNotes();
4244
const noteObj = {
4345
id: Math.floor(Math.random() * 100000),
4446
content: "",
4547
};
46-
4748
const noteEl = createNoteEl(noteObj.id, noteObj.content);
48-
notesContainerEl.insertBefore(noteEl, btnEl);
49+
appEl.insertBefore(noteEl, btnEl);
4950

5051
notes.push(noteObj);
51-
saveNotes(notes);
52-
}
53-
54-
function updateNote(id, newContent) {
55-
const notes = getNotes();
56-
const target = notes.filter((note) => note.id == id)[0];
5752

58-
target.content = newContent;
59-
saveNotes(notes);
53+
saveNote(notes);
6054
}
6155

62-
function deleteNote(id, element) {
63-
const notes = getNotes().filter((note) => note.id != id);
56+
function saveNote(notes) {
57+
localStorage.setItem("note-app", JSON.stringify(notes));
58+
}
6459

65-
saveNotes(notes);
66-
notesContainerEl.removeChild(element);
60+
functiongetNotes(){
61+
returnJSON.parse(localStorage.getItem("note-app")||"[]");
6762
}
63+
64+
btnEl.addEventListener("click", addNote);

‎projects/note-app/style.css

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
body {
2-
font-family: "Courier New", Courier, monospace;
32
margin: 0;
43
background: linear-gradient(to left, lightblue, lightgreen);
4+
font-family: "Courier New", Courier, monospace;
55
}
66

77
.heading {
@@ -10,6 +10,7 @@ body {
1010
padding-top: 10px;
1111
font-size: 35px;
1212
}
13+
1314
.info-text {
1415
text-align: center;
1516
color: darkblue;
@@ -19,26 +20,25 @@ body {
1920
.app {
2021
display: grid;
2122
grid-template-columns: repeat(auto-fill, 300px);
23+
gap: 40px;
2224
justify-content: center;
2325
padding: 50px;
24-
gap: 40px;
2526
}
2627

2728
.note {
28-
height: 200px;
2929
padding: 17px;
3030
border-radius: 15px;
3131
resize: none;
3232
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
33-
font-family: monospace;
3433
font-size: 18px;
34+
height: 200px;
3535
color: darkblue;
36-
font-weight: 800;
3736
border: none;
3837
outline: none;
3938
background: rgba(255, 255, 255, 0.1);
4039
box-sizing: border-box;
4140
}
41+
4242
.note::placeholder {
4343
color: gray;
4444
opacity: 30%;
@@ -50,19 +50,19 @@ body {
5050
transition: all 300ms ease;
5151
}
5252

53-
.btn{
54-
height: 200px;
55-
border-color: rgba(255, 255, 255, 0.37);
56-
background: rgba(255, 255, 255, 0.27);
57-
border-radius: 15px;
58-
font-size: 70px;
59-
font-weight: 700;
60-
color: rgba(0, 0, 0, 0.3);
61-
cursor: pointer;
53+
.btn{
54+
height: 200px;
55+
border-color: rgba(255, 255, 255, 0.37);
56+
background: rgba(255, 255, 255, 0.27);
57+
border-radius: 15px;
58+
font-size: 70px;
59+
font-weight: 700;
60+
color: rgba(0, 0, 0, 0.3);
61+
cursor: pointer;
6262
}
6363

64-
.btn:hover{
65-
background: rgba(255, 255, 255, 0.55);
66-
color: rgba(0, 0, 0, 0.6);
67-
transition: all 300ms ease;
64+
.btn:hover{
65+
background: rgba(255, 255, 255, 0.55);
66+
color: rgba(0, 0, 0, 0.6);
67+
transition: all 300ms ease;
6868
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /