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 1d6ba9c

Browse files
added text transiton and imroved localstorage function
1 parent f1faf0a commit 1d6ba9c

File tree

2 files changed

+160
-37
lines changed

2 files changed

+160
-37
lines changed

‎index.html

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en"style="overflow-y: hidden;">
33
<head>
44
<!-- Required meta tags -->
55
<meta charset="utf-8">
@@ -8,7 +8,7 @@
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
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">
11-
11+
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
1212
<title>Hello, world!</title>
1313
</head>
1414
<body>
@@ -47,20 +47,33 @@
4747
</form>
4848
</div>
4949
</nav>
50-
<div class="main-container mx-auto" style="width: 60%">
50+
<div class="main-container mx-auto" style="max-width: 60%; box-sizing: border-box;">
5151

52-
<h2 class=" mt-5 mb-2">Welcome to Notes App</h2>
52+
<h2 class=" ml3 mt-5 mb-2"><span class="letters">Welcome to Notes App</span></h2>
53+
5354
<form>
5455

5556
<div class="form-group">
56-
<input type="text" class="form-control my-3" id="note_title" placeholder="Note Title" style="border: 1px solid black;">
57-
<textarea class="form-control" id="exampleFormControlTextarea1" rows="7" placeholder="Your Note" style="resize: none; border: 1px solid black;"></textarea>
57+
<div class="title-area my-4" style="height: 40px;">
58+
59+
<input type="text" class="form-control mt-3" id="note_title" placeholder="Note Title" style="border: 1px solid black;">
60+
<p id="title_error"></p>
61+
</div>
62+
<div class="data-area my-4">
63+
64+
<textarea class="form-control" id="note_data" rows="7" placeholder="Your Note" style="resize: none; border: 1px solid black;"></textarea>
65+
<p id="data_error"></p>
66+
</div>
67+
</div>
68+
<div class="custom-control custom-switch my-3">
69+
<input type="checkbox" class="custom-control-input" id="storenote">
70+
<label class="custom-control-label" for="storenote">Save Notes to Local Storage</label>
5871
</div>
59-
<button type="button" class="btn btn-dark" onclick="add_note()">Add Note</button>
72+
<button type="button" class="btn btn-dark" onclick="data_validator()">Add Note</button>
6073
</form>
61-
<div class="note_container my-5" id="nc">
74+
<div class="note_container my-5" style="min-width: 100%; box-sizing: border-box;" id="nc">
6275
<h4>Your Notes</h4>
63-
<div class="notes row container-fluid justify-content-between" id="nt">
76+
<div class="notes d-flex flex-wrap justify-content-between" style="width: 100%;box-sizing: border-box;"id="nt">
6477

6578
</div>
6679
</div>
@@ -73,10 +86,5 @@ <h4>Your Notes</h4>
7386
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
7487
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
7588

76-
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
77-
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
78-
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
79-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
80-
-->
8189
</body>
8290
</html>

‎js/script.js

