Skip to content

feat: enhanced notes app with theme toggle, UI/UX improvements, and new productivity features #197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
venisha-kalola merged 1 commit into from
Oct 28, 2025
Merged

feat: enhanced notes app with theme toggle, UI/UX improvements, and new productivity features #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 65 additions & 27 deletions projects/notes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,62 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notes App</title>
<title>Notes App with Theme Switcher</title>
<link rel="stylesheet" href="styles.css">

</head>

<body>
<div class="theme-toggle-container">
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme" aria-pressed="false">
<svg class="theme-icon" id="themeIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Moon icon (default) -->
<path class="moon-icon" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<!-- Sun icon (hidden by default) -->
<g class="sun-icon" style="display: none;">
<circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" />
<line x1="12" y1="1" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<line x1="12" y1="21" x2="12" y2="23" stroke="currentColor" stroke-width="2"
stroke-linecap="round" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="currentColor" stroke-width="2"
stroke-linecap="round" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="currentColor" stroke-width="2"
stroke-linecap="round" />
<line x1="1" y1="12" x2="3" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<line x1="21" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2"
stroke-linecap="round" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="currentColor" stroke-width="2"
stroke-linecap="round" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="currentColor" stroke-width="2"
stroke-linecap="round" />
</g>
</svg>
<span class="sr-only">Dark Mode</span>
</button>
</div>

<div class="container">
<div class="left-panel">
<div class="header-row">
<h1>Create Note</h1>
<button class="toggle-btn" id="themeToggle">🌙</button>
</div>

<!-- Enhanced Form -->
<div class="notes-form-container">
<form id="form" class="notes-form" aria-labelledby="form-title">
<h2 id="form-title" class="form-title">Add New Note</h2>

<div class="form-group">
<label for="title" class="form-label">
Title
<span class="required-indicator" aria-hidden="true">*</span>
</label>
<input
type="text"
id="title"
class="form-input"
placeholder="Enter note title"
aria-required="true"
required
maxlength="100"
>
<input type="text" id="title" class="form-input" placeholder="Enter note title"
aria-required="true" required maxlength="100">
<div class="character-count">
<span id="title-count">0</span>/100
</div>
Expand All @@ -55,15 +79,8 @@ <h2 id="form-title" class="form-title">Add New Note</h2>
Content
<span class="required-indicator" aria-hidden="true">*</span>
</label>
<textarea
id="content"
class="form-textarea"
placeholder="Write your note here..."
aria-required="true"
required
maxlength="1000"
rows="5"
></textarea>
<textarea id="content" class="form-textarea" placeholder="Write your note here..."
aria-required="true" required maxlength="1000" rows="4"></textarea>
<div class="character-count">
<span id="content-count">0</span>/1000
</div>
Expand All @@ -80,26 +97,47 @@ <h2 id="form-title" class="form-title">Add New Note</h2>
</form>
</div>
</div>

<div class="right-panel">
<h1>My Notes</h1>
<div class="notes-header">
<input type="text" id="search" placeholder="Search notes...">
</div>
<div class="filter-bar">
<label>Filter by tag:</label>
<select id="tagFilter">
<label for="tagFilter">Filter by tag:</label>
<select id="tagFilter" class="form-select">
<option value="">All tags</option>
<option value="personal">Personal</option>
<option value="work">Work</option>
<option value="ideas">Ideas</option>
<option value="important">Important</option>
<option value="study">Study</option>
</select>
</div>
<div class="grid" id="notes"></div>
</div>
</div>

<script src="main.js"></script>

<!-- Delete Confirmation Modal -->
<div class="modal-overlay" id="deleteModal">
<div class="modal">
<div class="modal-header">
<svg class="modal-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<h3 class="modal-title">Delete Note</h3>
</div>
<div class="modal-body">
Are you sure you want to delete this note? This action cannot be undone.
</div>
<div class="modal-footer">
<button class="modal-btn modal-btn-cancel" id="cancelDelete">Cancel</button>
<button class="modal-btn modal-btn-confirm" id="confirmDelete">Delete</button>
</div>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
Loading