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 da96f0b

Browse files
v1.0 launched. Check Changelog for full information
1 parent 1d6ba9c commit da96f0b

File tree

3 files changed

+151
-28
lines changed

3 files changed

+151
-28
lines changed

‎changelog_v1.0.txt

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---------------------NoteFizz v1.0 full --------------------------------
2+
3+
Added:
4+
Create , delete functionality added.
5+
use on of switch to fetch data on startup.
6+
fetch data option seperately given also if you disabled the auto fetch option.
7+
note save functionality to save data to localstorage.
8+
9+
Removed:
10+
none
11+
12+
Depricated:
13+
none
14+
15+
Bugs Fixes:
16+
Removed body left shift when modal pop up.
17+
18+
Security:
19+
none
20+
21+
Author/Developer:
22+
Navdeep Mishra

‎index.html

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en" style="overflow-y: hidden;">
2+
<html lang="en" style="overflow-y: scroll;">
33
<head>
44
<!-- Required meta tags -->
55
<meta charset="utf-8">
@@ -9,11 +9,17 @@
99
<!-- Bootstrap CSS -->
1010
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
1111
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
12-
<title>Hello, world!</title>
12+
<style>
13+
.modal-open[style] {
14+
padding-right: 0px !important;
15+
}
16+
</style>
17+
<title>NoteFizz</title>
1318
</head>
14-
<body>
19+
<body style="padding-right: 0px !important;">
20+
1521
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
16-
<a class="navbar-brand" href="#">Navbar</a>
22+
<a class="navbar-brand" href="#">NoteFizz</a>
1723
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
1824
<span class="navbar-toggler-icon"></span>
1925
</button>
@@ -47,9 +53,11 @@
4753
</form>
4854
</div>
4955
</nav>
56+
57+
<div id="alert"></div>
5058
<div class="main-container mx-auto" style="max-width: 60%; box-sizing: border-box;">
5159

52-
<h2 class=" ml3 mt-5 mb-2"><span class="letters">Welcome to Notes App</span></h2>
60+
<h2 class=" ml3 mt-5 mb-2"><span class="letters">Welcome to NoteFizz App</span></h2>
5361

5462
<form>
5563

@@ -59,17 +67,22 @@ <h2 class=" ml3 mt-5 mb-2"><span class="letters">Welcome to Notes App</span></h2
5967
<input type="text" class="form-control mt-3" id="note_title" placeholder="Note Title" style="border: 1px solid black;">
6068
<p id="title_error"></p>
6169
</div>
62-
<div class="data-area my-4">
63-
70+
<div class="data-area my-4" style=" min-height: 200px !important;">
6471
<textarea class="form-control" id="note_data" rows="7" placeholder="Your Note" style="resize: none; border: 1px solid black;"></textarea>
6572
<p id="data_error"></p>
6673
</div>
6774
</div>
6875
<div class="custom-control custom-switch my-3">
6976
<input type="checkbox" class="custom-control-input" id="storenote">
70-
<label class="custom-control-label" for="storenote">Save Notes to Local Storage</label>
77+
<label class="custom-control-label" for="storenote">Save Notes to Local Storage <span>(will be preserved even if you restart your browser)</span></label>
78+
</div>
79+
<div class="custom-control custom-switch my-3">
80+
<input type="checkbox" class="custom-control-input" id="fetchnote" onclick="switch_state()">
81+
<label class="custom-control-label" for="fetchnote">Fetch Saved Notes on Startup</label>
7182
</div>
7283
<button type="button" class="btn btn-dark" onclick="data_validator()">Add Note</button>
84+
<button type="button" class="btn btn-dark" onclick="saved_notes_display()">Fetch Saved Notes</button>
85+
<button type="button" class="btn btn-dark" data-toggle="modal" data-target="#exampleModal" >Clear Local Storage</button>
7386
</form>
7487
<div class="note_container my-5" style="min-width: 100%; box-sizing: border-box;" id="nc">
7588
<h4>Your Notes</h4>
@@ -79,6 +92,29 @@ <h4>Your Notes</h4>
7992
</div>
8093
</div>
8194
</div>
95+
<!-- ///////////////////////////bootstrap modal/////////////////////////// -->
96+
97+
<!-- Modal -->
98+
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
99+
<div class="modal-dialog">
100+
<div class="modal-content">
101+
<div class="modal-header">
102+
<h5 class="modal-title" id="exampleModalLabel">Warning</h5>
103+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
104+
<span aria-hidden="true">&times;</span>
105+
</button>
106+
</div>
107+
<div class="modal-body">
108+
If you proceed further then your whole local storage will be cleared and you'll lost all note saved in your browser local storage. Think twice before proceeding.
109+
</div>
110+
<div class="modal-footer">
111+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
112+
<button type="button" onclick="localStorage_clear()
113+
" class="btn btn-dark">Clear Storage</button>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
82118
<script src="js/script.js"></script>
83119
<!-- Optional JavaScript; choose one of the two! -->
84120

‎js/script.js

Lines changed: 85 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,38 @@
11

2-
main_container = document.querySelector('.note_container');
32

4-
function save_to_local(checker,title,data)
3+
/////////////////// getting the note container/////////////////
4+
main_container = document.querySelector('.note_container');
5+
///////////////////////fetching the value on startup////////////////
6+
fetchnote_value = localStorage.getItem('fetchnote');
7+
8+
if(fetchnote_value=='true')
9+
{
10+
11+
document.getElementById('fetchnote').checked = true;
12+
saved_notes_display()
13+
14+
15+
}
16+
else
17+
{
18+
document.getElementById('fetchnote').checked = false;
19+
20+
}
21+
function switch_state()
22+
{
23+
if(!document.getElementById('fetchnote').checked)
24+
{
25+
26+
localStorage.setItem('fetchnote',false);
27+
28+
}
29+
else
30+
{
31+
localStorage.setItem('fetchnote',true);
32+
}
33+
34+
}
35+
function save_to_local(checker,title,data) //this function will save data to local storage
536
{
637
if(checker)
738
{
@@ -24,7 +55,7 @@ function save_to_local(checker,title,data)
2455
}
2556
}
2657
}
27-
function error_message_shower(title,data)
58+
function error_message_shower(title,data)////////////error message shower
2859
{
2960
if(title)
3061
{
@@ -48,7 +79,8 @@ function error_message_shower(title,data)
4879

4980

5081
}
51-
function data_validator() //main function
82+
//main function which check for the value and wil raise error if founc empty
83+
function data_validator()
5284
{
5385

5486
title_el = document.getElementById("note_title").value;
@@ -71,6 +103,7 @@ function data_validator() //main function
71103
}
72104

73105
}
106+
//////////////add note fuction ////////////////////////
74107
function add_note(title_el,data_el)
75108
{
76109
notes_count=document.querySelectorAll('.note').length; // returns total created notes
@@ -95,8 +128,10 @@ function add_note(title_el,data_el)
95128
</div>`;
96129

97130
document.getElementById(`${notes_count+1}`).innerHTML=html; //adding the html for the proper view
131+
alert_shower("success","Note Added Succesfully")
98132

99133
}
134+
//////////////////////the delete function. This will remove note from dom and also from localstorage if the note is previously saved in local storage ////////////////////
100135
function notedelete(id,title)
101136
{
102137

@@ -119,21 +154,50 @@ function notedelete(id,title)
119154

120155
});
121156
localStorage.setItem('notes',JSON.stringify(notes_array));
157+
alert_shower("success","No deleted Succesfully")
122158
}
123-
// saved_notes_display()
124-
// {
125-
// let noteselm = localStorage.getItem('notes');
126-
// if(notes==null)
127-
// {
128-
// notesObj=[];
129-
// }
130-
// else
131-
// {
132-
// notesObj = JSON.parse(notes);
133-
// }
134-
// }
135-
136-
//////////////////////////////////////text transition/////////////////////////////////////////
159+
///////////////////////saved notes display//////////////////////////
160+
function saved_notes_display()
161+
{
162+
let noteselm = localStorage.getItem('notes');
163+
if(noteselm==null)
164+
{
165+
alert_shower("danger","No Notes Found")
166+
167+
}
168+
else
169+
{
170+
notesObj = JSON.parse(noteselm);
171+
notesObj.forEach(function note_data_extractor(note,ind)
172+
{
173+
for(var title in note)
174+
{
175+
data = note[title];
176+
add_note(title,data);
177+
}
178+
});
179+
}
180+
}
181+
//////////////////this will clear your local storage////////////////////
182+
function localStorage_clear()
183+
{
184+
localStorage.clear();
185+
alert_shower("danger","Local Storage Cleared")
186+
}
187+
///////////////////bootstrap alert shower/////////////////////////////
188+
function alert_shower(type,msg)
189+
{
190+
el = document.getElementById('alert');
191+
el.innerHTML = `
192+
<div class="alert alert-${type} alert-dismissible fade show" role="alert">
193+
<strong>${msg}</strong>
194+
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
195+
<span aria-hidden="true">&times;</span>
196+
</button>
197+
</div>
198+
`
199+
}
200+
//////////////////////////////////////text transition using anime.js/////////////////////////////////////////
137201

138202
var textWrapper = document.querySelector('.ml3');
139203
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
@@ -144,11 +208,12 @@ anime.timeline({loop: true})
144208
opacity: [0,1],
145209
easing: "easeInOutQuad",
146210
duration: 2250,
147-
delay: (el, i) => 150 * (i+1)
211+
delay: (el, i) => 50 * (i+1)
148212
}).add({
149213
targets: '.ml3',
150214
opacity: 0,
151215
duration: 1000,
152216
easing: "easeOutExpo",
153217
delay: 1000
154-
});
218+
});
219+

0 commit comments

Comments
(0)

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