From 96007c9235612ea2e5292949a29a5eb406d5d59e Mon Sep 17 00:00:00 2001 From: tronbeing3030 Date: Fri, 17 Oct 2025 20:53:34 +0530 Subject: [PATCH 1/2] Enhanced notes app form UI and structure --- projects/notes/index.html | 13 +++-- projects/notes/main.js | 24 +++++++- projects/notes/styles.css | 114 +++++++++++++++++++++++++++----------- 3 files changed, 111 insertions(+), 40 deletions(-) diff --git a/projects/notes/index.html b/projects/notes/index.html index aa25946..a981c7a 100644 --- a/projects/notes/index.html +++ b/projects/notes/index.html @@ -10,11 +10,16 @@
-

Notes

-
-
+

NOTES

+
+ + + + + +
-

Add search, categories, dark/light mode.

+

Add search, categories
Dark/Light mode available

diff --git a/projects/notes/main.js b/projects/notes/main.js index fb9a45e..75c240f 100644 --- a/projects/notes/main.js +++ b/projects/notes/main.js @@ -1,6 +1,24 @@ -const form = document.getElementById('form'); const title = document.getElementById('title'); const tag = document.getElementById('tag'); const grid = document.getElementById('notes'); +const form = document.getElementById('form'); +const title = document.getElementById('title'); +const tag = document.getElementById('tag'); +const grid = document.getElementById('notes'); let notes = []; -form.addEventListener('submit', e => { e.preventDefault(); notes.unshift({ id: crypto.randomUUID(), title: title.value, tag: tag.value || null, created: Date.now() }); title.value = ''; tag.value = ''; render(); }); -function render() { grid.innerHTML = ''; for (const n of notes) { const card = document.createElement('article'); card.className = 'card'; card.innerHTML = `

${n.title}

${n.tag ? `${n.tag}` : ''}`; card.querySelector('.del').addEventListener('click', () => { notes = notes.filter(x => x.id !== n.id); render(); }); grid.appendChild(card); } } +form.addEventListener('submit', e => { + e.preventDefault(); + notes.unshift({ id: crypto.randomUUID(), title: title.value, tag: tag.value || null, created: Date.now() }); + title.value = ''; tag.value = ''; render(); }); +function render() { + grid.innerHTML = ''; + for (const n of notes) { + const card = document.createElement('article'); + card.className = 'card'; + card.innerHTML = `

${n.title}

${n.tag ? `${n.tag}` : ''}`; + card.querySelector('.del').addEventListener('click', () => { + notes = notes.filter(x => x.id !== n.id); + render(); + }); + grid.appendChild(card); + } +} render(); // TODOs: persist to localStorage; full-text search; list by tag; theme toggle diff --git a/projects/notes/styles.css b/projects/notes/styles.css index 94108bd..b825bb8 100644 --- a/projects/notes/styles.css +++ b/projects/notes/styles.css @@ -1,52 +1,100 @@ body { - font-family: system-ui; - background: #0f0f12; - color: #eef1f8; - margin: 0; - padding: 2rem; - display: grid; - place-items: center + font-family: Arial, Helvetica, sans-serif; + background: #0f0f12; + color: #eef1f8; + margin: 0; + padding: 2rem; + display: grid; + place-items: center; } main { - max-width: 760px; - width: 100% + max-width: 760px; + /* max-width: 600px; */ + width: 100%; +} + +form { + border: 1px solid #24242c; + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-bottom: 1.5rem; + padding: 1rem; + border-radius: 0.5rem; +} + +form input { + padding: 0.5rem; + border: 1px solid #24242c; + border-radius: 0.4rem; + background: #1e1e24; + color: #eef1f8; } .grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: .75rem + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 0.75rem; + margin-bottom: 1em; } .card { - background: #17171c; - border: 1px solid #262631; - border-radius: .5rem; - padding: .75rem; - display: flex; - flex-direction: column; - gap: .5rem + background: #17171c; + border: 1px solid #262631; + border-radius: 0.5rem; + padding: 0.75rem; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 0.5rem; } .tag { - background: #6ee7b7; - color: #0b1020; - padding: .2rem .4rem; - border-radius: .3rem; - align-self: flex-start + background: #00ddb5; + color: #0b1020; + padding: 0.2rem 0.4rem; + border-radius: 0.3rem; + align-self: flex-start; + text-transform: lowercase; +} + +p { + margin: 0; + text-align: center; } button { - background: #ef4444; - color: white; - border: none; - border-radius: .4rem; - padding: .4rem .6rem; - cursor: pointer + background: #ef4444; + text-transform: uppercase; + color: #0b1020; + border: none; + border-radius: 0.4rem; + padding: 0.4rem 0.6rem; + cursor: pointer; + font-size: 1rem; + font-weight: bold; +} + +form button { + border: 1px solid #ef4444; + background: none; + color: #ef4444; + /* max-width: 25%; */ +} + +form button:hover { + background: #ef4444; + color: #0b1020; } .notes { - color: #a6adbb; - font-size: .9rem -} \ No newline at end of file + color: #a6adbb; + font-size: 0.9rem; +} + +h3 { + margin: 0; + text-transform: uppercase; + font-size: 2rem; +} From a634933538a126e12dd3bc07adc52f8560b02c6c Mon Sep 17 00:00:00 2001 From: tronbeing3030 Date: Sun, 19 Oct 2025 13:33:47 +0530 Subject: [PATCH 2/2] Enhanced UI for note-taking app --- projects/notes/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/notes/index.html b/projects/notes/index.html index 7d00911..7c6a6c5 100644 --- a/projects/notes/index.html +++ b/projects/notes/index.html @@ -19,7 +19,7 @@

Create Note

- +