Movatterモバイル変換

[0]ホーム
URL:

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

Commitea83e76

Browse files
update note app project
1 parente7e3b9a commitea83e76

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
<metacharset="UTF-8"/>
55
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
66
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7-
<title>Note App</title>
7+
<title>Document</title>
88
<linkrel="stylesheet"href="style.css"/>
99
</head>
1010
<body>
1111
<h1class="heading">Note App</h1>
1212
<pclass="info-text">Double click on a note to remove it</p>
13-
<divid="app"class="app">
13+
<divclass="app"id="app">
1414
<!-- <textarea
15-
class="note"
1615
cols="30"
1716
rows="10"
17+
class="note"
1818
placeholder="Empty Note"
1919
></textarea> -->
20-
<buttonclass="btn"id="btn"type="button">+</button>
20+
21+
<buttonclass="btn"id="btn">+</button>
2122
</div>
2223
<scriptsrc="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-
constnotesContainerEl=document.getElementById("app");
21
constbtnEl=document.getElementById("btn");
2+
constappEl=document.getElementById("app");
33

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

9-
btnEl.addEventListener("click",()=>addNote());
10-
11-
functiongetNotes(){
12-
returnJSON.parse(localStorage.getItem("note-ap")||"[]");
13-
}
14-
15-
functionsaveNotes(notes){
16-
localStorage.setItem("note-ap",JSON.stringify(notes));
17-
}
18-
199
functioncreateNoteEl(id,content){
2010
constelement=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-
constnoteDelete=confirm("WanttoDelete the note?");
32-
if(noteDelete){
16+
constwarning=confirm("Do you wanttodelete this note?");
17+
if(warning){
3318
deleteNote(id,element);
3419
}
3520
});
3621

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

29+
functiondeleteNote(id,element){
30+
constnotes=getNotes().filter((note)=>note.id!=id)
31+
saveNote(notes)
32+
appEl.removeChild(element)
33+
}
34+
35+
functionupdateNote(id,content){
36+
constnotes=getNotes();
37+
consttarget=notes.filter((note)=>note.id==id)[0];
38+
target.content=content;
39+
saveNote(notes);
40+
}
41+
4042
functionaddNote(){
4143
constnotes=getNotes();
4244
constnoteObj={
4345
id:Math.floor(Math.random()*100000),
4446
content:"",
4547
};
46-
4748
constnoteEl=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-
functionupdateNote(id,newContent){
55-
constnotes=getNotes();
56-
consttarget=notes.filter((note)=>note.id==id)[0];
5752

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

62-
functiondeleteNote(id,element){
63-
constnotes=getNotes().filter((note)=>note.id!=id);
56+
functionsaveNote(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:003pxrgba(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: all300ms 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: all300ms ease;
64+
.btn:hover{
65+
background:rgba(255,255,255,0.55);
66+
color:rgba(0,0,0,0.6);
67+
transition: all300ms ease;
6868
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp