Hetav Desai | FrontEnd Project 1 Submission

README.md

@@ -1,7 +1,7 @@
 # GetYourMentor Frontend project - Beginner/1
 
 ## DEMO LINK
-<INSERT_DEMO_LINK_HERE>
+https://noteshd.netlify.app/
 
 ## Target
 
@@ -20,13 +20,8 @@ https://collectui.com/designers/adriengervaix/notes-widget
 - Clicking on any note in the left sidebar shows the note in the right side area.
 - Left sidebar also has a "New note" button which creates a new note with title as "Untitled Note".
 
-## Development
-- Fork this repo.
-- Keep all your project files in this repo
-- Build the project with with vanilla (no library/framework) HTML, CSS and JavaScript.
-- Join our Telegram group for any help, discussion, questions - https://t.me/getyourmentor
-
-## Submitting the project
-- Your project source code should be public on Github.
-- Host your project on [Netlify](https://netlify.com) or [Vercel](https://vercel.com). And insert your demo link in the README.md file instead of `<INSERT_DEMO_LINK_HERE>`
-- To submit your project for review, open a pull request of your repository against this repo -> https://github.com/getYourMentor-org/frontend-project-beginner-1
+## Added Specifications
+- Delete Button to delete currently open note
+- Auto delete notes with empty title and content
+- Not to allow creation of new note if last added note is empty
+- Designed empty state to display when all notes are deleted

app.js

@@ -0,0 +1,170 @@
+var notesList = document.querySelector(".js-notes-list");
+var noteItem = document.querySelector(".js-note-item");
+var emptyState = document.querySelector(".js-empty-state");
+
+var selectedNoteIndex = 0;
+var notes = [];
+
+toggleSwitch = document.querySelector(".theme-switch .toggle-theme-checkbox");
+
+function switchTheme(e) {
+  if (e.target.checked) {
+    document.documentElement.setAttribute("data-theme", "dark");
+    localStorage.setItem("theme", "dark");
+  } else {
+    document.documentElement.setAttribute("data-theme", "light");
+    localStorage.setItem("theme", "light");
+  }
+}
+
+if (currentTheme) {
+  toggleSwitch.checked = true;
+}
+
+toggleSwitch.addEventListener("change", switchTheme, false);
+
+function initializeNotes() {
+  var notesArr = localStorage.getItem("notes");
+  notes = JSON.parse(notesArr);
+  if (notes === null || notes.length === 0) {
+    notes = [
+      {
+        title: "Welcome to NotesHD!",
+        note: `This is a sample note, please feel free to edit or delete this note and get started with creating your own notes!`,
+      },
+    ];
+  } else {
+    notes = JSON.parse(notesArr);
+  }
+}
+
+function getNotesCount() {
+  return notes.length;
+}
+
+function isLastNoteEmpty() {
+  if (
+    notes[getNotesCount() - 1].title === "" &&
+    notes[getNotesCount() - 1].note === ""
+  ) {
+    return true;
+  }
+  return false;
+}
+
+function titleChangeHandler(currentIndex) {
+  var noteTitle = document.querySelector(".note-title");
+  currentIndex = Number(currentIndex);
+  notes[currentIndex].title = noteTitle.innerHTML;
+
+  renderNotesList(false);
+}
+
+function noteChangeHandler(currentIndex) {
+  var notenote = document.querySelector(".js-note-note");
+  currentIndex = Number(currentIndex);
+  notes[currentIndex].note = notenote.value;
+  renderNotesList(false);
+}
+
+function addNote() {
+  var noOfNotes = notes.length;
+  if (noOfNotes) {
+    if (!isLastNoteEmpty()) {
+      notes.push({
+        title: "",
+        note: "",
+      });
+    } else {
+      alert("You already have an empty note!");
+    }
+  } else {
+    notes.push({
+      title: "",
+      note: "",
+    });
+  }
+  renderNoteWithIndex(noOfNotes, false);
+}
+
+function deleteNote(currentIndex) {
+  currentIndex = Number(currentIndex);
+  notes.splice(currentIndex, 1);
+  renderNoteWithIndex(0);
+}
+
+function deleteEmpty() {
+  notes.map((item, currentIndex) => {
+    if (item.title === "" && item.note === "") {
+      notes.splice(currentIndex, 1);
+    }
+  });
+}
+
+function renderNotesList() {
+  if (notes.length != 0) {
+    var notesListInner = "";
+    notes.map((item, currentIndex) => {
+      notesListInner += `
+      <div id=${currentIndex} class="note-list-item${
+        selectedNoteIndex === currentIndex ? "-selected" : ""
+      }" onClick="renderNoteWithIndex(this.id)">
+          <h3 class="note-list-item-title">${
+            item.title === "" ? "Untitled" : item.title
+          }</h3>
+          <p class="note-list-item-note">${
+            item.note === "" ? "Note" : item.note
+          }</p>
+      </div>
+      `;
+    });
+  } else {
+    var notesListInner = `No notes to display`;
+  }
+  notesList.innerHTML = notesListInner;
+  localStorage.setItem("notes", JSON.stringify(notes));
+}
+
+function renderNoteWithIndex(currentIndex, shouldClearEmpty = true) {
+  currentIndex = Number(currentIndex);
+  selectedNoteIndex = currentIndex;
+
+  shouldClearEmpty && deleteEmpty();
+
+  var noteItemInner;
+  if (notes.length != 0) {
+    noteItemInner = `
+  <button id=${currentIndex} class="btn delete-btn" onclick="deleteNote(this.id)">
+          <img src="/images/trash.svg" class="btn-icon" alt="delete current note"/>
+          <span>Delete</span>
+        </button>
+  <div contenteditable="true"
+    id=${currentIndex}
+    type="text"
+    placeholder="Untitled"
+    class="note-title div-edit"
+    onInput="titleChangeHandler(this.id)">${notes[currentIndex].title}</div>
+  <textarea
+    id=${currentIndex}
+    type="text"
+    placeholder="Note"
+    class="note-note js-note-note"
+    onInput="noteChangeHandler(this.id)"
+  >${notes[currentIndex].note}</textarea>
+  `;
+  } else {
+    noteItemInner = `
+    <div class="empty-state js-empty-state">
+              <img src="images/file.svg" class="image" />
+              <h2>No Notes Created</h2>
+              <p>Quickly jot that thought down, before it's gone!</p>
+            </div>
+    `;
+  }
+  noteItem.innerHTML = noteItemInner;
+
+  renderNotesList();
+}
+
+initializeNotes();
+renderNoteWithIndex(0);

index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>NotesHD | Hetav Desai</title>
+  </head>
+  <body>
+    <script src="theme.js" type="text/javascript"></script>
+    <div class="container">
+      <section class="left">
+        <div class="header">
+          <h2 class="notes-list-heading">Notes HD</h2>
+          <label class="theme-switch-wrapper">
+            <div class="theme-switch">
+              <input
+                type="checkbox"
+                class="toggle-theme-checkbox"
+                aria-label="toggle theme"
+              />
+              <div class="slider round"></div>
+            </label>
+          </div>
+        </div>
+        <div class="notes-list js-notes-list">
+          <!-- <div class="note-list-item">
+            <h3 class="title">Title</h3>
+            <p class="note">note</p>
+          </div>
+          <div class="note-list-item-selected">
+            <h3 class="note-list-item-title">Title</h3>
+            <p class="note-list-item-note">note</p>
+          </div> -->
+        </div>
+        <button class="btn add-btn" onclick="addNote()">
+          <img src="/images/plus.svg" class="btn-icon" alt="add new note" />
+          <span>New Note</span>
+        </button>
+      </section>
+      <section class="right">
+        <div class="note-item js-note-item">
+          <!-- <input type="text" placeholder="Title" class="note-title"></input> -->
+          <!-- <textarea
+            type="text"
+            placeholder="Note note"
+            class="note-note"
+          ></textarea>
+          <small class="small-text">Last modified at 06:00 p.m.</small> -->
+        </div>
+      </section>
+    </div>
+    <script src="app.js" type="text/javascript"></script>
+  </body>
+</html>