From 912b15e8c326bd0367951ff28c85996ae13a4ccb Mon Sep 17 00:00:00 2001
From: Rishika Reddy <120434905+RishikaReddy123@users.noreply.github.com>
Date: Thu, 26 Dec 2024 13:26:31 +0530
Subject: [PATCH] Added Notes Application files
---
Notes/index.html | 72 ++++++++++++++++++++++++++++++++++++++++++++
Notes/script.js | 77 ++++++++++++++++++++++++++++++++++++++++++++++++
Notes/style.css | 63 +++++++++++++++++++++++++++++++++++++++
3 files changed, 212 insertions(+)
create mode 100644 Notes/index.html
create mode 100644 Notes/script.js
create mode 100644 Notes/style.css
diff --git a/Notes/index.html b/Notes/index.html
new file mode 100644
index 000000000..d6b681a63
--- /dev/null
+++ b/Notes/index.html
@@ -0,0 +1,72 @@
+
+
+
+
+
+ Notes
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Notes/script.js b/Notes/script.js
new file mode 100644
index 000000000..5d2fbdb75
--- /dev/null
+++ b/Notes/script.js
@@ -0,0 +1,77 @@
+const addBtn = document.querySelector("#addBtn");
+const main = document.querySelector("#main");
+
+addBtn.addEventListener("click",
+ function() {
+ addNote()
+ }
+);
+
+const saveNotes = () => {
+ const notes = document.querySelectorAll(".note textarea");
+ const data = [];
+ notes.forEach(
+ (note) => {
+ data.push(note.value);
+ }
+
+ );
+
+ if(data.length === 0){
+ localStorage.removeItem("notes");
+ }else{
+ localStorage.setItem("notes", JSON.stringify(data));
+ }
+}
+
+const addNote = (text="") => {
+ const note = document.createElement("div");
+ note.classList.add("note");
+ note.innerHTML = `
+
+
+
+
+
+ `;
+
+ note.querySelector(".trash").addEventListener("click",
+ function() {
+ note.remove()
+ saveNotes()
+ }
+ );
+ note.querySelector(".save").addEventListener("click",
+ function() {
+ saveNotes()
+ }
+ );
+ note.querySelector("textarea").addEventListener(
+ "focusout", () => {
+ saveNotes();
+ }
+ );
+
+
+
+ main.appendChild(note);
+ saveNotes();
+}
+
+(
+ function() {
+ const lsNotes = JSON.parse(localStorage.getItem("notes"));
+ if(lsNotes === null){
+ addNote();
+ }else{
+ lsNotes.forEach(
+ (lsNote) => {
+ addNote(lsNote)
+ }
+ )
+ }
+ }
+)();
+
+
+
diff --git a/Notes/style.css b/Notes/style.css
new file mode 100644
index 000000000..a721afa7a
--- /dev/null
+++ b/Notes/style.css
@@ -0,0 +1,63 @@
+*{
+ padding: 0;
+ margin: 0 ;
+ box-sizing: border-box;
+}
+
+#main{
+ width: 100%;
+ min-height: 100vh;
+ background-color: #dfe6e9;
+ display: flex;
+ flex-wrap: wrap;
+ padding-bottom: 90px;
+}
+
+#addBtn{
+ position: fixed;
+ right: 15px;
+ top: 15px;
+ background-color: #2d3436;
+ color: white;
+ border-radius: 10px;
+ padding: 15px;
+ font-size: 18px;
+}
+
+.note{
+ width: 400px;
+ height: 450px;
+ background-color: aliceblue;
+ margin: 90px;
+ border-radius: 15px;
+}
+
+.tool{
+ width: 100%;
+ background-color: #636e72;
+ color: white;
+ padding: 10px;
+ display: flex;
+ justify-content: end;
+ border-radius: 15px 15px 0px 0px;
+
+}
+
+.tool i{
+ padding: 7px;
+}
+
+.note textarea{
+ border: none;
+ width: 100%;
+ height: 100%;
+ resize: none;
+ padding: 10px;
+ font-size: 17px;
+ border-radius: 15px;
+}
+.note textarea focus{
+ border: 0;
+ outline: 0;
+
+}
\ No newline at end of file