Skip to content

Commit 4a75702

Browse files
HydraPhyzerHydraPhyzer
committed
Ready and Deletion , Saving , Searching Features Functional
1 parent 2cd488e commit 4a75702

File tree

6 files changed

+158
-33
lines changed

6 files changed

+158
-33
lines changed

‎Icons/Edit.png

-14.2 KB
Binary file not shown.

‎Icons/Save.png

5.97 KB
Loading

‎Index.css

+54-2
Original file line numberDiff line numberDiff line change
@@ -162,12 +162,64 @@ textarea
162162
{
163163
outline: none;
164164
}
165-
.Note-Text
165+
.Note-Display
166166
{
167167
display: none;
168168
}
169-
.Del:hover , .Edit:hover
169+
.Images img:hover
170170
{
171171
cursor: pointer;
172172
transform: scale(1.3);
173+
}
174+
.Search-Click
175+
{
176+
background-color: #FFBA00;
177+
padding: 10px;
178+
border-radius: 5px;
179+
color: white;
180+
}
181+
.Search:hover
182+
{
183+
cursor: pointer;
184+
}
185+
@media (max-width:650px)
186+
{
187+
.Nav
188+
{
189+
flex-wrap: wrap;
190+
}
191+
.Logo
192+
{
193+
order: 1;
194+
}
195+
.Call
196+
{
197+
order: 2;
198+
}
199+
.Search
200+
{
201+
order: 3;
202+
flex-grow: 1;
203+
}
204+
.Nav >div
205+
{
206+
margin: 10px 0px;
207+
}
208+
.All-Notes
209+
{
210+
width: 100%;
211+
margin: 0;
212+
padding: 0;
213+
}
214+
.Note-Box
215+
{
216+
width: 150px;
217+
height: 150PX;
218+
padding: 0PX;
219+
margin: 5PX;
220+
}
221+
#Area
222+
{
223+
height: 125px;
224+
}
173225
}

‎Index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<span class="Same-Text-Style">Keep</span>
1919
</div>
2020
<div class="Search">
21-
<i class="fa-solid fa-magnifying-glass"></i>
21+
<i class="fa-solid fa-magnifying-glass Search-Click"></i>
2222
<input type="search" id="Search-Text" placeholder="Search">
2323
</div>
2424
<div class="Call">
@@ -35,7 +35,7 @@
3535
<!-- <div class="Note-Box">
3636
<div class="Operations">
3737
<div class="Images">
38-
<img src="/Icons/Edit.png" alt="Edit Here">
38+
<img src="/Icons/Save.png" alt="Save Here">
3939
<img class="Del" src="/Icons/Delete.png" alt="Delete Here">
4040
</div>
4141
</div>

‎Index.js

