Skip to content

Commit c9054b8

Browse files
RiyaGupta89RiyaGupta89
committed
Added notes app
1 parent 5db8a28 commit c9054b8

File tree

4 files changed

+293
-0
lines changed

4 files changed

+293
-0
lines changed

‎Notes Keeping Website/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Notes Keeping App 📝
2+
3+
<!-- IMAGE -->
4+
5+
*This app allows you to create your own notes and save them in the local storgae which will not be deleted even when you reload the page. It will be deleted once you click on the delete note button.*
6+
7+
> Used Technologies:
8+
- HTML
9+
- CSS
10+
- JAVASCRIPT
11+
12+
13+
14+
### Steps to use:
15+
16+
- Download or clone the repositorY
17+
`
18+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
19+
`
20+
21+
- Go to the directory
22+
- Run the index.html file
23+
- Start writing!
24+

‎Notes Keeping Website/index.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Notes App</title>
8+
</head>
9+
<body>
10+
<nav class="navbar">
11+
<div id="logo">Notes App</div>
12+
<ul>
13+
<li> <a href="#">Home</a> </li>
14+
</ul>
15+
<form class="form-group" action="#">
16+
<input type="search" name="search" id="search" placeholder="Search">
17+
<button id="btn">Search</button>
18+
</form>
19+
</nav>
20+
21+
<div class="container">
22+
<h1>Welcome to Notes App</h1>
23+
<div class="border">
24+
<label for="addNote">Add a Note</label> <br>
25+
<textarea name="textarea" id="textarea" cols="80" rows="5"></textarea> <br>
26+
<button id="myBtn">Add Note</button>
27+
</div>
28+
<hr class="hrStyle">
29+
<h1>Your Notes</h1>
30+
<hr class="hrStyle">
31+
<div id="notes" class="notesBox"> </div>
32+
<script src="script.js"></script>
33+
</body>
34+
</html>

‎Notes Keeping Website/script.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
console.log("Welcome to Magic notes app. Write your notes here.");
2+
showNotes();
3+
4+
let myBtn = document.getElementById('myBtn');
5+
6+
myBtn.addEventListener('click', function (e) {
7+
let textArea = document.getElementById('textarea');
8+
let notes = localStorage.getItem('notes');
9+
if (notes == null) {
10+
notesObj = [];
11+
} else {
12+
notesObj = JSON.parse(notes);
13+
}
14+
notesObj.push(textArea.value);
15+
localStorage.setItem("notes", JSON.stringify(notesObj));
16+
17+
textArea.value = " ";
18+
showNotes();
19+
})
20+
21+
function showNotes() {
22+
23+
let notes = localStorage.getItem('notes');
24+
if (notes == null) {
25+
notesObj = [];
26+
}
27+
else {
28+
notesObj = JSON.parse(notes);
29+
}
30+
console.log(notesObj);
31+
let html = "";
32+
notesObj.forEach(function (element, index) {
33+
34+
html += `<div class="noteBox">
35+
<h3 class="noteHeading">Note ${index + 1}</h3>
36+
<p class="paraHeading">${element}</p>
37+
<button class="buttonHeading" id="${index}" onclick="deleteNote(this.id)">Delete Note</button>
38+
</div>`;
39+
40+
});
41+
42+
let notesElem = document.getElementById('notes');
43+
if (notesObj.length !== 0) {
44+
notesElem.innerHTML = html;
45+
} else {
46+
notesElem.innerHTML = `Nothing to show, create a new note from "Add a note" section above.`;
47+
}
48+
49+
}
50+
51+
52+
53+
54+
function deleteNote(index) {
55+
56+
57+
let notes = localStorage.getItem('notes');
58+
59+
if (notes == null) {
60+
notesObj = [];
61+
} else {
62+
notesObj = JSON.parse(notes);
63+
}
64+
65+
notesObj.splice(index, 1);
66+
localStorage.setItem('notes', JSON.stringify(notesObj));
67+
showNotes();
68+
}
69+
70+
let search = document.getElementById('search');
71+
search.addEventListener('input', function () {
72+
73+
let inputVal = search.value;
74+
75+
76+
let noteBoxs = document.getElementsByClassName('noteBox');
77+
Array.from(noteBoxs).forEach(function (element) {
78+
let boxTxt = document.getElementsByTagName('p')[0].innerHTML;
79+
if (boxTxt.includes(inputVal)) {
80+
element.style.display = "block";
81+
} else {
82+
element.style.display = "none";
83+
}
84+
85+
})
86+
})

