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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Notes</title>
+ <link rel="stylesheet" href="./style.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+ <button id="addBtn"><i class="fa-solid fa-plus"></i> Add note</button>
+ <div id="main">
+ <!-- <div class="note">
+ <div class="tool">
+ <i class="save fa-solid fa-floppy-disk"></i>
+ <i class="trash fa-solid fa-trash"></i>
+ </div>
+ <textarea></textarea>
+ </div> -->
+ <!-- <div class="note">
+ <div class="tool">
+ <i class="fa-solid fa-floppy-disk"></i>
+ <i class="fa-solid fa-trash"></i>
+ </div>
+ <textarea></textarea>
+ </div>
+ <div class="note">
+ <div class="tool">
+ <i class="fa-solid fa-floppy-disk"></i>
+ <i class="fa-solid fa-trash"></i>
+ </div>
+ <textarea></textarea>
+ </div>
+ <div class="note">
+ <div class="tool">
+ <i class="fa-solid fa-floppy-disk"></i>
+ <i class="fa-solid fa-trash"></i>
+ </div>
+ <textarea></textarea>
+ </div>
+ <div class="note">
+ <div class="tool">
+ <i class="fa-solid fa-floppy-disk"></i>
+ <i class="fa-solid fa-trash"></i>
+ </div>
+ <textarea></textarea>
+ </div>
+ <div class="note">
+ <div class="tool">
+ <i class="fa-solid fa-floppy-disk"></i>
+ <i class="fa-solid fa-trash"></i>
+ </div>
+ <textarea></textarea>
+ </div>
+ <div class="note">
+ <div class="tool">
+ <i class="fa-solid fa-floppy-disk"></i>
+ <i class="fa-solid fa-trash"></i>
+ </div>
+ <textarea></textarea>
+ </div>
+ <div class="note">
+ <div class="tool">
+ <i class="fa-solid fa-floppy-disk"></i>
+ <i class="fa-solid fa-trash"></i>
+ </div>
+ <textarea></textarea>
+ </div> -->
+ </div>
+ <script src="./script.js"></script>
+</body>
+</html>
\ 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 = `
+ <div class="tool">
+ <i class="save fa-solid fa-floppy-disk"></i>
+ <i class="trash fa-solid fa-trash"></i>
+ </div>
+ <textarea>${text}</textarea>
+ `;
+
+ 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