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 51bed6b

Browse files
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‎

Lines changed: 23 additions & 0 deletions
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‎

Lines changed: 65 additions & 0 deletions
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‎

Lines changed: 109 additions & 0 deletions
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)

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