From 6a4cdb19de119390c0de659864809642d0b9d4d5 Mon Sep 17 00:00:00 2001
From: Mahesh <maheshkolli888@gmail.com>
Date: Sun, 20 Oct 2024 07:59:18 +0530
Subject: [PATCH] added category to note

---
 index.html |  51 +++---
 script.js  | 157 ++++++++++++++++
 style.css  | 520 +++++++++++++++++++++++++++++++++++++++++++++--------
 3 files changed, 635 insertions(+), 93 deletions(-)
diff --git a/index.html b/index.html
index 500016e..c0236c3 100644
--- a/index.html
+++ b/index.html
@@ -4,20 +4,16 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Zen Note</title>
-
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-
-
-        <!-- Favicons -->
-        <link rel="shortcut icon" href="Images/logo.png">
-        <link rel="apple-touch-icon" href="Images/logo.png">
-        <link rel="apple-touch-icon" sizes="72x72" href="Images/logo.png">
-        <link rel="apple-touch-icon" sizes="114x114" href="Images/logo.png">
-        <link rel="apple-touch-icon" sizes="144x144" href="Images/logo.png">
-
-
-        
+    <!-- Favicons -->
+    <link rel="shortcut icon" href="Images/logo.png">
+    <link rel="apple-touch-icon" href="Images/logo.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="Images/logo.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="Images/logo.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="Images/logo.png">
+    <!-- Add this line -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
 </head>
 <nav>
     <ul>
@@ -29,18 +25,33 @@
 <body class="light-mode">
     <div class="container">
         <div class="container-head">
-        <h1>Zen Note</h1>
-        <button id="darkModeToggle">🌙</button>
-    </div>
+            <h1>Zen Note</h1>
+            <button id="darkModeToggle">🌙</button>
+        </div>
         <form id="entryForm">
-            <div id="fake-textarea" class="fake-textarea" contenteditable="true" data-placeholder="What did you learn today?"></div>
-            <input type="hidden" id="hiddenTextArea" name="textareaValue">
+            <div class="input-group">
+                <div id="fake-textarea" class="fake-textarea" contenteditable="true" data-placeholder="What did you learn today?"></div>
+                <input type="hidden" id="hiddenTextArea" name="textareaValue">
+                <div class="category-input">
+                    <select id="existingCategory" class="category-select">
+                        <option value="">Select or add new category</option>
+                        <option value="new">+ Add new category</option>
+                        <!-- Existing categories will be dynamically added here by JavaScript -->
+                    </select>
+                    <input type="text" id="newCategory" placeholder="Enter new category" class="category-text">
+                    <button type="submit">Add Entry</button>
+                </div>
+            </div>
             <span id="error-message" style="color: red; display: none;">This field is required.</span>
-            <button type="submit">Add Entry</button>
         </form>
+
+        <div class="categories-section">
+            <h2>Explore Your Interests</h2>
+            <div id="categoriesList" class="categories-grid"></div>
+        </div>
+
         <ul id="entriesList"></ul>
     </div>
-    
 
     <div id="snapshotModal" class="modal">
         <div class="modal-content">
@@ -54,4 +65,4 @@ <h1>Zen Note</h1>
     </div>
     <script src="script.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/script.js b/script.js
index 09bdadc..ac18b10 100644
--- a/script.js
+++ b/script.js
@@ -301,3 +301,160 @@ if (
 }
 
 renderEntries();
