Merge pull request #1752 from ojanshu/impButton

Added a feature in Notes App to mark a note as important

Author: TusharKesarwani

Projects/Notes App/index.html

@@ -23,6 +23,7 @@
     </nav>
     <div class="your-notes">
         Your Notes
+        <ul id="notesContainer"></ul>
     </div>
     <div class="popup-box">
         <div class="popup">

Projects/Notes App/script.js

@@ -9,6 +9,8 @@ const addBox = document.querySelector(".add-box"),
 
 const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 
+const notesContainer = document.getElementById("notesContainer");
+
 const notes = JSON.parse(localStorage.getItem("notes") || "[]");
 let isUpdate = false, updateId;
 
@@ -26,9 +28,13 @@ closeIcon.addEventListener("click", () => {
 })
 
 function showNote() {
+    
+    notesContainer.innerHTML = "";
     document.querySelectorAll(".note").forEach(note =>note.remove());
     notes.forEach((note, index) => {
-        liTag = `<li class="note">
+      const liClass = note.isImportant ? "note starred" : "note";
+  
+      const liTag = `<li class="${liClass}" style="background-color: ${note.isImportant ? 'gold' : ''}; color:${note.isImportant ? 'black' : 'white'}">
         <div class="details">
             <p>${note.title}</p>
             <span>${note.description}</span>
@@ -40,13 +46,14 @@ function showNote() {
                 <ul class="menu">
                     <li onclick="updateNote(${index},'${note.title}','${note.description}')"> <i class="uil uil-pen"></i>Edit</li>
                     <li onclick="deleteNote(${index})"> <i class="uil uil-trash"></i>Delete</li>
+                    <li onclick="importantNote(${index})"> <i class="uil uil-heart${note.isImportant ? '-break' : ''}"></i>${note.isImportant ? 'Unstar' : 'Star'}</li>
                 </ul>
             </div>
         </div>
-    </li>`
-    addBox.insertAdjacentHTML("afterend", liTag);
+      </li>`;
+      addBox.insertAdjacentHTML("afterend", liTag);
     });
-}
+  }
 showNote();
 
 function showMenu(elem){
@@ -77,6 +84,38 @@ function updateNote(noteId,title,desc){
     console.log(noteId,title,desc);
 }
 
+function importantNote(noteId) {
+    notes[noteId].isImportant = !notes[noteId].isImportant;
+    renderNotes();
+  }
+
+function renderNotes() {
+    notesContainer.innerHTML = "";
+    document.querySelectorAll(".note").forEach(note =>note.remove());
+    notes.forEach((note, index) => {
+        const liClass = note.isImportant ? "note starred" : "note";
+
+        const liTag = `<li class="${liClass}" style="background-color: ${note.isImportant ? 'gold' : ''};">
+            <div class="details">
+                <p>${note.title}</p>
+                <span>${note.description}</span>
+            </div>
+            <div class="bottom-content">
+                <span>${note.date}</span>
+                <div class="settings">
+                    <i onclick="showMenu(this)" class="uil uil-ellipsis-h"></i>
+                    <ul class="menu">
+                        <li onclick="updateNote(${index},'${note.title}','${note.description}')"> <i class="uil uil-pen"></i>Edit</li>
+                        <li onclick="deleteNote(${index})"> <i class="uil uil-trash"></i>Delete</li>
+                        <li onclick="importantNote(${index})"> <i class="uil uil-heart${note.isImportant ? '-break' : ''}"></i>${note.isImportant ? 'Unstar' : 'Star'}</li>
+                    </ul>
+                </div>
+            </div>
+        </li>`;
+        addBox.insertAdjacentHTML("afterend", liTag);
+    });
+}
+
  for (var i = 0; i < addBtn.length; i++) {
     addBtn[i].addEventListener("click", e => {
         e.preventDefault();
@@ -124,4 +163,7 @@ function updateNote(noteId,title,desc){
             //console.log(cardTxt);
 
         })
-    })
+    })
+
+showNote();
+renderNotes();

Projects/Notes App/style.css

@@ -160,7 +160,7 @@ header img{
 .menu li i{
     padding-right: 10px;
 }
-.popup-box{
+.popup-box {
     position: fixed;
     top: 0;
     left: 0;
@@ -318,4 +318,13 @@ form .row label{
     header img{
         margin-right:4px;
     }
-} 
+} 
+
+.starred{
+    background-color: gold;
+  }
+
+  .note.starred * {
+    color: black;
+  }
+