Personal Notepad / Dairy feature

index.html

@@ -31,6 +31,7 @@
           <a href="#about" class="nav-link">About</a>
           <a href="#reviews" class="nav-link">Reviews</a>
           <a href="#contact" class="nav-link">Contact Us</a>
+          <a href="#notepad" class="nav-link">Keep Notes</a>
           <a href="https://github.com/Varshitha713/CodeCanvas" class="btn-primary" target="_blank">
             <i class="fab fa-github"></i> GitHub
           </a>
@@ -135,6 +136,28 @@ <h3>No projects found</h3>
       </div>
     </section>
 
+    <section class="notepad-section fade-in" id="notepad">
+      <div class="container">
+        <h2 class="section-title fade-in">Keep Notes</h2>
+
+        <div style="display: flex; gap: 40px; flex-wrap: wrap;">
+
+          <div id="mynotes" class="mynotes" style="flex: 1; min-width: 300px;">
+                <h2><img src="assets/list.png" class="add">My Notes</h2>
+                <div id="notesContainer" class="notes-grid"></div>
+            </div>
+            <div id="addnotes" class="add_notes" style="flex: 1; min-width: 300px;">
+                <h2><img src="assets/addition.png" class="add">Add Notes</h2>
+                <label for="title">Title:</label><br>
+                <input type="text" id="title" name="title" placeholder="Title of the notes"/><br><br>
+                <label for="content">Content:</label><br>
+                <textarea id="content" name="content" rows="10" cols="50" placeholder="Add your content"></textarea><br><br>
+                <div class="filter-buttons"><button onclick="saveNote()" class="btn-primary">Save Note</button></div>
+            </div>
+        </div>
+      </div>
+    </section>
+
     <section class="reviews-section fade-in" id="reviews" style="cursor:auto;">
       <h2 class="review-section-title fade-in">Developer Reviews</h2>
       <div class="swiper review-swiper fade-in">

script.js

@@ -643,14 +643,6 @@ document.addEventListener("DOMContentLoaded", () => {
 
   faders.forEach(fade => observer.observe(fade));
 });