Lines changed: 138 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,154 @@
1-
function note_layout_creater(title,text)
1+
2+
main_container = document.querySelector('.note_container');
3+
4+
function save_to_local(checker,title,data)
25
{
6+
if(checker)
7+
{
38

4-
note_card = document.createElement('div')
5-
note_card.className="note";
6-
let html;
9+
let dict={};
10+
dict[title]=data;
11+
12+
let stored_notes = JSON.parse(localStorage.getItem('notes'));
13+
14+
if(stored_notes!=null)
15+
{
16+
stored_notes.push(dict);
17+
localStorage.setItem('notes',JSON.stringify(stored_notes))
18+
}
19+
else
20+
{
21+
let notes_array = []
22+
notes_array.push(dict)
23+
localStorage.setItem('notes',JSON.stringify(notes_array))
24+
}
25+
}
26+
}
27+
function error_message_shower(title,data)
28+
{
29+
if(title)
30+
{
31+
terror = document.getElementById("title_error");
32+
terror.innerHTML=title;
33+
terror.setAttribute("style","color: red; font-size: 12px;");
34+
t_el = document.getElementById('note_title').setAttribute('style','border: 1px solid red;');
35+
}
36+
37+
if(data)
38+
{
39+
40+
derror = document.getElementById("data_error");
41+
42+
derror.innerHTML=data;
43+
derror.setAttribute("style","color: red; font-size: 12px;");
44+
d_el = document.getElementById('note_data').setAttribute('style','border: 1px solid red;')
45+
}
46+
47+
48+
749

8-
console.log(note_card);
9-
return note_card
1050
}
11-
main_container = document.querySelector('.note_container');
51+
function data_validator() //main function
52+
{
53+
54+
title_el = document.getElementById("note_title").value;
55+
data_el = document.getElementById("note_data").value;
56+
storenote = document.getElementById("storenote").checked;
57+
document.getElementById("note_title")
58+
59+
60+
if(title_el=="")
61+
{
62+
error_message_shower("Note Title Can't Empty",false)
63+
}
64+
if(data_el=="")
65+
{
66+
error_message_shower(false,"Note Data Can't be Empty");
67+
}
68+
else
69+
{add_note(title_el,data_el);
70+
save_to_local(storenote,title_el,data_el);
71+
}
1272

13-
function add_note()
73+
}
74+
function add_note(title_el,data_el)
1475
{
15-
notes_count=document.querySelectorAll('.note').length;
16-
text = document.getElementById('exampleFormControlTextarea1').value;
17-
note_card = note_layout_creater(notes_count,text);
18-
note_title = document.getElementById('note_title').value;
76+
notes_count=document.querySelectorAll('.note').length; // returns total created notes
77+
1978

20-
note_card.id = `${notes_count+1}`;
79+
note_card = document.createElement('div')
80+
note_card.className="note";
81+
note_card.id = `${notes_count+1}`; //for giving unique id to every note
2182

2283
main_container = document.getElementById('nt');
2384
main_container.appendChild(note_card);
2485
html = `
25-
<div class="card text-white bg-dark mx-1 mb-3 id="${notes_count+1}" style=" max-width: 18rem;">
26-
<div class="card-header row container-fluid justify-content-between" style="margin: 0px !important">Note: ${notes_count+1} <i" onclick="notedelete(${notes_count+1})"style="padding: 3px 0 0 0; cursor:pointer;" class="fa fa-trash" aria-hidden="true"></i></div>
27-
<div class="card-body">
28-
<h5 class="card-title">${note_title}</h5>
29-
<p class="card-text">${text.slice(0,15)}...</p>
86+
<div class="card text-white bg-dark mx-1 mb-3" id="${notes_count+1}" style=" max-width: 18rem;">
87+
<div class="card-header row container-fluid justify-content-between" style="margin: 0px !important">
88+
Note: ${notes_count+1} <i" onclick="notedelete(${notes_count+1},'${title_el}')"style="padding: 3px 0 0 0; cursor:pointer;" class="fa fa-trash" aria-hidden="true"></i>
89+
90+
</div>
91+
<div class="card-body">
92+
<h5 class="card-title">${title_el}</h5>
93+
<p class="card-text">${data_el.slice(0,25)}...</p>
94+
</div>
3095
</div>`;
31-
document.getElementById(`${notes_count+1}`).innerHTML=html;
3296

97+
document.getElementById(`${notes_count+1}`).innerHTML=html; //adding the html for the proper view
98+
3399
}
34-
function notedelete(id)
100+
function notedelete(id,title)
35101
{
102+
36103
el=document.getElementById(id);
37-
el.remove()
38-
console.log("hello")
39-
}
104+
note_title = el.children[0].children[1].children[0].innerHTML;
105+
el.remove();
106+
let notes_array = JSON.parse(localStorage.getItem('notes'));
107+
temp = notes_array;
108+
temp.forEach(function key_popper(ab,ind){
109+
for(var key in ab)
110+
{
111+
if(key==title)
112+
{
113+
notes_array.splice(ind,1);
114+
115+
}
116+
break;
117+
}
118+
return false
119+
120+
});
121+
localStorage.setItem('notes',JSON.stringify(notes_array));
122+
}
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/////////////////////////////////////////
137+
138+
var textWrapper = document.querySelector('.ml3');
139+
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
140+
141+
anime.timeline({loop: true})
142+
.add({
143+
targets: '.ml3 .letter',
144+
opacity: [0,1],
145+
easing: "easeInOutQuad",
146+
duration: 2250,
147+
delay: (el, i) => 150 * (i+1)
148+
}).add({
149+
targets: '.ml3',
150+
opacity: 0,
151+
duration: 1000,
152+
easing: "easeOutExpo",
153+
delay: 1000
154+
});

0 commit comments

Comments
(0)

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