Merge pull request #766 from aneeshd27/ToDoList-aneeshd27

PBJI · web-flow · commit d8f5322bd25d · 2023-10-09T23:39:40.000+05:30
Added  ToDoList Application in aneeshd27 folder in ToDoList project Folder
diff --git a/ToDoList/aneeshd27/README.md b/ToDoList/aneeshd27/README.md
@@ -0,0 +1,13 @@
+##ToDoList App
+
+A simple to-do list app that implements sticky notes can be a valuable and practical project for a variety of reasons. Below is a detailed description of why such a project is necessary and the benefits it offers:
+
+#Organization and Task Management: In today's busy world, people have numerous tasks and responsibilities to manage, both personally and professionally. A to-do list app provides an organized and efficient way to keep track of these tasks. Sticky notes mimic the physical experience of jotting down tasks on pieces of paper and sticking them to a surface, which can be intuitive and user-friendly.
+
+#Visual Reminders: Sticky notes are inherently visual and attention-grabbing. They stand out on a digital interface, ensuring that tasks and notes are not easily overlooked. This visual aspect aids users in quickly identifying important tasks, deadlines, or notes.
+
+#Flexibility and Creativity: Sticky notes can be moved, resized, and customized with different colors, fonts, and styles. This flexibility allows users to visually organize their tasks and notes in a way that suits their preferences and needs. This creative freedom enhances the user experience and engagement.
+
+#Accessibility: A digital to-do list with sticky notes can be accessed from various devices and platforms, such as desktops, laptops, smartphones, and tablets. This accessibility ensures that users can manage their tasks and notes wherever they are, whether at home, work, or on the go.
+
+#Efficient Editing and Updating: Unlike traditional paper sticky notes, digital sticky notes are easily editable. Users can add, edit, or delete tasks and notes with ease. This makes it practical for users to adapt to changing priorities and deadlines.
diff --git a/ToDoList/aneeshd27/ToDoList.png b/ToDoList/aneeshd27/ToDoList.png
diff --git a/ToDoList/aneeshd27/index.html b/ToDoList/aneeshd27/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <meta http-equip="X-UA-Compatible" content="IE=edge">
+        <title>My Notes App</title>
+        <link rel="stylesheet" href="style.css">
+        <link href="https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap" rel="stylesheet">
+
+        <script src="script.js" defer></script>
+    </head>
+    <body>
+     <div id="app">
+        <!--<textarea id="note" class="note">Some sample text</textarea>-->
+        
+        <button class="add-note" type="button">+</button>
+     </div>
+    </body>
+    </html>
diff --git a/ToDoList/aneeshd27/script.js b/ToDoList/aneeshd27/script.js
@@ -0,0 +1,71 @@
+const notesContainer=document.getElementById("app");
+const addNoteButton=notesContainer.querySelector(".add-note");
+
+getNotes().forEach((note)=>{
+    const noteElement=createNotes(note.id,note.content);
+    notesContainer.insertBefore(noteElement,addNoteButton);
+})
+
+addNoteButton.addEventListener("click",()=>addNote());
+
+function getNotes()//This function is to get notes when needed or when web page is refreshed
+{
+    return JSON.parse(localStorage.getItem("stickynotes-notes")||"[]");
+}
+function saveNotes(notes)//This function is to save all the notes written and should appear on screen when web page is refreshed
+{
+    localStorage.setItem("stickynotes-notes",JSON.stringify(notes));
+}
+function createNotes(id,content){
+    const element=document.createElement("textarea");
+    element.classList.add("note");
+    element.value=content;
+    element.placeholder="Empty Sticky Note";
+    const currentTime = new Date();
+    const formattedTime = currentTime.toLocaleString();
+
+    // Add the creation time to the note's content
+    element.value = `${formattedTime}\n${content}`;
+   
+    
+
+    
+    element.addEventListener("change",()=>{
+        updateNote(id,element.value);
+    });
+    element.addEventListener("dblclick",()=>{
+        const doDelete=confirm("Are you sure you want to delete the Sticky note??");
+
+        if(doDelete){
+            deleteNote(id,element);
+        }
+    });
+
+
+    return element;
+}
+function addNote()
+{
+    const existingNotes=getNotes();
+    const noteObject={
+        id:Math.floor(Math.random()*10000),
+        content:""
+    };
+
+    const noteElement=createNotes(noteObject.id,noteObject.content);
+    notesContainer.insertBefore(noteElement,addNoteButton);
+    existingNotes.push(noteObject);
+    saveNotes(existingNotes);
+}
+function updateNote(id,newContent){
+    const notes=getNotes();
+    const targetNote=notes.filter((note)=>note.id==id)[0];
+    targetNote.content=newContent;
+    saveNotes(notes);
+}
+function deleteNote(id,element){
+    const notes=getNotes().filter((note)=>note.id!=id);
+
+    saveNotes(notes);
+    notesContainer.removeChild(element);
+}
diff --git a/ToDoList/aneeshd27/style.css b/ToDoList/aneeshd27/style.css
@@ -0,0 +1,45 @@
+body{
+    margin: 0;
+    padding: auto;
+    background: #56e2db;
+}
+#app{
+    display: grid;
+    grid-template-columns:repeat(auto-fill,200px) ;
+    padding:30px;
+    gap:30px;
+}
+.note{
+    height: 200px;
+    border-radius: 10px;
+    background-color: rgb(246, 246, 138);
+    padding:10px;
+    box-sizing: border-box;
+    border:none;
+    box-shadow: 0 0 10px;
+    resize: none;
+    font-size: 18px;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+.note:hover{
+    cursor: pointer;
+    transform: scale(1.1,1.1);
+    rotate: -5deg;
+    background: rgb(243, 243, 152);
+}
+.add-note{
+    height: 200px;
+    border: none;
+    outline: none;
+    border-radius:10px;
+    font-size: 100px;
+    box-shadow: 0 0 10px;
+    transition-duration: 0.1s;
+    background-color: rgba(0,0,0,0.2);
+    color: rgba(0,0,0,0.6);
+    cursor: pointer;
+}
+.add-note:hover{
+    background-color: rgba(0,0,0,0.3);
+    font-size: 120px;
+} 
