updated

Author: devvanu

src/App.jsx

@@ -1,6 +1,61 @@
+import { useState } from 'react';
+import NoteContainer from './components/Notes/NoteContainer';
+import SideBar from './components/SideBar/SideBar';
+
+const DUMMY_NOTES = [
+  {
+    id: 'n3',
+    text: 'Hey there, Add your note by clicking the plus icon and choosing the theme color',
+    time: 'Jul 28, 3:50 PM',
+    color: '#FBA1A1'
+  },
+  {
+    id: 'n2',
+    text: 'You can edit your note by clicking the pencil icon',
+    time: 'Jul 25, 8:00 PM',
+    color: '#C4DFAA'
+  },
+  {
+      id: 'n1',
+      text: 'You can delete your note too by clicking the delete icon. \n\nYes..Yes you can delete these instruction notes too',
+      time: 'Jul 18, 10:55 AM',
+      color: '#F5F0BB'
+  }
+];
+
 const App = () => {
+
+  const [notes, setNotes] = useState(DUMMY_NOTES);
+
+  const addNoteHandler = (themeColor) => {
+      const note = {
+        id: Date.now() + "" + Math.floor(Math.random()*78),
+        text: '',
+        time: new Date().toLocaleDateString('en-US', { hourCycle: 'h12', minute: '2-digit', day: '2-digit', month: 'short', hour: '2-digit'}),
+        color: themeColor
+      }
+      setNotes( (prevNotes)=>{
+        return [note, ...prevNotes];
+      });
+  }
+
+  const deleteNoteHandler = (noteId) => {
+     const prevNotes = [...notes];
+     let indexToDelete = -1;
+     for(let i=0; i<prevNotes.length; i++){
+      if( prevNotes[i]['id'] == noteId ) indexToDelete=i;
+     }
+     if(indexToDelete < 0) return;
+     else prevNotes.splice(indexToDelete, 1);
+     setNotes(prevNotes);
+  }
 
-  return <div>Hello World</div>;
+  return(
+    <div className='app'>
+      <SideBar addTheme ={ addNoteHandler } />
+      <NoteContainer notes={notes} deleteNote = { deleteNoteHandler } />
+    </div>
+  );
 
 }
 

src/index.css

@@ -1,15 +1,31 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
 
 *{
   box-sizing: border-box;
+  margin: 0; 
+  padding: 0;
 }
 
 html {
-  font-family: 'Noto Sans JP', sans-serif;
+  font-family: 'Nunito', sans-serif;
 }
 
-body {
-  margin: 0;
-  background-color: #3f3f3f;
-  color: whitesmoke;
+.app{
+  height: 100vh;
+  display: flex;
+  gap: 20px;
+  padding: 4%;
+}
+
+.custom-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+.custom-scroll::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+.custom-scroll::-webkit-scrollbar-thumb {
+  background: #888;
+}
+.custom-scroll::-webkit-scrollbar-thumb:hover {
+  background: #555;
 }