Enhance UI: Introduce 'Delete Note' Button and Implement Variable Col…

…or in CSS
Mustapha-Nkhili · Oct 30, 2023 · 4793fba · 4793fba
1 parent 779beec
commit 4793fba
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 15 deletions.
diff --git a/src/App.css b/src/App.css
@@ -4,7 +4,6 @@
 
 ::-webkit-scrollbar-track {
   background: transparent;
-  padding: 2px;
   border-radius: 100px;
 }
 
@@ -46,7 +45,7 @@
 .notes-sideBar header span {
   font-size: 2rem;
   font-weight: 700;
-  color: black;
+  color: var(--black-clr);
   text-transform: capitalize;
 }
 
@@ -65,7 +64,7 @@
 }
 
 .notes {
-  height: calc(100% - 113px);
+  height: calc(100% - 115px);
   overflow-y: auto
 }
 
@@ -75,6 +74,7 @@
   line-height: 1.4;
   border-top: 1px solid var(--primary-clr);
   cursor: pointer;
+  position: relative;
 }
 
 .note:last-child {
@@ -105,6 +105,26 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.note .delete-note-btn {
+  display: none;
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  z-index: 20;
+  transform: translateY(-50%);
+  background-color: transparent;
+  color: var(--note-summary-clr);
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+.note .delete-note-btn:hover {
+  color: var(--red-clr);
+}
+.note:hover .delete-note-btn {
+  display: block;
+}
+
 /* End side bar */
 
 /* Start editor  */
@@ -118,7 +138,7 @@
   font-weight: 600;
   line-height: 40px;
   background-color: transparent;
-  color: black;
+  color: var(--black-clr);
   outline: none;
   border: none;
   width: 100%;
@@ -141,13 +161,12 @@
   resize: none;
   height: calc(100% - 120px);
   background-color: transparent;
-  color: #80838a;
+  color: var(--note-default-clr);
 }
 
 .editor .editor-body::placeholder {
   font-size: 1rem;
-  color: #80838a;
-  text-decoration: none !important;
+  color: var(--note-default-clr);
   font-weight: normal !important;
   font-style: normal !important;
 }
@@ -179,7 +198,7 @@
   line-height: 45px;
   width: 45px;
   font-size: 19px;
-  color: #fff;
+  color: var(--white-clr);
   aspect-ratio: 1;
   border-radius: 50%;
   background-color: var(--primary-clr);
@@ -244,7 +263,7 @@
   border: none;
 }
 .edit-note-text .color label {
-  color: black;
+  color: var(--black-clr);
   font-size: 0.7rem;
 }
 .edit-note-text input:checked+label {
@@ -265,7 +284,7 @@
   background-color: #a6a6a6;
 }
 .edit-note-text select option {
-  background-color: #fff;
+  background-color: var(--white-clr);
 }
 @media screen and (max-width: 480px) {
   .edit-note-text #fontFamily {

diff --git a/src/App.jsx b/src/App.jsx
@@ -24,7 +24,7 @@ export default function App() {
       underline: false,
       fontFamily: "serif",
       align: "",
-      fontSize: "",
+      fontSize: "16",
       color: "#80838a",
     }
   );
@@ -72,7 +72,6 @@ export default function App() {
       [name]: type === "checkbox" ? checked : value,
     };
     setFormData(updatedFormData);
-    console.log(formData);
     localStorage.setItem(currentNoteId, JSON.stringify(updatedFormData));
   };
 
@@ -96,13 +95,23 @@ export default function App() {
     );
   };
 
+  const removeNote = (deletedNote) => {
+    if (notes.length > 1) {
+      let noteIndex = notes.findIndex(note => note.id === deletedNote.id)
+      const newNotes = notes.filter((note) => note !== deletedNote);
+      setNotes(newNotes);
+      document.getElementById(notes[noteIndex - 1].id).click()
+    }
+  };
+
   return (
     <div className="container">
       <SideBar
         addNotes={addNotes}
         notes={notes}
         currentNoteId={currentNoteId}
         findCurrentNoteId={findCurrentNoteId}
+        removeNote={removeNote}
       />
       <Editor
         noteContent={noteText}

diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faBold,
@@ -23,6 +23,7 @@ export default function Editor({
 }) {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const fontSizesArray = [8, 9, 12, 14, 16, 18, 20, 24, 30, 36, 48, 64, 72, 96];
+  // const textareaRef = useRef();
 
   useEffect(() => {
     const handleScreenResize = () => {
@@ -34,6 +35,29 @@ export default function Editor({
     };
   }, []);
 
+  // useEffect(() => {
+  //   const textarea = textareaRef.current;
+
+  //   const handleSelection = () => {
+  //     const selectedText = textarea.value.slice(
+  //       textarea.selectionStart,
+  //       textarea.selectionEnd
+  //     );
+
+  //     console.log("selctedText: " + selectedText);
+  //   };
+
+  //   if (textarea) {
+  //     textarea.addEventListener("mouseup", handleSelection);
+  //   }
+
+  //   return () => {
+  //     if (textarea) {
+  //       textarea.removeEventListener("mouseup", handleSelection);
+  //     }
+  //   };
+  // }, []);
+
   const backToNoteList = () => {
     const sideBar = document.querySelector(".notes-sideBar");
     if (sideBar) sideBar.classList.remove("clicked");
@@ -207,6 +231,7 @@ export default function Editor({
         className="editor-body"
         placeholder="Enter your notes here"
         name="textContent"
+        // ref={textareaRef}
         style={noteStyles}
         onChange={handleNoteChanges}
         value={noteContent}

diff --git a/src/components/SideBar.jsx b/src/components/SideBar.jsx
@@ -1,8 +1,12 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+
 export default function SideBar({
   addNotes,
   notes,
   findCurrentNoteId,
   currentNoteId,
+  removeNote,
 }) {
   return (
     <div className="notes-sideBar">
@@ -19,10 +23,19 @@ export default function SideBar({
               id={note.id}
               onClick={findCurrentNoteId}
             >
-              <span className="note-title">{note.title === "" ? `Note ${index + 1}` : note.title}</span>
+              <span className="note-title">
+                {note.title === "" ? `Note ${index + 1}` : note.title}
+              </span>
               <span className="note-summary-title">
                 {note.body.match(/.+/)}
               </span>
+              <button
+                type="button"
+                onClick={() => removeNote(note)}
+                className="delete-note-btn"
+              >
+                <FontAwesomeIcon icon={faTrash} />
+              </button>
             </div>
           );
         })}

diff --git a/src/index.css b/src/index.css
@@ -9,6 +9,10 @@
   --primary-blue-clr: #3F7AFE;
   --note-title-clr: hsl(228, 4%, 20%);
   --note-summary-clr: #4b4c50;
+  --red-clr: #e90707;
+  --black-clr: hsl(0, 0%, 0%);
+  --note-default-clr: #80838a;
+  --white-clr: #fff;
 
   background-color: var(--primary-bg-clr);
 
@@ -18,8 +22,9 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
+
 * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
-}
+}