+102-29
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,118 @@
1-
document.addEventListener('click', (Event)=>
2-
{
1+
document.addEventListener('click', (Event) => {
32

4-
document.querySelector('.Search').style.backgroundColor="white";
5-
document.querySelector('.Search').classList.add('Search-Shadow');
3+
document.querySelector('.Search').style.backgroundColor = "white";
4+
document.querySelector('.Search').classList.add('Search-Shadow');
65

7-
const Box = document.getElementById('Search-Text');
8-
9-
if (!Box.contains(Event.target)) {
6+
const Box = document.getElementById('Search-Text');
107

11-
document.querySelector('.Search').classList.remove('Search-Shadow');
12-
document.querySelector('.Search').style.backgroundColor="#F1F3F4";
13-
}
8+
if (!Box.contains(Event.target)) {
9+
10+
document.querySelector('.Search').classList.remove('Search-Shadow');
11+
document.querySelector('.Search').style.backgroundColor = "#F1F3F4";
12+
}
1413
});
1514

15+
function LocalStore() {
16+
let Notes = [];
17+
let All = document.querySelectorAll('textarea');
18+
All.forEach((element) => {
19+
if (element.value)
20+
return Notes.push(element.value);
21+
});
22+
localStorage.setItem('Notes', JSON.stringify(Notes));
23+
}
1624

17-
document.querySelector('.Call').addEventListener('click' , ()=>
18-
{
25+
document.querySelector('.Call').addEventListener('click', AddingNote = (Para = ' ') => {
1926

20-
let NewNote=document.createElement('div');
27+
let NewNote = document.createElement('div');
2128
NewNote.classList.add('Note-Box');
2229

23-
let HTMLData=
24-
`<div class="Operations">
25-
<div class="Images">
26-
<img class="Edit" src="/Icons/Edit.png" alt="Edit Here">
27-
<img class="Del" src="/Icons/Delete.png" alt="Delete Here">
30+
31+
const HTMLData =
32+
`<div class="Operations">
33+
<div class="Images">
34+
<img class="Save" src="/Icons/Save.png" alt="Save Here">
35+
<img class="Del" src="/Icons/Delete.png" alt="Delete Here">
36+
</div>
2837
</div>
29-
</div>
30-
<p class="Note-Text">
31-
</p>
38+
<p class="Note-Text Note-Display">
39+
</p>
3240
<textarea name="Write" id="Area" class="Note-Text" cols="100%"></textarea>`
3341

34-
NewNote.insertAdjacentHTML('afterbegin' , HTMLData);
35-
document.querySelector('.All-Notes').appendChild(NewNote);
42+
NewNote.insertAdjacentHTML('afterbegin', HTMLData);
43+
document.querySelector('.All-Notes').appendChild(NewNote);
44+
45+
46+
NewNote.querySelector('.Del').addEventListener('click', () => {
47+
let Ans = confirm('Are You Sure to Delete this Note ? ');
48+
if (Ans == true) {
49+
NewNote.remove();
50+
}
51+
LocalStore();
52+
});
53+
54+
55+
NewNote.querySelector('.Save').addEventListener('click', () => {
56+
57+
if (NewNote.querySelector('textarea').value == '') {
58+
NewNote.remove();
59+
LocalStore();
60+
}
61+
else {
62+
NewNote.querySelector('.Note-Display').innerHTML = NewNote.querySelector('#Area').value;
63+
NewNote.querySelector('.Note-Display').style.display = 'block';
64+
NewNote.querySelector('#Area').style.setProperty('display', 'none', 'important');
65+
}
66+
LocalStore();
67+
});
68+
if (Para != '[object PointerEvent]') {
69+
NewNote.querySelector('#Area').innerHTML = Para;
70+
NewNote.querySelector('.Note-Display').style.display = "none";
71+
NewNote.querySelector('#Area').style.display = "block";
72+
LocalStore();
73+
}
74+
else {
75+
NewNote.querySelector('#Area').style.display = "block";
76+
NewNote.querySelector('.Note-Display').style.display = "none";
77+
}
78+
});
3679

37-
NewNote.querySelector('.Del').addEventListener('click' , ()=>
80+
let GetNotes = JSON.parse(localStorage.getItem('Notes'));
81+
if (GetNotes) {
82+
GetNotes.forEach(Element => {
83+
AddingNote(Element);
84+
});
85+
}
86+
87+
// ===================================
88+
89+
document.querySelector('.Search-Click').addEventListener('click' , ()=>
90+
{
91+
92+
let Key=document.querySelector('#Search-Text').value;
93+
let GetNotes = JSON.parse(localStorage.getItem('Notes'));
94+
if (GetNotes) {
95+
GetNotes.forEach(Element => {
96+
if(Element.search(Key)!=-1)
3897
{
39-
let Ans=confirm('Are You Sure to Delete this Note ? ');
40-
if(Ans==true)
41-
{
42-
NewNote.remove();
98+
let All = document.querySelectorAll('textarea');
99+
All.forEach((element) => {
100+
if (element.value==Element){
101+
let Getter=document.querySelector('textarea').parentNode;
102+
document.querySelector('.All-Notes').appendChild(Getter);
43103
}
44-
})
104+
});
105+
}
106+
else
107+
{
108+
let All = document.querySelectorAll('textarea');
109+
All.forEach((element) => {
110+
if (element.value==Element){
111+
let Getter=document.querySelector('textarea').parentNode;
112+
document.querySelector('.All-Notes').removeChild(Getter);
113+
}
114+
});
115+
}
116+
});
117+
}
45118
});

‎Logo/BG.png

-251 KB
Binary file not shown.

0 commit comments

Comments
 (0)