Skip to content

Commit

Permalink
Merge pull request pranjay-poddar#301 from Avik-creator/Notes-App
Browse files Browse the repository at this point in the history 
Notes App
  • Loading branch information
@pranjay-poddar
pranjay-poddar authored Jul 28, 2022
2 parents 05ec973 + 2d535fb commit e81dc0e
Show file tree
Hide file tree
Showing 5 changed files with 1,194 additions and 0 deletions.
80 changes: 80 additions & 0 deletions Js-Projects/Notes App/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="styles/styles.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700&display=swap" rel="stylesheet">
<title>Notes App</title>
</head>
<body>
<div id="note-app">
<header class="toolbox">
<form id="add-category-form">
<div class="input-field">
<input type="text" placeholder="Category title">
</div>
<button type="submit"
class="icon-button toolbox__btn"
title="Add New Category">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="16"></line>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</button>
</form>

<div class="input-field">
<span class="icon"></span>
<input type="search" placeholder="Search..." id="search-input">
</div>

<div class="actions">
<button class="icon-button toolbox__btn"
title="Show All Notes"
id="show-all-notes">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
<polyline points="2 17 12 22 22 17"></polyline>
<polyline points="2 12 12 17 22 12"></polyline>
</svg>

</button>
<button class="icon-button toolbox__btn"
title="Add New Note"
id="new-note-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="12" y1="18" x2="12" y2="12"></line>
<line x1="9" y1="15" x2="15" y2="15"></line>
</svg>
</button>
</div>
</header>
<main>
<section id="categories-list"></section>

<section id="notes-list"></section>

<section id="note-editor">
<form id="note-add-edit-form">
<input type="text" name="note-title"
autocomplete="off"
placeholder="Note title"/>
<textarea name="note-content" id="note-content" placeholder="Note content..."></textarea>
<button type="submit">Save Note</button>
</form>
</section>

</main>
</div>
<script src="scripts/note.js"></script>
<script src="scripts/note-dom-helper.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
207 changes: 207 additions & 0 deletions Js-Projects/Notes App/scripts/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
(() => {
"use strict";
const categoriesList = document.getElementById("categories-list");
const notesList = document.getElementById("notes-list");
const categoryAddEditForm = document.getElementById("add-category-form");
const noteAddEditForm = document.getElementById("note-add-edit-form");
const searchInput = document.getElementById("search-input");
const newNoteBtn = document.getElementById("new-note-btn");
const showAllNotesBtn = document.getElementById("show-all-notes");
const _note_app = new Note();

const alertBox = new AlertBox({});

function filterNotesList(trend = '') {
const result = _note_app.filterNotes(trend);

notesList.innerHTML = '';
// show result in list
result.map(note => {
notesList.appendChild(note.el)
});

if (!result.length)
notesList.innerHTML = `<p class="content-placeholder">Notes not found.</p>`
}

function handleCategoryAddUpdate(e) {
e.preventDefault();

// find title input and get the value
const titleInput = e.target.querySelector("input");

if (!titleInput.value) {
alertBox.show({header: "Category Adding Error", message: "Enter a valid title.", buttonText: "OK!"});
titleInput.focus();
return
}

if (!_note_app.updatingCategoryID) {
// unique id for each cat
const id = new Date().getTime();
const newCat = new CategoryItem({title: titleInput.value.trim(), id});

// add new category to app
_note_app.addCategory(newCat);

} else {
// update existing category
_note_app.updateCategory(titleInput.value.trim());
}

// reset input
titleInput.value = "";
}

function handleCategoryItemClick(e) {
e.preventDefault();

const item = e.target.closest(".category-item");
if (!item)
return;

const targetItemID = item.getAttribute("data-cat-id");

const targetCategory = _note_app.getCategoryByID(targetItemID);
if (!targetCategory) {
alertBox.show({header: "Category Select Error", message: "Target category not found.", buttonText: "OK!"});
return;
}

// control item removing
if (e.target.tagName === "BUTTON") {
e.preventDefault();
const action = e.target.getAttribute("data-action");
if (action === "remove") {
_note_app.removeCategory(targetItemID);

} else if (action === "edit") {
const catEditInput = categoryAddEditForm.querySelector("input");
_note_app.updatingCategoryID = targetCategory.data.id;
catEditInput.value = targetCategory.data.title;
catEditInput.focus();
}

} else {
// update selected category
_note_app.selectedCategory = targetCategory;
}

filterNotesList()
}

function handleNoteAddUpdate(e) {
e.preventDefault();

const titleInput = e.target.querySelector("input");
const contentArea = e.target.querySelector("textarea");

if (!titleInput.value) {
alertBox.show({header: "Note Saving Error", message: "Enter a valid title.", buttonText: "OK!"});
titleInput.focus();
return
}

if (!_note_app.selectedCategory) {
alertBox.show({header: "Note Saving Error", message: "Select a category first.", buttonText: "OK!"});
return;
}

const noteObj = {
title: titleInput.value.trim(),
content: contentArea.value.trim(),
category: _note_app.selectedCategory.data.id // set category on note
};

if (!_note_app.selectedNote) {
// unique id for each note
noteObj.id = new Date().getTime();
noteObj.created_at = new Date().getTime();
const newNote = new NoteItem(noteObj);

// add new category to app
_note_app.addNote(newNote);

} else {
noteObj.updated_at = new Date().getTime();
// update existing category
_note_app.updateNote(noteObj);
}

}

function handleNoteItemClick(e) {
e.preventDefault();

const item = e.target.closest(".note-item");
if (!item)
return;

const targetItemID = item.getAttribute("data-note-id");

const targetNote = _note_app.getNoteById(targetItemID);
if (!targetNote) {
alertBox.show({header: "Note Select Error", message: "Target note not found.", buttonText: "OK!"});
return;
}

// control item removing
if (e.target.tagName === "BUTTON") {
e.preventDefault();
const action = e.target.getAttribute("data-action");
if (action === "remove") {
_note_app.removeNote(targetItemID);
}

} else {
// set selected notes values to the editor form
const noteTitle = noteAddEditForm.querySelector("input");
const noteContent = noteAddEditForm.querySelector("textarea");
noteTitle.value = targetNote.data.title;
noteContent.value = targetNote.data.content;

// update selected category
_note_app.selectedNote = targetNote
}

}

function handleSearchInNotes(e) {
filterNotesList(e.target.value)
}

function handleNewNoteBtnClick(e) {
_note_app.selectedNote = null;
const noteTitle = noteAddEditForm.querySelector("input");
const noteContent = noteAddEditForm.querySelector("textarea");
noteTitle.value = '';
noteContent.value = '';
noteTitle.focus();

}

function handleShowAllNotesBtnClick(e) {
_note_app.selectedCategory = null;
filterNotesList()
}

function initListeners() {
// add listener for category adding
categoryAddEditForm.addEventListener("submit", handleCategoryAddUpdate);
categoriesList.addEventListener("click", handleCategoryItemClick);

// add listener to note form
noteAddEditForm.addEventListener("submit", handleNoteAddUpdate);
notesList.addEventListener("click", handleNoteItemClick);

// add listener to control search
searchInput.addEventListener("input", handleSearchInNotes);

newNoteBtn.addEventListener("click", handleNewNoteBtnClick);

showAllNotesBtn.addEventListener("click", handleShowAllNotesBtnClick);
}

initListeners();

})();
Loading

0 comments on commit e81dc0e

Please sign in to comment.