the-browser-toolbox · Shiv-flexhub · Dec 12, 2021
diff --git a/src/scripts/eventPage.js b/src/scripts/eventPage.js
@@ -0,0 +1,95 @@
+let addBtn = document.getElementById('addBtn');
+
+displayNotes();
+
+addBtn.addEventListener('click', function (e) {
+  let titleTxt = document.getElementById('title');
+  let addTxt = document.getElementById('addTxt');
+  let notes = localStorage.getItem('notes');
+  let titles = localStorage.getItem('titles');
+  if (notes == null) {
+    notesObj = [];
+    titleObj = [];
+  } else {
+    notesObj = JSON.parse(notes);
+    titleObj = JSON.parse(titles); //converting json string to object
+  }
+  titleObj.push(titleTxt.value);
+  notesObj.push(addTxt.value);
+  localStorage.setItem('notes', JSON.stringify(notesObj));
+  localStorage.setItem('titles', JSON.stringify(titleObj)); //updating the local storage
+  addTxt.value = '';
+  titleTxt.value = '';
+  // console.log(notesObj)
+  displayNotes();
+});
+
+//Function to display the notes
+function displayNotes() {
+  let notes = localStorage.getItem('notes');
+  let titles = localStorage.getItem('titles');
+  if (notes == null) {
+    notesObj = [];
+    titleObj = [];
+  } else {
+    notesObj = JSON.parse(notes); //converting json string to object
+    titleObj = JSON.parse(titles);
+  }
+  let html = '';
+  notesObj.forEach(function (element, index) {
+    html += `<div class="noteCard mx-1" style="width: 18rem;">
+
+        <div class="card-body">
+          <h5 class="card-title">${titleObj[index]}</h5>
+          <p class="card-text">${element}</p>
+          <button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</button>
+        </div>
+      </div>`;
+  });
+
+  let notesElm = document.getElementById('notes');
+  if (notesObj.length != 0) {
+    notesElm.innerHTML = html;
+  } else {
+    notesElm.innerHTML = `No notes are present. Type a note in the above section and click on "Create Note" to add your note`;
+  }
+}
+
+//Function to delete the notes
+
+function deleteNote(index) {
+  let notes = localStorage.getItem('notes');
+  let titles = localStorage.getItem('titles');
+  if (notes == null) {
+    notesObj = [];
+    titleObj = [];
+  } else {
+    notesObj = JSON.parse(notes); //converting json string to object
+    titleObj = JSON.parse(titles);
+  }
+  notesObj.splice(index, 1);
+  titleObj.splice(index, 1);
+  localStorage.setItem('notes', JSON.stringify(notesObj));
+  localStorage.setItem('titles', JSON.stringify(titleObj));
+  displayNotes();
+}
+
+//Searching the notes in search bar
+
+let search = document.getElementById('searchTxt');
+
+search.addEventListener('input', function () {
+
+  let inputVal = search.value.toLowerCase();
+  // console.log(inputVal);
+  let noteCards = document.getElementsByClassName('noteCard');
+  Array.from(noteCards).forEach(function (element) {
+    let cardTxt = element.getElementsByTagName("p")[0].innerText;
+
+    if (cardTxt.includes(inputVal)) {
+      element.style.display = "block";
+    } else {
+      element.style.display = "none";
+    }
+  });
+});
diff --git a/src/styles/header.css b/src/styles/header.css
@@ -1,8 +1,8 @@
-#H1 {
+/* #H1 {
   align-self: center;
   font-family: "Menlo", monospace;
   font-size: 30px;
   color: #2c5aaf;
   text-shadow: 1px 1px 2px #000000;
   border-bottom: 2px solid rgb(70, 151, 53);
-}
+} */
diff --git a/src/styles/popup.css b/src/styles/popup.css
@@ -1,4 +1,4 @@
-body {
+/* body {
   width: 200px;
   background-image: linear-gradient(#66b3ff, #99ccff);
-}
+} */
diff --git a/src/views/popup.html b/src/views/popup.html
@@ -1,13 +1,106 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <title>Save-Notes</title>
-        <script src="../scripts/popup.js"></script>
-        <link rel="stylesheet" href="../styles/popup.css">
-        <link rel="stylesheet" href="../styles/header.css">
-
-    </head>
-    <body>
-        <h2 id="H1">Hello World!</h2>
-    </body>
-</html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Notes App</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="#">Save Notes</a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent"
+          aria-controls="navbarSupportedContent"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
+            </li>
+          </ul>
+          <form class="d-flex">
+            <input
+              class="form-control me-2"
+              type="search"
+              id="searchTxt"
+              placeholder="Search"
+              aria-label="Search"
+            />
+            <button class="btn btn-outline-success" type="submit">
+              Search
+            </button>
+          </form>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container my-4">
+      <h1>Save_Notes</h1>
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">Add a Note</h5>
+          <div class="input-group">
+            <!-- <span class="input-group-text" id="inputGroup-sizing-default"
+              >Default</span
+            > -->
+            <input
+              type="text"
+              id="title"
+              placeholder="Title of the Note"
+              class="form-control"
+              aria-label="Sizing example input"
+              aria-describedby="inputGroup-sizing-default"
+            />
+          </div>
+          <div class="mb-3">
+            <label for="exampleFormControlTextarea1" class="form-label"></label>
+            <textarea
+              class="form-control"
+              id="addTxt"
+              rows="3"
+              placeholder="Write your note"
+            ></textarea>
+          </div>
+          <button id="addBtn" class="btn btn-primary">Create Note</button>
+        </div>
+      </div>
+      <hr />
+      <h1>Your Notes</h1>
+      <hr />
+      <div class="row container-fluid" id="notes"></div>
+    </div>
+
+    <!-- bootstrap javascript included -->
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
+      integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
+      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
+      crossorigin="anonymous"
+    ></script>
+    <script src="/src/scripts/eventPage.js"></script>
+  </body>
+</html>