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 63ffab3

Browse files
working on edit note functionality and almost project ready to deploy
1 parent 60cffa8 commit 63ffab3

File tree

3 files changed

+108
-12
lines changed

3 files changed

+108
-12
lines changed

‎css/style.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,31 @@
1+
.main-container
2+
{
3+
max-width: 60%;
4+
}
5+
.title-area
6+
{
7+
height: 40px;
8+
}
9+
#note_title
10+
{
11+
border: 1px solid black;
12+
}
13+
.data-area
14+
{
15+
min-height: 200px !important;
16+
}
17+
.note_container
18+
{
19+
min-width: 100%;
20+
}
21+
.notes
22+
{
23+
width: 100%;
24+
}
25+
#note_data
26+
{
27+
resize: none; border: 1px solid black
28+
}
129
footer
230
{
331
min-height: 70px;
@@ -15,4 +43,52 @@ button
1543
.main-container
1644
{
1745
min-height: 100vh;
46+
}
47+
.fa
48+
{
49+
padding: 3px 0 0 0;
50+
cursor:pointer;
51+
}
52+
.fa-pencil-square-o
53+
{
54+
margin-left: 8.5rem;
55+
}
56+
@media screen and (max-width: 900px)
57+
{
58+
.main-container
59+
{
60+
max-width: 80% !important;
61+
}
62+
}
63+
@media screen and (max-width: 500px)
64+
{
65+
.main-container
66+
{
67+
max-width: 90% !important;
68+
}
69+
.card
70+
{
71+
max-width: 90% !important;
72+
}
73+
.note_container
74+
{
75+
display: flex;
76+
flex-direction: column;
77+
align-items: center;
78+
79+
}
80+
.notes
81+
{
82+
display: flex;
83+
flex-direction: column;
84+
align-items: center;
85+
}
86+
.fcontent h6
87+
{
88+
font-size: 0.8rem !important;
89+
}
90+
.ml3
91+
{
92+
font-size: 1.5rem;
93+
}
1894
}

‎index.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<body style="padding-right: 0px !important;">
1616

1717
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
18-
<a class="navbar-brand" href="#">NoteFizz</a>
18+
<a class="navbar-brand" href="/">NoteFizz</a>
1919
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
2020
<span class="navbar-toggler-icon"></span>
2121
</button>
@@ -38,20 +38,20 @@
3838
</nav>
3939

4040
<div id="alert"></div>
41-
<div class="main-container mx-auto"style="max-width: 60%; box-sizing: border-box;">
41+
<div class="main-container mx-auto">
4242

4343
<h2 class=" ml3 mt-5 mb-2"><span class="letters">Welcome to NoteFizz App</span></h2>
4444

4545
<form>
4646

4747
<div class="form-group">
48-
<div class="title-area my-4"style="height: 40px;">
48+
<div class="title-area my-4">
4949

50-
<input type="text" onblur="unique_notes_verifier()" class="form-control mt-3" id="note_title" placeholder="Note Title" style="border: 1px solid black;">
50+
<input type="text" onkeyup="unique_notes_verifier()" class="form-control mt-3" id="note_title" placeholder="Note Title">
5151
<p id="title_error"></p>
5252
</div>
53-
<div class="data-area my-4"style=" min-height: 200px !important;">
54-
<textarea class="form-control" id="note_data" rows="7" placeholder="Your Note"style="resize: none; border: 1px solid black;"></textarea>
53+
<div class="data-area my-4">
54+
<textarea class="form-control" id="note_data" rows="7" placeholder="Your Note"></textarea>
5555
<p id="data_error"></p>
5656
</div>
5757
</div>
@@ -63,13 +63,13 @@ <h2 class=" ml3 mt-5 mb-2"><span class="letters">Welcome to NoteFizz App</span><
6363
<input type="checkbox" class="custom-control-input" id="fetchnote" onclick="switch_state()">
6464
<label class="custom-control-label" for="fetchnote">Fetch Saved Notes on Startup</label>
6565
</div>
66-
<button type="button" class="btn btn-dark" onclick="data_validator()">Add Note</button>
66+
<button type="button" id="addbtn" class="btn btn-dark" onclick="data_validator()">Add Note</button>
6767
<button type="button" class="btn btn-dark" onclick="saved_notes_display()">Fetch Saved Notes</button>
6868
<button type="button" class="btn btn-dark" data-toggle="modal" data-target="#exampleModal" >Clear Local Storage</button>
6969
</form>
70-
<div class="note_container my-5" style="min-width: 100%; box-sizing: border-box;" id="nc">
70+
<div class="note_container my-5" id="nc">
7171
<h4>Your Notes</h4>
72-
<div class="notes d-flex flex-wrap justify-content-between" style="width: 100%;box-sizing: border-box;"id="nt">
72+
<div class="notes d-flex flex-wrap justify-content-start"id="nt">
7373

7474
</div>
7575
</div>

‎js/script.js‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
/////////////////// getting the note container/////////////////
22
main_container = document.querySelector(".note_container");
3+
document.getElementById("storenote").checked=true;
4+
document.getElementById("storenote").disabled=true;
35
///////////////////////fetching the value on startup////////////////
46
fetchnote_value = localStorage.getItem("fetchnote");
57

@@ -87,9 +89,11 @@ function add_note(title_el, data_el) {
8789
notes_count + 1
8890
}" style=" max-width: 18rem; min-width: 18rem;">
8991
<div class="card-header row container-fluid justify-content-between" style="margin: 0px !important">
90-
Note: ${notes_count + 1} <i" onclick="notedelete(${
92+
Note: ${notes_count + 1}
93+
<i class="fa fa-pencil-square-o" onclick="edit_note(${notes_count + 1})" aria-hidden="true"></i>
94+
<i" onclick="notedelete(${
9195
notes_count + 1
92-
},'${title_el}')"style="padding: 3px 0 0 0; cursor:pointer;" aria-hidden="true"></i>
96+
},'${title_el}')"class="fa fa-trash" aria-hidden="true"></i>
9397
9498
</div>
9599
<div class="card-body">
@@ -161,15 +165,18 @@ function unique_notes_verifier() {
161165
cardsTitle_li.push(element.innerHTML);
162166
});
163167
for (let j = 0; j < cardsTitle_li.length; j++) {
164-
if (input.toLowerCase()==cardsTitle_li[j].toLowerCase()) {
168+
if (cardsTitle_li[j].toLowerCase().indexOf(input.toLowerCase())>-1) {
165169
error_message_shower("Title Already Exist");
170+
document.getElementById("addbtn").disabled=true;
166171
} else {
167172
terror = document.getElementById("title_error");
168173
terror.innerHTML = "";
169174
terror.setAttribute("style", "color: red; font-size: 12px;");
170175
t_el = document
171176
.getElementById("note_title")
172177
.setAttribute("style", "border: 1px solid green;");
178+
document.getElementById("addbtn").disabled=false;
179+
173180
}
174181
}
175182
}
@@ -215,6 +222,19 @@ function note_search(e) {
215222
cards[i].parentNode.parentNode.style.display = "none";
216223
}
217224
}
225+
}
226+
227+
function edit_note(id)
228+
{
229+
title = document.getElementById("note_title");
230+
data = document.getElementById("note_data");
231+
note = document.getElementById(id).children[0].children[1];
232+
title.value=note.children[0].innerText;
233+
data.value = note.children[1].innerText;
234+
console.log(id)
235+
236+
237+
218238
}
219239
//////////////////////////////////////text transition using anime.js/////////////////////////////////////////
220240

0 commit comments

Comments
(0)

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