Skip to content

Commit 2ba0798

Browse files
Hrishikesh-DalalHrishikesh-Dalal
authored
Merge pull request #113 from rjvrr/Toggle-theme
Toggle theme #113
2 parents e5176db + 8e0b1d3 commit 2ba0798

3 files changed

Lines changed: 189 additions & 204 deletions

File tree

‎projects/notes/index.html‎

Lines changed: 31 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,37 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
43
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width,initial-scale=1">
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
76
<title>Notes App</title>
8-
<link rel="stylesheet" href="./styles.css">
7+
<link rel="stylesheet" href="styles.css">
98
</head>
10-
119
<body>
12-
<main class="container">
13-
<section class="left-panel">
14-
<div class="header-row">
15-
<h1>Create Note</h1>
16-
<button id="themeToggle" class="toggle-btn">🌙</button>
17-
</div>
18-
<form id="form">
19-
<input id="title" placeholder="Title" required />
20-
<input id="tag" placeholder="Tag (optional)" />
21-
<textarea id="content" placeholder="Write your content here..." rows="7" required></textarea>
22-
<button>Add Note</button>
23-
</form>
24-
</section>
25-
26-
<section class="right-panel">
27-
<div class="notes-header">
28-
<h1>Your Notes</h1>
29-
<input type="text" id="search" placeholder="Search notes..." />
30-
</div>
31-
32-
<div class="filter-bar">
33-
<label for="tagFilter">Filter by Tag:</label>
34-
<select id="tagFilter">
35-
<option value="">All</option>
36-
</select>
37-
</div>
38-
39-
<div id="notes" class="grid"></div>
40-
</section>
41-
</main>
42-
43-
<script type="module" src="./main.js"></script>
10+
<div class="container">
11+
<div class="left-panel">
12+
<div class="header-row">
13+
<h1>Create Note</h1>
14+
<button class="toggle-btn" id="themeToggle">🌙</button>
15+
</div>
16+
<form id="form">
17+
<input type="text" id="title" placeholder="Title" required>
18+
<input type="text" id="tag" placeholder="Tag (optional)">
19+
<textarea id="content" placeholder="Write your note..." required></textarea>
20+
<button type="submit">Add Note</button>
21+
</form>
22+
</div>
23+
<div class="right-panel">
24+
<h1>My Notes</h1>
25+
<div class="notes-header">
26+
<input type="text" id="search" placeholder="Search notes...">
27+
</div>
28+
<div class="filter-bar">
29+
<label>Filter by tag:</label>
30+
<select id="tagFilter"></select>
31+
</div>
32+
<div class="grid" id="notes"></div>
33+
</div>
34+
</div>
35+
<script src="main.js"></script>
4436
</body>
45-
46-
</html>
37+
</html>

‎projects/notes/main.js‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ updateThemeIcon();
1515

1616
form.addEventListener('submit', e => {
1717
e.preventDefault();
18-
1918
const newNote = {
2019
id: crypto.randomUUID(),
2120
title: title.value.trim(),
@@ -24,7 +23,6 @@ form.addEventListener('submit', e => {
2423
created: Date.now(),
2524
pinned: false
2625
};
27-
2826
notes.unshift(newNote);
2927
saveNotes();
3028
title.value = '';
@@ -40,19 +38,18 @@ function saveNotes() {
4038

4139
function render(filterText = '', tagFilterValue = '') {
4240
grid.innerHTML = '';
43-
4441
let filteredNotes = notes.filter(n =>
4542
(n.title.toLowerCase().includes(filterText.toLowerCase()) ||
46-
(n.tag && n.tag.toLowerCase().includes(filterText.toLowerCase())) ||
47-
n.content.toLowerCase().includes(filterText.toLowerCase()))
43+
(n.tag && n.tag.toLowerCase().includes(filterText.toLowerCase())) ||
44+
n.content.toLowerCase().includes(filterText.toLowerCase()))
4845
);
4946

5047
if (tagFilterValue) {
5148
filteredNotes = filteredNotes.filter(n => n.tag && n.tag.toLowerCase() === tagFilterValue.toLowerCase());
5249
}
5350

5451
if (filteredNotes.length === 0) {
55-
grid.innerHTML = `<p style="text-align:center; color:#a6adbb;">No notes found.</p>`;
52+
grid.innerHTML = `<p style="text-align: center; opacity: 0.6;">No notes found.</p>`;
5653
return;
5754
}
5855

@@ -62,14 +59,13 @@ function render(filterText = '', tagFilterValue = '') {
6259
const card = document.createElement('article');
6360
card.className = 'card';
6461
const date = new Date(n.created).toLocaleString();
65-
6662
card.innerHTML = `
6763
<div class="card-header">
6864
<h3>${n.title}</h3>
6965
<button class="pin">${n.pinned ? '📌' : '📍'}</button>
7066
</div>
7167
${n.tag ? `<span class="tag">${n.tag}</span>` : ''}
72-
<p class="content">${n.content}</p>
68+
<p>${n.content}</p>
7369
<div class="note-footer">
7470
<small>${date}</small>
7571
<button class="del">Delete</button>
@@ -95,7 +91,7 @@ function render(filterText = '', tagFilterValue = '') {
9591

9692
function populateTags() {
9793
const tags = [...new Set(notes.filter(n => n.tag).map(n => n.tag))];
98-
tagFilter.innerHTML = `<option value="">All</option>`;
94+
tagFilter.innerHTML = `<option value="">All Tags</option>`;
9995
tags.forEach(t => {
10096
const opt = document.createElement('option');
10197
opt.value = t;
@@ -120,5 +116,3 @@ function updateThemeIcon() {
120116

121117
render();
122118
populateTags();
123-
124-
// TODOs: persist to localStorage; full-text search; list by tag; theme toggle

0 commit comments

Comments
 (0)