Good day, friends!Today we, as the name implies, will write a simple application for creating and storing notes.The features of our application will be as follows:- Create a note.
- Storage of notes.
- Delete a note.
- Mark about the task.
- Information about the date the task was completed.
- Reminder to complete a task.
The application will be written in JavaScript.Notes will be stored in an indexed database (IndexedDB). This library will be used to facilitate working with IndexedDB . According to the developers of this library, it is "the same as IndexedDB, but with promises."It is assumed that you are familiar with the basics of IndexedDB. If not, I recommend reading this article before continuing .I understand that to solve such a problem as storing notes, LocalStorage is enough. However, I wanted to explore some of the features of IndexedDB. Thus, the choice in favor of the latter was made solely from epistemological considerations. At the end, you will find links to a similar application where data storage is implemented using LocalStorage.So let's go.Our markup looks like this:
<link href="https://fonts.googleapis.com/css2?family=Stylish&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/idb@3.0.2/build/idb.min.js"></script>
<div class="box">
<img src="https://placeimg.com/480/240/nature" alt="#">
<p>Note text: </p>
<textarea></textarea>
<p>Notification date: </p>
<input type="date">
<button class="add-btn">add note</button>
<button class="clear-btn">clear storage</button>
</div>
Remarks:- Input fields could be created using the tags “figure” and “figcaption”. It would be more semantic, so to speak.
- As it turned out later, choosing the “input” tag with the type “date” was not the best solution. About it below.
- In one application, reminders (notifications) are implemented using the Notifications API. However, it seemed strange to me to ask the user permission to display notifications and add the ability to turn them off, because, firstly, when we talk about the application for notes (tasks), reminders are implied, and secondly, they can be implemented so that they do not annoy user upon repeated appearance, i.e. unobtrusively.
- Initially, the application provided the ability to indicate not only the date, but also the time of the reminder. Subsequently, I decided that the date is enough. However, if desired, it is easy to add.
We connect styles:* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: radial-gradient(circle, skyblue, steelblue);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
font-family: 'Stylish', sans-serif;
font-size: 1.2em;
}
.box,
.list {
margin: 0 .4em;
width: 320px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(lightyellow, darkorange);
border-radius: 5px;
padding: .6em;
box-shadow: 0 0 4px rgba(0, 0, 0, .6)
}
img {
padding: .4em;
width: 100%;
}
h3 {
user-select: none;
}
p {
margin: .2em 0;
font-size: 1.1em;
}
textarea {
width: 300px;
height: 80px;
padding: .4em;
border-radius: 5px;
font-size: 1em;
resize: none;
margin-bottom: .7em;
}
input[type="date"] {
width: 150px;
text-align: center;
margin-bottom: 3em;
}
button {
width: 140px;
padding: .4em;
margin: .4em 0;
cursor: pointer;
border: none;
background: linear-gradient(lightgreen, darkgreen);
border-radius: 5px;
font-family: inherit;
font-size: .8em;
text-transform: uppercase;
box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
}
button:active {
box-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}
button:focus,
textarea:focus,
input:focus {
outline: none;
}
.note {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
font-style: italic;
user-select: none;
word-break: break-all;
position: relative;
}
.note p {
width: 240px;
font-size: 1em;
}
.note span {
display: block;
cursor: pointer;
font-weight: bold;
font-style: normal;
}
.info {
color: blue;
}
.notify {
color: #ddd;
font-size: .9em;
font-weight: normal !important;
text-align: center;
line-height: 25px;
border-radius: 5px;
width: 130px;
height: 25px;
position: absolute;
top: -10px;
left: -65px;
background: rgba(0, 0, 0, .6);
transition: .2s;
opacity: 0;
}
.show {
opacity: 1;
}
.info.null,
.notify.null {
display: none;
}
.complete {
padding: 0 .4em;
color: green;
}
.delete {
padding-left: .4em;
color: red;
}
.line-through {
text-decoration: line-through;
}
Do not pay much attention to them yet.We pass to the script.Find the input fields and create a container for notes:let textarea = document.querySelector('textarea')
let dateInput = document.querySelector('input[type="date"]')
let list = document.createElement('div')
list.classList.add('list')
document.body.appendChild(list)
Create a database and storage:let db;
(async () => {
db = await idb.openDb('db', 1, db => {
db.createObjectStore('notes', {
keyPath: 'id'
})
})
createList()
})();
Consider the function of adding notes in order to understand what a single note is or, more precisely, what it contains. This will help to understand how the list is formed:
document.querySelector('.add-btn').onclick = addNote
const addNote = async () => {
if (textarea.value === '') return
let text = textarea.value
let date
dateInput.value === '' ? date = null : date = dateInput.value
let note = {
id: id,
text: text,
createdDate: new Date().toLocaleDateString(),
completed: '',
notifyDate: date
}
try {
await db.transaction('notes', 'readwrite')
.objectStore('notes')
.add(note)
await createList()
.then(() => {
textarea.value = ''
dateInput.value = ''
})
} catch { }
}
Now we are going to create a list:let id
const createList = async () => {
list.innerHTML = `<h3>Today is ${new Intl.DateTimeFormat('en', { year: 'numeric', month: 'long', day: 'numeric' }).format()}</h3>`
let notes = await db.transaction('notes')
.objectStore('notes')
.getAll()
let dates = []
if (notes.length) {
id = notes.length
notes.map(note => {
list.insertAdjacentHTML('beforeend',
`<div class = "note" data-id="${note.id}">
//
<span class="notify ${note.notifyDate}">${note.notifyDate}</span>
// ()
// ,
//
//
// (CSS: .info.null, .notify.null)
<span class="info ${note.notifyDate}">?</span>
// ()
<span class="complete">V</span>
//
<p class="${note.completed}">Text: ${note.text}, <br> created: ${note.createdDate}</p>
// ()
<span class="delete">X</span>
</div>`)
if (note.notifyDate === null) {
return
} else {
dates.push({
id: note.id,
date: note.notifyDate.replace(/(\d+)-(\d+)-(\d+)/, '$3.$2.$1')
})
}
})
} else {
id = 0
list.insertAdjacentHTML('beforeend', '<p class="note">empty</p>')
}
An array of objects for storing reminder dates has two fields: “id” for identifying notes and “date” for comparing dates. Writing the value of the reminder date in the "date" field, we are forced to convert this value, since inputDate.value returns data in the format "yyyy-mm-dd", and we are going to compare this data with the data in the format we are used to, that is "Dd.mm.yyyy". Therefore, we use the “replace” method and regular expression, where, using grouping, we invert blocks and replace hyphens with dots. There may be a more versatile or elegant solution.Next, we work with notes:
document.querySelectorAll('.note').forEach(note => note.addEventListener('click', event => {
if (event.target.classList.contains('complete')) {
event.target.nextElementSibling.classList.toggle('line-through')
note.querySelector('p').classList.contains('line-through')
? notes[note.dataset.id].completed = 'line-through'
: notes[note.dataset.id].completed = ''
db.transaction('notes', 'readwrite')
.objectStore('notes')
.put(notes[note.dataset.id])
} else if (event.target.classList.contains('delete')) {
deleteNote(+note.dataset.id)
} else if (event.target.classList.contains('info')) {
event.target.previousElementSibling.classList.toggle('show')
}
}))
checkDeadline(dates)
}
The function to delete a note from the list and storage looks like this:const deleteNote = async key => {
await db.transaction('notes', 'readwrite')
.objectStore('notes')
.delete(key)
await createList()
}
Our application does not have the ability to delete the database, but the corresponding function could look like this:document.querySelector('.delete-btn').onclick = async () => {
await idb.deleteDb('dataBase')
.then(location.reload())
}
The reminder check function compares the current date and the reminder dates entered by the user:const checkDeadline = async dates => {
let today = `${new Date().toLocaleDateString()}`
dates.forEach(date => {
if (date.date === today) {
document.querySelector(`div[data-id="${date.id}"] .info`).textContent = '!'
}
})
}
Finally, add an error handler to the Window object that was not processed in the corresponding code blocks:window.addEventListener('unhandledrejection', event => {
console.error('error: ' + event.reason.message)
})
The result looks like this:→ Code on GithubHere is a similar application on Local Storage:→ The code of this application on GithubI will be glad to any comments.Thank you for attention.