-entries.forEach((entry, index) => {
-  if (entry.isIntersecting) {
-    setTimeout(() => {
-      entry.target.classList.add('animate');
-    }, index * 100); // 100ms delay between cards
-    observer.unobserve(entry.target);
-  }
-});
 
 
   const reviewSwiper = new Swiper(".review-swiper", {
@@ -665,3 +657,150 @@ entries.forEach((entry, index) => {
     },
     speed: 700, // smooth transition
   });
+
+/* =========================================
+   NOTEPAD INTEGRATION
+   ========================================= */
+
+// Notepad State
+let editIndex = -1;
+
+// Notepad Functions
+function saveNote() {
+    const titleInput = document.getElementById("title");
+    const contentInput = document.getElementById("content");
+    const saveBtn = document.querySelector(".add_notes button");
+
+    const title = titleInput.value.trim();
+    const content = contentInput.value.trim();
+
+    if (!title || !content) {
+        alert("Please fill both Title and Content!");
+        return;
+    }
+
+    const note = { title, content };
+    let notes = JSON.parse(localStorage.getItem("notes")) || [];
+
+    if (editIndex === -1) {
+        // Add new note
+        notes.push(note);
+    } else {
+        // Update existing note
+        notes[editIndex] = note;
+        editIndex = -1;
+        saveBtn.innerText = "Save Note";
+    }
+
+    localStorage.setItem("notes", JSON.stringify(notes));
+    displayNotes();
+
+    // Clear inputs
+    titleInput.value = "";
+    contentInput.value = "";
+
+    // Clear drafts
+    localStorage.removeItem("draft_title");
+    localStorage.removeItem("draft_content");
+}
+
+function editNote(index) {
+    let notes = JSON.parse(localStorage.getItem("notes")) || [];
+    const note = notes[index];
+    const saveBtn = document.querySelector(".add_notes button");
+
+    document.getElementById("title").value = note.title;
+    document.getElementById("content").value = note.content;
+
+    editIndex = index;
+    saveBtn.innerText = "Update Note";
+
+    document.getElementById("addnotes").scrollIntoView({ behavior: "smooth" });
+}
+
+function displayNotes() {
+    const notes = JSON.parse(localStorage.getItem("notes")) || [];
+    const container = document.getElementById("notesContainer");
+
+    if (!container) return; 
+
+    container.innerHTML = "";
+
+    notes.forEach((note, index) => {
+        const card = document.createElement("div");
+        card.classList.add("note-card");
+
+        // Updated with Font Awesome icons
+        card.innerHTML = `
+            <div class="note-header">
+                <h3>${note.title}</h3>
+                <div>
+                    <button class="edit-btn" onclick="editNote(${index})" title="Edit Note">
+                        <i class="fas fa-pen"></i>
+                    </button>
+                    <button class="delete-btn" onclick="deleteNote(${index})" title="Delete Note">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </div>
+            </div>
+            <p>${note.content}</p>
+        `;
+
+        container.appendChild(card);
+    });
+}
+
+function deleteNote(index) {
+    let notes = JSON.parse(localStorage.getItem("notes")) || [];
+    const saveBtn = document.querySelector(".add_notes button");
+
+    if (index === editIndex) {
+        editIndex = -1;
+        if(saveBtn) saveBtn.innerText = "Save Note";
+        document.getElementById("title").value = "";
+        document.getElementById("content").value = "";
+    } else if (index < editIndex) {
+        editIndex--;
+    }
+
+    notes.splice(index, 1);
+    localStorage.setItem("notes", JSON.stringify(notes));
+    displayNotes();
+}
+
+/* =========================================
+   NOTEPAD INITIALIZATION & EVENTS
+   ========================================= */
+
+document.addEventListener("DOMContentLoaded", () => {
+    // 1. Load Drafts
+    const draftTitle = localStorage.getItem("draft_title") || "";
+    const draftContent = localStorage.getItem("draft_content") || "";
+    const titleInput = document.getElementById("title");
+    const contentInput = document.getElementById("content");
+
+    if (editIndex === -1 && titleInput && contentInput) {
+        titleInput.value = draftTitle;
+        contentInput.value = draftContent;
+    }
+
+    // 2. Display Notes
+    displayNotes();
+
+    // 3. Attach Input Listeners for Auto-Saving Drafts
+    if (titleInput) {
+        titleInput.addEventListener("input", () => {
+            if (editIndex === -1) {
+                localStorage.setItem("draft_title", titleInput.value);
+            }
+        });
+    }
+
+    if (contentInput) {
+        contentInput.addEventListener("input", () => {
+            if (editIndex === -1) {
+                localStorage.setItem("draft_content", contentInput.value);
+            }
+        });
+    }
+});

style.css

@@ -1584,4 +1584,167 @@ body.dark-theme button:hover {
   flex-wrap: wrap;
   font-size: 14px;
   gap: 50px;
+}
+
+/* Main Containers */
+.add_notes, .mynotes {
+    background: inherit;
+    backdrop-filter: blur(14px);
+    border-radius: 16px;
+    padding: 25px;
+    margin-top: 60px;
+    border: 2px solid rgba(255, 255, 255, 0.7); 
+    box-shadow: 0 0 14px rgba(255, 255, 255, 0.6);
+}
+
+.dark-theme .add_notes {
+    background: inherit;
+    backdrop-filter: blur(14px);
+    border-radius: 16px;
+    padding: 25px;
+    margin-top: 60px;
+    border: 2px solid rgba(255, 255, 255, 0.8);
+    box-shadow: 0 0 18px rgba(255, 255, 255, 0.75); 
+}
+
+/* Headings and Icons */
+.add_notes h2 .add, .mynotes h2 .add{
+    width: 25px;
+    height: 25px;
+    filter: brightness(80%);
+}
+
+.mynotes h2 img{
+    margin-right: 5px;
+    transform: translateY(2px);
+}
+
+.dark-theme .add_notes h2 .add, .dark-theme .mynotes h2 .add{
+    filter: invert(100%) brightness(100%);
+}
+
+.dark-theme .add_notes input,
+.dark-theme .add_notes textarea {
+    color: white !important;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.3); 
+}
+
+.dark-theme .add_notes input::placeholder,
+.dark-theme .add_notes textarea::placeholder {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.add_notes h2{
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-color);
+}
+
+.mynotes h2{
+    margin-bottom: 15px;
+}
+
+/* Form Inputs */
+.add_notes label{
+    font-size: 20px;
+    letter-spacing: 0.5px;
+}
+
+.add_notes input:focus, .add_notes textarea:focus{
+    border-color: var(--primary-color);
+    box-shadow: 0 0 6px rgba(30, 144, 255, 0.5);
+    outline: none;
+}
+
+.add_notes #title{
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    margin-top: 10px;
+}
+
+.add_notes textarea{
+    width: 100%;
+    height: 150px;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-family:'Inter', sans-serif;
+    resize: vertical;
+    margin-top: 10px;
+}
+
+/* Note Cards */
+.notes-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+
+    max-height: 350px; /* Limits the height (adjust this number as you like) */
+    overflow-y: auto;  /* Shows scrollbar when content exceeds max-height */
+    padding-right: 10px; /* Prevents text from hitting the scrollbar */
+    padding-bottom: 10px;
+}
+
+.note-card {
+    background: var(--card-bg);
+    padding: 18px;
+    border-radius: 12px;
+    box-shadow: var(--card-shadow);
+    border: 1px solid var(--card-border);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.note-card h3 {
+    margin-bottom: 10px;
+    color: var(--text-color);
+}
+
+.note-card p {
+    color: var(--text-color);
+    white-space: pre-wrap;
+}
+
+.note-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* Edit and Delete Buttons */
+.delete-btn {
+    background: transparent;
+    border: none;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.delete-btn:hover {
+    transform: scale(1.2);
+    color: red;
+}
+
+.edit-btn {
+    background: transparent;
+    border: none;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: 0.2s;
+    margin-right: 10px; 
+}
+
+.edit-btn:hover {
+    transform: scale(1.2);
+    color: #4facfe; 
 }