FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
javascript-basic-projects/Notes.html at master · akarsh2312/javascript-basic-projects · GitHub
akarsh2312
javascript-basic-projects
Repository navigation
Code
Pull requests
Actions
Projects
Security and quality
Insights
Expand file tree
Breadcrumbs
javascript-basic-projects
/
Notes.html
Copy path
More file actions
More file actions
Latest commit
History
History
History
156 lines (139 loc) · 5.31 KB
Breadcrumbs
javascript-basic-projects
/
Notes.html
Copy path
File metadata and controls
156 lines (139 loc) · 5.31 KB
Raw
Copy raw file
Download raw file
Open symbols panel
Edit and raw actions
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html
>
<
html
lang
="
en
"
>
<
head
>
<
meta
charset
="
UTF-8
"
>
<
meta
name
="
viewport
"
content
="
width=device-width, initial-scale=1.0
"
>
<
meta
http-equiv
="
X-UA-Compatible
"
content
="
ie=edge
"
>
<
title
>
Notes App
</
title
>
<
link
rel
="
stylesheet
"
href
="
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
"
integrity
="
sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T
"
crossorigin
="
anonymous
"
>
</
head
>
<
body
>
<
nav
class
="
navbar navbar-expand-lg navbar-dark bg-dark
"
>
<
a
class
="
navbar-brand
"
href
="
#
"
>
Magic Notes
</
a
>
<
button
class
="
navbar-toggler
"
type
="
button
"
data-toggle
="
collapse
"
data-target
="
#navbarSupportedContent
"
aria-controls
="
navbarSupportedContent
"
aria-expanded
="
false
"
aria-label
="
Toggle navigation
"
>
<
span
class
="
navbar-toggler-icon
"
>
</
span
>
</
button
>
<
div
class
="
collapse navbar-collapse
"
id
="
navbarSupportedContent
"
>
<
ul
class
="
navbar-nav mr-auto
"
>
<
li
class
="
nav-item active
"
>
<
a
class
="
nav-link
"
href
="
#
"
>
Home
<
span
class
="
sr-only
"
>
(current)
</
span
>
</
a
>
</
li
>
</
ul
>
<
form
class
="
form-inline my-2 my-lg-0
"
>
<
input
class
="
form-control mr-sm-2
"
id
="
searchTxt
"
type
="
search
"
placeholder
="
Search
"
aria-label
="
Search
"
>
<
button
class
="
btn btn-outline-success my-2 my-sm-0
"
type
="
submit
"
>
Search
</
button
>
</
form
>
</
div
>
</
nav
>
<
div
class
="
container my-3
"
>
<
h1
>
Welcome To Magic Notes
</
h1
>
<
div
class
="
card
"
>
<
div
class
="
card-body
"
>
<
div
class
="
form-group
"
>
<
h5
class
="
card-title
"
>
Add title
</
h5
>
<
input
type
="
text
"
class
="
form-control
"
id
="
addTitle
"
aria-describedby
="
title
"
placeholder
="
Enter title
"
>
</
div
>
<
h5
class
="
card-title
"
>
Add a note
</
h5
>
<
div
class
="
form-group
"
>
<
textarea
class
="
form-control
"
id
="
addTxt
"
rows
="
3
"
>
</
textarea
>
</
div
>
<
button
class
="
btn btn-primary
"
id
="
addBtn
"
>
Add Note
</
button
>
</
div
>
</
div
>
<
hr
>
<
h1
>
Your Notes
</
h1
>
<
hr
>
<
div
id
="
notes
"
class
="
row container-fluid
"
>
</
div
>
</
div
>
<
script
src
="
https://code.jquery.com/jquery-3.3.1.slim.min.js
"
integrity
="
sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo
"
crossorigin
="
anonymous
"
>
</
script
>
<
script
src
="
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
"
integrity
="
sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1
"
crossorigin
="
anonymous
"
>
</
script
>
<
script
src
="
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
"
integrity
="
sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM
"
crossorigin
="
anonymous
"
>
</
script
>
//Javascript
<
script
>
showNotes
(
)
;
// If user adds a note, add it to the localStorage
let
addBtn
=
document
.
getElementById
(
"addBtn"
)
;
addBtn
.
addEventListener
(
"click"
,
function
(
e
)
{
let
addTxt
=
document
.
getElementById
(
"addTxt"
)
;
let
addTitle
=
document
.
getElementById
(
"addTitle"
)
;
let
notes
=
localStorage
.
getItem
(
"notes"
)
;
if
(
notes
==
null
)
{
notesObj
=
[
]
;
}
else
{
notesObj
=
JSON
.
parse
(
notes
)
;
}
let
myObj
=
{
title
:
addTitle
.
value
,
text
:
addTxt
.
value
}
notesObj
.
push
(
myObj
)
;
localStorage
.
setItem
(
"notes"
,
JSON
.
stringify
(
notesObj
)
)
;
addTxt
.
value
=
""
;
addTitle
.
value
=
""
;
showNotes
(
)
;
}
)
;
// Function to show elements from localStorage
function
showNotes
(
)
{
let
notes
=
localStorage
.
getItem
(
"notes"
)
;
if
(
notes
==
null
)
{
notesObj
=
[
]
;
}
else
{
notesObj
=
JSON
.
parse
(
notes
)
;
}
let
html
=
""
;
notesObj
.
forEach
(
function
(
element
,
index
)
{
html
+=
`
<div class="noteCard my-2 mx-2 card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">
${
element
.
title
}
</h5>
<p class="card-text">
${
element
.
text
}
</p>
<button id="
${
index
}
"onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</button>
</div>
</div>`
;
}
)
;
let
notesElm
=
document
.
getElementById
(
"notes"
)
;
if
(
notesObj
.
length
!=
0
)
{
notesElm
.
innerHTML
=
html
;
}
else
{
notesElm
.
innerHTML
=
`Nothing to show! Use "Add a Note" section above to add notes.`
;
}
}
// Function to delete a note
function
deleteNote
(
index
)
{
let
notes
=
localStorage
.
getItem
(
"notes"
)
;
if
(
notes
==
null
)
{
notesObj
=
[
]
;
}
else
{
notesObj
=
JSON
.
parse
(
notes
)
;
}
notesObj
.
splice
(
index
,
1
)
;
localStorage
.
setItem
(
"notes"
,
JSON
.
stringify
(
notesObj
)
)
;
showNotes
(
)
;
}
let
search
=
document
.
getElementById
(
'searchTxt'
)
;
search
.
addEventListener
(
"input"
,
function
(
)
{
let
inputVal
=
search
.
value
.
toLowerCase
(
)
;
let
noteCards
=
document
.
getElementsByClassName
(
'noteCard'
)
;
Array
.
from
(
noteCards
)
.
forEach
(
function
(
element
)
{
let
cardTxt
=
element
.
getElementsByTagName
(
"p"
)
[
0
]
.
innerText
;
if
(
cardTxt
.
includes
(
inputVal
)
)
{
element
.
style
.
display
=
"block"
;
}
else
{
element
.
style
.
display
=
"none"
;
}
}
)
}
)
</
script
>
</
body
>
</
html
>
Back
|
FazBrowse Home
|
New Git URL