Delete Button

index.html

@@ -99,7 +99,7 @@ <h2>Internal Tools</h2>
                 <div class="utm-links internal-tools">
                     <a href="timeTableBuilder.html" id="utm-tools-linked-to-site">TIME TABLE BUILDER</a>
                     <a href="calculator_iframe.html" id="utm-tools-linked-to-site">CALCULATOR</a>
-                    <a href="notes.html" target="_blank" id="utm-tools-linked-to-site" rel="noopener noreferrer">NOTE TAKER</a>
+                    <a href="notes.html" id="utm-tools-linked-to-site" rel="noopener noreferrer">NOTE TAKER</a>
                 </div>
             </section>
 

main.js

@@ -18,6 +18,33 @@ function toggleDarkMode() {
     document.body.classList.toggle('dark-mode');
 }
 
+// Delete The Fake Place Holder Posts
+document.querySelectorAll('.fake-post').forEach(function(button) {
+    button.addEventListener('click', function(e) {
+        e.target.closest('.post').remove();
+    });
+});
+
+// Load fake posts from localStorage on page load
+window.addEventListener('DOMContentLoaded', (event) => {
+    let posts = JSON.parse(localStorage.getItem('posts'));
+    if (posts) {
+        document.getElementById('posts-container').innerHTML = posts;
+    }
+});
+
+// Add event listener to all fake posts to add delete buttons
+document.getElementById('posts-container').addEventListener('click', function(e) {
+    if (e.target.classList.contains('fake-post')) {
+        // Remove post from DOM
+        e.target.closest('.post').remove();
+
+        // Save current state of posts to localStorage
+        localStorage.setItem('posts', JSON.stringify(document.getElementById('posts-container').innerHTML));
+    }
+});
+
+
 function filterPostsByTag() {
     const searchValue = document.getElementById('search-tags').value.toLowerCase().trim();
     const posts = document.querySelectorAll('.post');
@@ -65,7 +92,17 @@ function createPost() {
     const postElement = document.createElement('div');
     postElement.classList.add('post');
     postElement.setAttribute('data-tags', tags); // Ensure tags are added as a data attribute for searching
+
+    // Create delete button
+    const deleteButton = document.createElement('button');
+    deleteButton.innerText = 'Delete';
+    deleteButton.classList.add('delete-button'); // Add class to the delete button
+    deleteButton.onclick = function() {
+        postsContainer.removeChild(postElement);
+    };
+
     postElement.innerHTML = `<h1>${title}</h1><p>${message}</p><p style="font-size: 80%">Tags: ${tags}</p>`; // Format the post with title, message, and tags
+    postElement.appendChild(deleteButton); // Append delete button to the post
 
     postsContainer.appendChild(postElement);
 
@@ -81,6 +118,7 @@ function createPost() {
     filterPostsByTag();
 }
 
+// Load posts from local storage
 window.onload = function() {
     let posts = JSON.parse(localStorage.getItem('posts')) || [];
     const postsContainer = document.getElementById('posts-container');

notes.html

@@ -82,18 +82,21 @@ <h2>Create a New Post</h2>
             <h1>Recent CSC209 Notes</h1>
             <p>Does anyone have notes on the prof's writing from the most recent lecture? I missed the last few slides.</p>
             <p style="font-size: 80%">Tags: (CSC209) (Lecture)</p>
+            <button class="delete-button fake-post">Delete</button>
         </div>
 
         <div class="post" data-tags="(CCT386) (Definitions)">
             <h1>CCT386 Notes</h1>
             <p>Here's a link to some of the definitions from class. Feel free to comment if I missed any.</p>
             <p style="font-size: 80%">Tags: (CCT386) (Definitions)</p>
+            <button class="delete-button fake-post">Delete</button>
         </div>
 
         <div class="post" data-tags="(CCT109) (Lecture)">
             <h1>CCT109 Lecture Summary</h1>
             <p>Had to miss yesterday's lecture. I went through the slide deck but could anyone summarize what the lecture covered?</p>
             <p style="font-size: 80%">Tags: (CCT109) (Lecture)</p>
+            <button class="delete-button fake-post">Delete</button>
         </div>
     </div>
 

style.css

@@ -283,7 +283,6 @@ input:checked + label svg.moon {
 }
 
 /*----------------Notes Page----------*/
-/* Added styles for dark mode */
 body.dark-mode {
     background-color: #242424;
     color: white; /* Ensure body text is white in dark mode */
@@ -385,6 +384,20 @@ body.dark-mode .post, body.dark-mode .new-post textarea, body.dark-mode .search-
     color: black; /* Ensure text color is black for visibility */
     transition: width 0.4s, height 0.4s, transform 0.4s, box-shadow .3s;
 }
+
+.delete-button {
+    margin-left: auto;
+    background: red;
+    padding: 5px;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.delete-button:hover {
+    background-color: rgb(255, 79, 79);
+}
 
 .post:hover {
     transition: width 0.4s, height 0.4s, transform 0.4s;