+
+// Add these functions to your existing JavaScript
+
+let categories = new Set();
+
+// Load categories from localStorage
+function loadCategories() {
+    const savedCategories = localStorage.getItem('categories');
+    if (savedCategories) {
+        categories = new Set(JSON.parse(savedCategories));
+        updateCategoryDropdown();
+        displayCategories();
+    }
+}
+
+// Save categories to localStorage
+function saveCategories() {
+    localStorage.setItem('categories', JSON.stringify([...categories]));
+}
+
+// Update the category dropdown
+function updateCategoryDropdown() {
+    const select = document.getElementById('existingCategory');
+    select.innerHTML = '<option value="">Select or add new category</option>';
+    select.innerHTML += '<option value="new">+ Add new category</option>';
+    [...categories].sort().forEach(category => {
+        const option = document.createElement('option');
+        option.value = category;
+        option.textContent = category;
+        select.appendChild(option);
+    });
+}
+
+// Display categories in the grid
+function displayCategories() {
+    const categoriesList = document.getElementById('categoriesList');
+    categoriesList.innerHTML = '';
+    
+    [...categories].sort().forEach(category => {
+        const categoryTag = document.createElement('button');
+        categoryTag.className = 'category-tag';
+        categoryTag.textContent = category;
+        categoryTag.onclick = () => openCategoryPage(category);
+        categoriesList.appendChild(categoryTag);
+    });
+}
+
+// Save entry with category
+function saveEntry(text, category = '') {
+    const entries = JSON.parse(localStorage.getItem('entries') || '[]');
+    const entry = {
+        text,
+        category,
+        date: new Date().toISOString()
+    };
+    entries.push(entry);
+    localStorage.setItem('entries', JSON.stringify(entries));
+    
+    if (category) {
+        categories.add(category);
+        saveCategories();
+        updateCategoryDropdown();
+        displayCategories();
+    }
+}
+
+// Open category page in new tab
+function openCategoryPage(category) {
+    const entries = JSON.parse(localStorage.getItem('entries') || '[]');
+    const categoryEntries = entries.filter(entry => entry.category === category);
+    
+    const newWindow = window.open('', '_blank');
+    newWindow.document.write(`
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <title>${category} - Zen Note</title>
+            <link rel="stylesheet" href="style.css">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        </head>
+        <body>
+            <div class="category-page">
+                <div class="category-page-header">
+                    <h1 class="category-page-title">${category}</h1>
+                    <p>${categoryEntries.length} entries</p>
+                </div>
+                <div class="category-notes">
+                    ${categoryEntries.map(entry => `
+                        <div class="category-note">
+                            <div class="note-date">${new Date(entry.date).toLocaleDateString()}</div>
+                            <div class="note-content">${entry.text}</div>
+                        </div>
+                    `).join('')}
+                </div>
+            </div>
+        </body>
+        </html>
+    `);
+}
+
+// Update form submission handler
+document.getElementById('entryForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+    
+    const textArea = document.getElementById('fake-textarea');
+    const text = textArea.textContent.trim();
+    
+    if (!text) {
+        document.getElementById('error-message').style.display = 'block';
+        return;
+    }
+    
+    const existingCategory = document.getElementById('existingCategory');
+    const newCategoryInput = document.getElementById('newCategory');
+    let category = existingCategory.value;
+    
+    if (category === 'new') {
+        category = newCategoryInput.value.trim();
+        if (!category) {
+            alert('Please enter a new category name');
+            return;
+        }
+    }
+    
+    saveEntry(text, category);
+    
+    // Clear form
+    textArea.textContent = '';
+    existingCategory.value = '';
+    newCategoryInput.value = '';
+    newCategoryInput.style.display = 'none';
+    document.getElementById('error-message').style.display = 'none';
+    
+    // Show success message
+    Swal.fire({
+        title: 'Success!',
+        text: 'Your note has been saved.',
+        icon: 'success',
+        timer: 2000,
+        showConfirmButton: false
+    });
+});
+
+// Initialize categories on page load
+document.addEventListener('DOMContentLoaded', loadCategories);
+
+// Add this to your existing JavaScript
+document.getElementById('existingCategory').addEventListener('change', function() {
+    const newCategoryInput = document.getElementById('newCategory');
+    if (this.value === 'new') {
+        newCategoryInput.style.display = 'block';
+        newCategoryInput.focus();
+    } else {
+        newCategoryInput.style.display = 'none';
+        newCategoryInput.value = ''; // Clear the input when hidden
+    }
+});
diff --git a/style.css b/style.css
index ceef431..d266e9b 100644
--- a/style.css
+++ b/style.css
@@ -12,11 +12,13 @@
 }
 
 body {
-    font-family: 'poppins', sans-serif; /*changed the font family */
-    margin: 100px 0px 0px 0px;
-    padding: 20px;
+    font-family: 'Poppins', sans-serif;
+    margin: 0;
+    padding: 0;
     min-height: 100vh;
     transition: background 0.3s, color 0.3s;
+    display: flex;
+    flex-direction: column;
 }
 
 body.light-mode {
@@ -30,9 +32,11 @@ body.dark-mode {
 }
 
 .container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 6rem 0px;
+    flex: 1;
+    max-width: 1000px; /* Increased from 800px to 1000px */
+    width: 90%; /* Added to ensure responsiveness */
+    margin: 20px auto;
+    padding: 2rem;
     background-color: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border-radius: 15px;
@@ -41,13 +45,11 @@ body.dark-mode {
 
 h1 {
     text-align: center;
-    margin-bottom: 20px;
     font-size: 2.5em;
-    color: #f7f7f7;
+    color: var(--text-color-light);
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-    width: fit-content;
-    margin: 20px auto;
-    font-weight: 200; /*changed the font weight */
+    margin: 0 0 30px 0;
+    font-weight: 600;
 }
 
 .light-mode h1{
@@ -59,9 +61,81 @@ h1 {
 }
 
 #entryForm {
-    padding: 0 70px;
+    padding: 20px;
     display: flex;
-    margin-bottom: 20px;
+    flex-direction: column;
+    align-items: stretch;
+    margin-bottom: 30px;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-bottom: 15px;
+}
+
+.fake-textarea {
+    width: 100%;
+    min-height: 150px;
+    padding: 15px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 16px;
+    font-family: 'Poppins', sans-serif;
+    resize: vertical;
+    margin-bottom: 15px;
+    transition: all 0.3s ease;
+    box-sizing: border-box;
+}
+
+.category-input {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    gap: 10px;
+}
+
+.category-select,
+.category-text {
+    flex: 3;
+    padding: 12px;
+    border: 2px solid #e0e0e0;
+    border-radius: 6px;
+    font-size: 16px;
+    transition: all 0.3s ease;
+    box-sizing: border-box;
+}
+
+button[type="submit"] {
+    flex: 1;
+    padding: 12px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 6px;
+    background-color: var(--button-bg-light);
+    color: var(--text-color-light);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-sizing: border-box;
+}
+
+/* Responsive styles */
+@media (max-width: 600px) {
+    .category-input {
+        flex-direction: column;
+    }
+
+    .category-select,
+    .category-text,
+    button[type="submit"] {
+        width: 100%;
+        margin-bottom: 10px;
+    }
 }
 
 #entryInput {
@@ -109,18 +183,20 @@ button:active {
     list-style-type: none;
     padding: 0;
     margin: 0px 70px;
+    margin-top: 40px;
 }
 
 .entry {
-    background-color: var(--entry-bg-light);
+    background-color: rgba(255, 255, 255, 0.8);
     padding: 20px;
-    margin-bottom: 30px;
+    margin-bottom: 20px;
     border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: background-color 0.3s, transform 0.2s;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
 }
 
 .entry-actions span.edit-btn {
@@ -133,7 +209,7 @@ button:active {
 }
 
 .dark-mode .entry {
-    background-color: var(--entry-bg-dark);
+    background-color: rgba(0, 0, 0, 0.2);
 }
 
 .entry-content {
@@ -162,7 +238,7 @@ button:active {
     margin-top: 30px;
     margin-bottom: 15px;
     font-size: 1.2em;
-    color: #0b0c10;
+    color: var(--text-color-light);
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 }
 
@@ -192,7 +268,7 @@ button:active {
     margin-top: 30px;
     margin-bottom: 15px;
     font-size: 1.2em;
-    color: #f7f7f7;
+    color: var(--text-color-light);
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 }
 
@@ -259,84 +335,112 @@ button:active {
 }
 .fake-textarea {
     width: 100%;
-    min-height: 40px;
-    padding: 10px; /* Add consistent padding */
-    border: 1px solid #ccc;
-    border-radius: 5px;
+    min-height: 120px;
+    padding: 15px;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
     font-size: 16px;
-    font-family: Arial, sans-serif;
-    overflow-y: auto;
-    background-color: #f9f9f9;
+    font-family: 'Poppins', sans-serif;
+    resize: vertical;
+    margin-bottom: 20px;
+    transition: all 0.3s ease;
+    background-color: rgba(255, 255, 255, 0.8);
+    color: var(--text-color-light);
+}
+
+.fake-textarea:focus {
+    border-color: var(--button-bg-light);
     outline: none;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    position: relative; /* Necessary for absolute positioning of the placeholder */
-    box-sizing: border-box;
-    color: #000000;
+    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
 }
 
-/* Placeholder styling with padding */
-.fake-textarea.empty:before {
-    content: attr(data-placeholder);
-    color: #999;
-    position: absolute;
-    left: 10px; /* Align with padding */
-    top: 10px;
-    pointer-events: none; /* Ensure placeholder doesn't interfere with typing */
+.category-input {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.category-select,
+.category-text {
+    flex: 2;
+    padding: 12px;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    border-radius: 6px;
     font-size: 16px;
-    font-family: Arial, sans-serif;
+    background-color: rgba(255, 255, 255, 0.8);
+    color: var(--text-color-light);
+    transition: all 0.3s ease;
 }
 
-/* Ensure consistent padding when not empty */
-.fake-textarea:not(.empty) {
-    padding: 10px; /* Maintain padding even when content is entered */
+.dark-mode .category-select,
+.dark-mode .category-text {
+    background-color: rgba(0, 0, 0, 0.2);
+    color: var(--text-color-dark);
+    border-color: rgba(255, 255, 255, 0.1);
 }
 
-.fake-textarea:focus {
-    border-color: #66afe9;
-    box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
+button[type="submit"] {
+    flex: 1;
+    padding: 12px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 6px;
+    background-color: var(--button-bg-light);
+    color: var(--text-color-light);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-left: 10px;
 }
 
-.fake-textarea.error {
-    border-color: red;
+button[type="submit"]:hover {
+    background-color: var(--button-hover-light);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
+button[type="submit"]:active {
+    transform: translateY(0);
+}
 
+/* Dark mode styles */
+.dark-mode .fake-textarea,
+.dark-mode .category-select,
+.dark-mode .category-text {
+    background-color: #333;
+    border-color: #555;
+    color: #fff;
+}
 
+.dark-mode .category-select option {
+    background-color: #333;
+    color: #fff;
+}
 
+/* Responsive styles */
 @media (max-width: 600px) {
-    #entryForm {
-        flex-direction: column;
-    }
-
-    button {
-        max-width: 100%;
-        border-radius: 5px;
-        margin-bottom: 10px;
-    }
-    button[type="submit"]
-    {
-        margin-top: 10px;
-    }
-   
-    .fake-textarea {
-        border-radius: 5px;
-
-    }
-
     .container {
-        padding: 10px;
+        margin: 10px;
+        padding: 1rem;
     }
 
-    .entry {
+    .category-input {
         flex-direction: column;
-        align-items: flex-start;
     }
 
-    .entry-actions {
-        margin-top: 10px;
+    .category-select,
+    .category-text,
+    button[type="submit"] {
+        width: 100%;
+        margin: 5px 0;
+    }
+
+    button[type="submit"] {
+        margin-left: 0;
     }
 }
+
 nav {
     background-color: var(--bg-gradient-light);
     padding: 10px;
@@ -447,4 +551,274 @@ button[type="submit"]:hover {
 
 .dark-mode button[type="submit"]:hover {
     background-color: var(--button-hover-dark);
-}
\ No newline at end of file
+}
+/* Add these styles to your existing CSS */
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-bottom: 20px;
+}
+
+.category-input {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.category-select {
+    padding: 8px 12px;
+    border: 2px solid #e0e0e0;
+    border-radius: 6px;
+    font-size: 14px;
+    background-color: white;
+    min-width: 200px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.category-select:hover {
+    border-color: #c0c0c0;
+}
+
+.category-text {
+    padding: 8px 12px;
+    border: 2px solid #e0e0e0;
+    border-radius: 6px;
+    font-size: 14px;
+    min-width: 200px;
+    transition: all 0.3s ease;
+}
+
+.category-text:focus {
+    border-color: #4CAF50;
+    outline: none;
+}
+
+.categories-section {
+    margin-top: 40px;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.categories-section h2 {
+    font-size: 24px;
+    color: var(--text-color-light);
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.categories-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    justify-content: center;
+}
+
+.category-tag {
+    padding: 8px 16px;
+    background-color: var(--button-bg-light);
+    color: var(--text-color-light);
+    border-radius: 20px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: none;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin: 5px;
+}
+
+.category-tag:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    background-color: var(--button-hover-light);
+}
+
+.dark-mode .category-tag {
+    background-color: var(--button-bg-dark);
+    color: var(--text-color-dark);
+}
+
+.dark-mode .category-tag:hover {
+    background-color: var(--button-hover-dark);
+}
+
+/* Category page styles */
+.category-page {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.category-page-header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.category-page-title {
+    font-size: 32px;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.category-notes {
+    display: grid;
+    gap: 20px;
+}
+
+.category-note {
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    transition: transform 0.3s ease;
+}
+
+.category-note:hover {
+    transform: translateY(-2px);
+}
+
+.note-date {
+    color: #666;
+    font-size: 14px;
+    margin-bottom: 10px;
+}
+
+.note-content {
+    color: #333;
+    line-height: 1.6;
+}
+
+/* Update these existing styles */
+#entryForm {
+    padding: 0 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 20px;
+    width: 100%;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.fake-textarea {
+    width: 100%;
+    min-height: 150px;
+    padding: 15px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 16px;
+    font-family: Arial, sans-serif;
+    resize: vertical;
+    margin-bottom: 20px;
+    transition: all 0.3s ease;
+}
+
+.fake-textarea:focus {
+    border-color: #4CAF50;
+    outline: none;
+    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
+}
+
+.category-input {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.category-select {
+    flex: 2;
+    padding: 12px;
+    border: 2px solid #e0e0e0;
+    border-radius: 6px;
+    font-size: 16px;
+    background-color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-right: 10px;
+}
+
+.category-text {
+    flex: 2;
+    padding: 12px;
+    border: 2px solid #e0e0e0;
+    border-radius: 6px;
+    font-size: 16px;
+    transition: all 0.3s ease;
+    margin-right: 10px;
+    display: none;
+}
+
+button[type="submit"] {
+    flex: 1;
+    padding: 12px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 6px;
+    background-color: var(--button-bg-light);
+    color: var(--text-color-light);
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.1s;
+}
+
+button[type="submit"]:hover {
+    background-color: var(--button-hover-light);
+    transform: translateY(-2px);
+}
+
+button[type="submit"]:active {
+    transform: translateY(0);
+}
+
+/* Dark mode styles */
+.dark-mode .fake-textarea,
+.dark-mode .category-select,
+.dark-mode .category-text {
+    background-color: #333;
+    border-color: #555;
+    color: #fff;
+}
+
+.dark-mode .category-select option {
+    background-color: #333;
+    color: #fff;
+}
+
+/* Responsive styles */
+@media (max-width: 600px) {
+    .category-input {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .category-select,
+    .category-text,
+    button[type="submit"] {
+        width: 100%;
+        margin-right: 0;
+        margin-bottom: 10px;
+    }
+}
+
+/* Update the media query for smaller screens */
+@media (max-width: 1100px) { /* Changed from 600px to 1100px */
+    .container {
+        width: 95%;
+        padding: 1rem;
+        margin: 10px auto;
+    }
+}
+