‎Notes Keeping Website/style.css

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: Arial, Helvetica, sans-serif;
5+
}
6+
7+
#logo {
8+
float: left;
9+
margin: 14px 25px;
10+
font-size: 26px;
11+
12+
}
13+
14+
a {
15+
text-decoration: none;
16+
color: #fff;
17+
}
18+
19+
ul li {
20+
list-style: none;
21+
margin: 21px 30px;
22+
font-size: 15px;
23+
}
24+
a:hover{
25+
color: #eee;
26+
}
27+
28+
ul {
29+
display: inline-block;
30+
}
31+
32+
form {
33+
display: inline-block;
34+
float: right;
35+
}
36+
37+
.navbar {
38+
background-color: rgb(83, 81, 81);
39+
height: 60px;
40+
color: #fff;
41+
}
42+
43+
.form-group {
44+
margin: 10px 5px;
45+
46+
}
47+
48+
#search, #btn {
49+
padding: 10px;
50+
border-radius: 5px;
51+
border: none;
52+
53+
}
54+
55+
#btn {
56+
color: green;
57+
border: 1px solid green;
58+
font-size: 15px;
59+
}
60+
61+
#btn:hover{
62+
background-color: green;
63+
color: #fff;
64+
}
65+
66+
.container {
67+
margin: 0 auto;
68+
width: 50%;
69+
text-align: left;
70+
}
71+
72+
h1{
73+
font-weight: normal;
74+
margin: 10px 10px 10px 0;
75+
}
76+
77+
label {
78+
font-size: 15px;
79+
font-weight: bold;
80+
}
81+
82+
textarea {
83+
border-radius: 5px;
84+
border: 2px solid #8ba9c4;
85+
margin: 5px 5px 5px 0;
86+
}
87+
88+
#myBtn, .buttonHeading {
89+
background-color: #227ece;
90+
color: #fff;
91+
padding: 6px 11px;
92+
border: none;
93+
border-radius: 5px;
94+
font-size: 14px;
95+
}
96+
97+
.buttonHeading:hover {
98+
background-color: #3c8bd1;
99+
}
100+
101+
#myBtn:hover {
102+
background-color: #3686cc;
103+
}
104+
105+
.border {
106+
border: 2px solid rgb(231, 230, 230);
107+
border-radius: 5px;
108+
padding: 15px 13px;
109+
}
110+
111+
.hrStyle {
112+
margin-top: 10px;
113+
border: 1px solid rgb(231, 230, 230);
114+
}
115+
116+
#notes {
117+
display: flex;
118+
flex-wrap: wrap;
119+
padding: 10px;
120+
}
121+
122+
.noteBox {
123+
border: 1px solid rgb(231, 230, 230);
124+
border-radius: 5px;
125+
padding: 10px;
126+
}
127+
128+
.notesBox {
129+
display: flex;
130+
justify-content: space-between;
131+
}
132+
133+
.noteHeading {
134+
font-weight: bold;
135+
font-size: 20px;
136+
}
137+
138+
.paraHeading {
139+
font-size: 16px;
140+
margin: 7px 7px 7px 0;
141+
}
142+
143+
.block {
144+
display: block;
145+
}
146+
147+
.none {
148+
display: none;
149+
}

0 commit comments

Comments
 (0)