Skip to content

Commit 51bed6b

Browse files
tajulafreentajulafreen
committed
Add the project
1 parent 3f1e832 commit 51bed6b

File tree

3 files changed

+197
-0
lines changed

3 files changed

+197
-0
lines changed

‎Source-Code/NotesKeeper/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,29 @@
77
<link rel="stylesheet" href="style.css">
88
</head>
99
<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" type="submit">Search</button>
18+
</form>
19+
</nav>
20+
21+
<div class="container">
22+
<h1>Welcome to Notes App</h1>
23+
<div class="note-input">
24+
<label for="textarea">Add a Note</label><br>
25+
<textarea name="textarea" id="textarea" cols="80" rows="5" placeholder="Type your note here..."></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">No notes added yet.</div>
32+
</div>
1033
<script src="script.js"></script>
1134
</body>
1235
</html>

‎Source-Code/NotesKeeper/script.js

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
console.log('Welcome to Magic Notes App!');
2+
3+
// Function Declaration Before Use
4+
function showNotes() {
5+
const notesObj = JSON.parse(localStorage.getItem('notes')) || [];
6+
const notesElem = document.getElementById('notes');
7+
8+
if (notesObj.length === 0) {
9+
notesElem.innerHTML = 'No notes added yet.';
10+
return;
11+
}
12+
13+
notesElem.innerHTML = notesObj
14+
.map(
15+
(note, index) => `
16+
<div class="noteBox">
17+
<h3 class="noteHeading">Note ${index + 1}</h3>
18+
<p class="paraHeading">${note}</p>
19+
<button class="buttonHeading" onclick="deleteNote(${index})">Delete Note</button>
20+
</div>
21+
`,
22+
)
23+
.join('');
24+
}
25+
26+
// Event Listener for Add Note Button
27+
document.getElementById('myBtn').addEventListener('click', () => {
28+
const textArea = document.getElementById('textarea');
29+
const noteContent = textArea.value.trim();
30+
if (!noteContent) {
31+
alert('Please enter a note!');
32+
return;
33+
}
34+
35+
const notesObj = JSON.parse(localStorage.getItem('notes')) || [];
36+
notesObj.push(noteContent);
37+
localStorage.setItem('notes', JSON.stringify(notesObj));
38+
textArea.value = '';
39+
showNotes();
40+
});
41+
42+
// Delete Note Function
43+
// eslint-disable-next-line no-unused-vars
44+
function deleteNote(index) {
45+
const notesObj = JSON.parse(localStorage.getItem('notes')) || [];
46+
notesObj.splice(index, 1);
47+
localStorage.setItem('notes', JSON.stringify(notesObj));
48+
showNotes();
49+
}
50+
51+
// Search Notes
52+
document.getElementById('search').addEventListener('input', function () {
53+
const inputVal = this.value.toLowerCase().trim();
54+
const noteBoxes = document.getElementsByClassName('noteBox');
55+
56+
Array.from(noteBoxes).forEach((element) => {
57+
const boxTxt = element
58+
.querySelector('.paraHeading')
59+
.innerText.toLowerCase();
60+
element.style.display = boxTxt.includes(inputVal) ? 'block' : 'none';
61+
});
62+
});
63+
64+
// Initial Call
65+
showNotes();

‎Source-Code/NotesKeeper/style.css

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: Arial, sans-serif;
9+
background-color: #f4f4f9;
10+
padding: 20px;
11+
}
12+
13+
.navbar {
14+
display: flex;
15+
justify-content: space-between;
16+
align-items: center;
17+
background-color: #333;
18+
padding: 10px 20px;
19+
color: white;
20+
}
21+
22+
.navbar #logo {
23+
font-size: 24px;
24+
font-weight: bold;
25+
}
26+
27+
.navbar ul {
28+
list-style: none;
29+
display: flex;
30+
}
31+
32+
.navbar ul li {
33+
margin-left: 20px;
34+
}
35+
36+
.navbar ul li a {
37+
color: white;
38+
text-decoration: none;
39+
font-size: 18px;
40+
}
41+
42+
.form-group input {
43+
padding: 5px;
44+
margin-right: 10px;
45+
}
46+
47+
.form-group button {
48+
padding: 5px 10px;
49+
background-color: #ff6700;
50+
border: none;
51+
color: white;
52+
cursor: pointer;
53+
}
54+
55+
.container {
56+
margin-top: 30px;
57+
}
58+
59+
.note-input {
60+
background: white;
61+
padding: 20px;
62+
border-radius: 5px;
63+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
64+
}
65+
66+
.note-input label {
67+
font-size: 18px;
68+
font-weight: bold;
69+
}
70+
71+
.note-input textarea {
72+
width: 100%;
73+
padding: 10px;
74+
margin-top: 10px;
75+
border: 1px solid #ccc;
76+
border-radius: 5px;
77+
resize: none;
78+
}
79+
80+
.note-input button {
81+
margin-top: 10px;
82+
padding: 10px 20px;
83+
background-color: #007bff;
84+
color: white;
85+
border: none;
86+
border-radius: 5px;
87+
cursor: pointer;
88+
}
89+
90+
.hrStyle {
91+
margin: 20px 0;
92+
}
93+
94+
.notesBox {
95+
background: white;
96+
display: flex;
97+
gap: 30px;
98+
padding: 20px;
99+
border-radius: 5px;
100+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
101+
min-height: 100px;
102+
text-align: center;
103+
font-size: 18px;
104+
color: #555;
105+
}
106+
107+
.buttonHeading {
108+
padding: 5px 20px;
109+
}

0 commit comments

Comments
 (0)