<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>
* {
  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 0.4em;
  width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(lightyellow, darkorange);
  border-radius: 5px;
  padding: 0.6em;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

img {
  padding: 0.4em;
  width: 100%;
}

h3 {
  user-select: none;
}

p {
  margin: 0.2em 0;
  font-size: 1.1em;
}

textarea {
  width: 300px;
  height: 80px;
  padding: 0.4em;
  border-radius: 5px;
  font-size: 1em;
  resize: none;
  margin-bottom: 0.7em;
}

input[type="date"] {
  width: 150px;
  text-align: center;
  margin-bottom: 3em;
}

button {
  width: 140px;
  padding: 0.4em;
  margin: 0.4em 0;
  cursor: pointer;
  border: none;
  background: linear-gradient(lightgreen, darkgreen);
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.8em;
  text-transform: uppercase;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}

button:active {
  box-shadow: 0 1px 1px rgba(0, 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: 0.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, 0.6);
  transition: 0.2s;
  opacity: 0;
}

.show {
  opacity: 1;
}

.info.null,
.notify.null {
  display: none;
}

.complete {
  padding: 0 0.4em;
  color: green;
}

.delete {
  padding-left: 0.4em;
  color: red;
}

.line-through {
  text-decoration: line-through;
}
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 database
let db;
(async () => {
  db = await idb.openDb("db", 1, (db) => {
    db.createObjectStore("notes", {
      keyPath: "id"
    });
  });

  createList();
})();

// create 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>
            <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>');
  }

  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);
};

// add note
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 {}
};

const deleteNote = async (key) => {
  await db.transaction("notes", "readwrite").objectStore("notes").delete(key);
  await createList();
};

document.querySelector(".add-btn").onclick = addNote;

// clear storage
document.querySelector(".clear-btn").onclick = async () => {
  await db.transaction("notes", "readwrite").objectStore("notes").clear();

  await createList();
};

/*// delete database
document.querySelector('.delete-btn').onclick = async () => {
    await idb.deleteDb('dataBase')
        .then(location.reload())
}*/

// check deadline
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 =
        "!";
    }
  });
};

// handle errors
window.addEventListener("unhandledrejection", (event) => {
  console.error("error: " + event.reason.message);
});
Run Pen

External CSS

  1. https://fonts.googleapis.com/css2?family=Stylish&amp;display=swap

External JavaScript

  1. https://cdn.jsdelivr.net/npm/idb@3.0.2/build/idb.min.js