Skip to content

Commit 401f004

Browse files
Crystalite0201Crystalite0201
committed
Merge pull request #1 from Crystalite0201/main-1
Sanjukta Sarkar ---Quick notes
2 parents 7d1ffc4 + 88a4819 commit 401f004

File tree

3 files changed

+226
-2
lines changed

3 files changed

+226
-2
lines changed

‎App.svelte‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
<script>
2+
3+
import { onMount } from 'svelte';
4+
import { openDB } from 'idb';
5+
let pages = [];
6+
let currentPageIndex = 0;
7+
let currentTitle = "";
8+
let currentNote = "";
9+
let db;
10+
onMount(async () => {
11+
db = await openDB('notes-db', 1, {
12+
upgrade(db) {
13+
db.createObjectStore('notes');
14+
},
15+
});
16+
const savedPages = await db.get('notes', 'pages');
17+
if (savedPages) {
18+
pages = savedPages;
19+
selectPage(0);
20+
} else {
21+
addPage();
22+
}
23+
});
24+
async function saveNote() {
25+
const storedPageName = pages[currentPageIndex];
26+
if (storedPageName != currentTitle) {
27+
await db.delete('notes', storedPageName);
28+
pages[currentPageIndex] = currentTitle;
29+
}
30+
await db.put('notes', currentNote, currentTitle);
31+
await db.put('notes', pages, 'pages');
32+
}
33+
function addPage() {
34+
const newPageTitle = `New Page ${pages.length + 1}`;
35+
pages = [...pages, newPageTitle];
36+
selectPage(pages.length - 1);
37+
}
38+
async function deletePage(index) {
39+
const pageTitle = pages[index];
40+
await db.delete('notes', pageTitle);
41+
pages = pages.filter((_, i) => i !== index);
42+
await db.put('notes', pages, 'pages');
43+
if (pages.length === 0) {
44+
addPage();
45+
} else {
46+
selectPage(Math.min(index, pages.length - 1));
47+
}
48+
}
49+
async function selectPage(index) {
50+
currentPageIndex = index;
51+
currentTitle = pages[currentPageIndex];
52+
currentNote = await db.get('notes', currentTitle) || "";
53+
}
54+
</script>
55+
56+
<main>
57+
Hello World
58+
</main>
59+
<div class="app-container">
60+
<main class="main-content">
61+
<div class="header">
62+
<input
63+
type="text"
64+
bind:value={currentTitle}
65+
class="title-input"
66+
placeholder="Page Title"
67+
/>
68+
<button class="save-button" on:click={saveNote}>Save Note</button>
69+
</div>
70+
<textarea
71+
class="textarea"
72+
placeholder="Write your note here..."
73+
bind:value={currentNote}
74+
></textarea>
75+
</main>
76+
77+
<style>
78+
<aside class="sidebar">
79+
<div class="sidebar-content">
80+
<ul class="sidebar-list">
81+
{#each pages as page, index}
82+
<li class="sidebar-item">
83+
<button
84+
on:click={() => selectPage(index)}
85+
class="sidebar-button {index === currentPageIndex ? 'bg-dark-grey' : ''}"
86+
>
87+
{page}
88+
</button>
89+
<button
90+
on:click={() => deletePage(index)}
91+
class="delete-button"
92+
title="Delete page"
93+
>
94+
×
95+
</button>
96+
</li>
97+
{/each}
98+
<li class="text-center"><button on:click={addPage} class="font-medium">+ Add page</button></li>
99+
</ul>
100+
</div>
101+
</aside>
102+
</div>
103+
104+
<style>
105+
:global(body) {
106+
margin: 0;
107+
font-family: Arial, sans-serif;
108+
background-color: #f0f0f0;
109+
}
110+
.app-container {
111+
display: flex;
112+
height: 100vh;
113+
}
114+
.sidebar {
115+
width: 200px;
116+
background: #e0f7fa;
117+
border-right: 1px solid #b2ebf2;
118+
overflow-y: auto;
119+
}
120+
.sidebar-content {
121+
padding: 20px;
122+
}
123+
.sidebar-list {
124+
list-style-type: none;
125+
padding: 0;
126+
margin: 0;
127+
}
128+
.sidebar-item {
129+
display: flex;
130+
align-items: center;
131+
margin-bottom: 10px;
132+
}
133+
.sidebar-button {
134+
background: #80deea;
135+
padding: 10px 15px;
136+
border-radius: 8px;
137+
width: 100%;
138+
text-align: left;
139+
border: 1px solid #4dd0e1;
140+
cursor: pointer;
141+
transition: background-color 0.2s ease;
142+
flex-grow: 1;
143+
margin-bottom: 0;
144+
}
145+
.sidebar-button:hover {
146+
background-color: #4dd0e1;
147+
}
148+
.delete-button {
149+
background-color: #e57373;
150+
color: white;
151+
border: none;
152+
border-radius: 50%;
153+
width: 24px;
154+
height: 24px;
155+
font-size: 18px;
156+
line-height: 1;
157+
cursor: pointer;
158+
margin-left: 8px;
159+
display: flex;
160+
align-items: center;
161+
justify-content: center;
162+
transition: background-color 0.2s ease;
163+
}
164+
.delete-button:hover {
165+
background-color: #ef5350;
166+
}
167+
.main-content {
168+
flex-grow: 1;
169+
padding: 30px;
170+
display: flex;
171+
flex-direction: column;
172+
overflow-y: auto;
173+
}
174+
.header {
175+
display: flex;
176+
justify-content: space-between;
177+
align-items: center;
178+
margin-bottom: 20px;
179+
}
180+
.title-input {
181+
font-size: 24px;
182+
font-weight: bold;
183+
border: none;
184+
background: transparent;
185+
outline: none;
186+
width: 70%;
187+
}
188+
.save-button {
189+
background-color: #558fd2;
190+
color: rgb(255, 255, 255);
191+
padding: 10px 20px;
192+
border-radius: 8px;
193+
font-weight: 600;
194+
font-size: 14px;
195+
border: none;
196+
cursor: pointer;
197+
transition: background-color 0.2s ease;
198+
}
199+
.save-button:hover {
200+
background-color: #88b9e4;
201+
}
202+
.textarea {
203+
width: 100%;
204+
height: 300px;
205+
background-color: #ffffff;
206+
border: 1px solid #e0e0e0;
207+
border-radius: 8px;
208+
padding: 15px;
209+
font-size: 16px;
210+
resize: vertical;
211+
margin-top: 10px;
212+
box-sizing:border-box;
213+
}
214+
.text-center {
215+
text-align: center;
216+
}
217+
.font-medium {
218+
font-weight: 500;
219+
}
220+
</style>

‎jsconfig.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"compilerOptions": {
33
"moduleResolution": "bundler",
4+
"moduleResolution": "Node",
45
"target": "ESNext",
56
"module": "ESNext",
67
/**
@@ -29,4 +30,5 @@
2930
* to avoid limiting type declarations.
3031
*/
3132
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
32-
}
33+
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte","node_modules/idb/index.d.ts"]
34+
}

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
{
23
"name": "sticky-notes",
34
"private": true,
@@ -20,6 +21,7 @@
2021
},
2122
"dependencies": {
2223
"@popperjs/core": "^2.11.8",
24+
"idb": "^8.0.0",
2325
"tailwind-merge": "^2.3.0"
2426
}
25-
}
27+
}

0 commit comments

Comments
 (0)