рд╢реБрдн рджрд┐рди, рджреЛрд╕реНрддреЛрдВ!рдЖрдЬ, рдЬреИрд╕рд╛ рдХрд┐ рдирд╛рдо рд╕реЗ рд╣реА рд╕реНрдкрд╖реНрдЯ рд╣реИ, рдиреЛрдЯреНрд╕ рдмрдирд╛рдиреЗ рдФрд░ рд╕рдВрдЧреНрд░рд╣реАрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд╕рд░рд▓ рдЖрд╡реЗрджрди рд▓рд┐рдЦреЗрдВрдЧреЗредрд╣рдорд╛рд░реЗ рдЖрд╡реЗрджрди рдХреА рд╡рд┐рд╢реЗрд╖рддрд╛рдПрдВ рдЗрд╕ рдкреНрд░рдХрд╛рд░ рд╣реЛрдВрдЧреА:- рдПрдХ рдиреЛрдЯ рдмрдирд╛рдПрдБред
- рдиреЛрдЯреЛрдВ рдХрд╛ рднрдВрдбрд╛рд░рдгред
- рдПрдХ рдиреЛрдЯ рд╣рдЯрд╛рдПрдБред
- рдХрд╛рд░реНрдп рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЪрд┐рд╣реНрдирд┐рдд рдХрд░реЗрдВред
- рдХрд╛рд░реНрдп рдкреВрд░рд╛ рд╣реЛрдиреЗ рдХреА рддрд┐рдерд┐ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЬрд╛рдирдХрд╛рд░реАред
- рдХрд┐рд╕реА рдХрд╛рд░реНрдп рдХреЛ рдкреВрд░рд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЕрдиреБрд╕реНрдорд╛рд░рдХред
рдЖрд╡реЗрджрди рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдореЗрдВ рд▓рд┐рдЦрд╛ рдЬрд╛рдПрдЧрд╛редрдиреЛрдЯреНрд╕ рдПрдХ рдЕрдиреБрдХреНрд░рдорд┐рдд рдбреЗрдЯрд╛рдмреЗрд╕ (IndexedDB) рдореЗрдВ рд╕рдВрдЧреНрд░рд╣реАрдд рдХрд┐рдП рдЬрд╛рдПрдВрдЧреЗред рдЗрд╕ рд▓рд╛рдЗрдмреНрд░реЗрд░реА рдХрд╛ рдЙрдкрдпреЛрдЧ IndexedDB рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреА рд╕реБрд╡рд┐рдзрд╛ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ ред рдЗрд╕ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдХреЗ рдбреЗрд╡рд▓рдкрд░реНрд╕ рдХреЗ рдЕрдиреБрд╕рд╛рд░, рдпрд╣ "рдЗрдВрдбреЗрдХреНрд╕рдбреАрдбреАрдмреА рдХреЗ рд╕рдорд╛рди рд╣реИ, рд▓реЗрдХрд┐рди рд╡рд╛рджреЛрдВ рдХреЗ рд╕рд╛рдеред"рдпрд╣ рдорд╛рдирд╛ рдЬрд╛рддрд╛ рд╣реИ рдХрд┐ рдЖрдк IndexedDB рдХреА рдореВрд▓ рдмрд╛рддреЗрдВ рд╕реЗ рдкрд░рд┐рдЪрд┐рдд рд╣реИрдВред рдпрджрд┐ рдирд╣реАрдВ, рддреЛ рдореИрдВ рдЗрд╕ рд▓реЗрдЦ рдХреЛ рдЬрд╛рд░реА рд░рдЦрдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рдкрдврд╝рдиреЗ рдХреА рд╕рд▓рд╛рд╣ рджреЗрддрд╛ рд╣реВрдВ редрдореИрдВ рд╕рдордЭрддрд╛ рд╣реВрдВ рдХрд┐ рдиреЛрдЯреЛрдВ рдХреЛ рд╕рдВрдЧреНрд░рд╣реАрдд рдХрд░рдиреЗ рдЬреИрд╕реА рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╣рд▓ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рд▓реЛрдХрд▓рд╕реНрдЯреЛрд░реЗрдЬ рдкрд░реНрдпрд╛рдкреНрдд рд╣реИред рд╣рд╛рд▓рд╛рдБрдХрд┐, рдореИрдВ IndexedDB рдХреА рдХреБрдЫ рд╡рд┐рд╢реЗрд╖рддрд╛рдУрдВ рдХрд╛ рдкрддрд╛ рд▓рдЧрд╛рдирд╛ рдЪрд╛рд╣рддрд╛ рдерд╛ред рдЗрд╕ рдкреНрд░рдХрд╛рд░, рдЙрддреНрддрд░рд╛рд░реНрджреНрдз рдХреЗ рдкрдХреНрд╖ рдореЗрдВ рдЪреБрдирд╛рд╡ рдХреЗрд╡рд▓ рдорд╣рд╛рдорд╛рд░реА рд╕рдВрдмрдВрдзреА рд╡рд┐рдЪрд╛рд░реЛрдВ рд╕реЗ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛ред рдЕрдВрдд рдореЗрдВ, рдЖрдкрдХреЛ рдПрдХ рд╕рдорд╛рди рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХреЗ рд▓рд┐рдВрдХ рдорд┐рд▓реЗрдВрдЧреЗ рдЬрд╣рд╛рдВ рд▓реЛрдХрд▓рд╕реНрдЯреЛрд░реЗрдЬ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдбреЗрдЯрд╛ рд╕реНрдЯреЛрд░реЗрдЬ рд▓рд╛рдЧреВ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИредрддреЛ рдЪрд▓рддреЗ рд╣реИрдВредрд╣рдорд╛рд░рд╛ рдорд╛рд░реНрдХрдЕрдк рдЗрд╕ рддрд░рд╣ рджрд┐рдЦрддрд╛ рд╣реИ:
<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>
рдЯрд┐рдкреНрдкрдгрд┐рдпреЛрдВ:- рдЗрдирдкреБрдЯ рдлрд╝реАрд▓реНрдб "рдЖрдВрдХрдбрд╝рд╛" рдФрд░ "рдЕрдВрдЬреАрд░" рдЯреИрдЧ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдмрдирд╛рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред рдпрд╣ рдЕрдзрд┐рдХ рдЕрд░реНрдердкреВрд░реНрдг рд╣реЛрдЧрд╛, рдЗрд╕рд▓рд┐рдП рдмреЛрд▓рдиреЗ рдХреЗ рд▓рд┐рдПред
- рдЬреИрд╕рд╛ рдХрд┐ рдмрд╛рдж рдореЗрдВ рдкрддрд╛ рдЪрд▓рд╛, "рддрд╛рд░реАрдЦ" рдкреНрд░рдХрд╛рд░ рдХреЗ рд╕рд╛рде "рдЗрдирдкреБрдЯ" рдЯреИрдЧ рдЪреБрдирдирд╛ рд╕рдмрд╕реЗ рдЕрдЪреНрдЫрд╛ рд╕рдорд╛рдзрд╛рди рдирд╣реАрдВ рдерд╛ред рдЗрд╕рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдиреАрдЪреЗред
- рдПрдХ рдЖрд╡реЗрджрди рдореЗрдВ, рдЕрдиреБрд╕реНрдорд╛рд░рдХ рдПрдкреАрдЖрдИ (рдЕрдзрд┐рд╕реВрдЪрдирд╛рдПрдВ) рдЕрдзрд┐рд╕реВрдЪрдирд╛ рдПрдкреАрдЖрдИ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рд┐рдд рдХреА рдЬрд╛рддреА рд╣реИрдВред рд╣рд╛рд▓рд╛рдБрдХрд┐, рдпрд╣ рдореБрдЭреЗ рдЕрдЬреАрдм рд▓рдЧрд╛ рдХрд┐ рдореИрдВрдиреЗ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЛ рд╕реВрдЪрдирд╛рдПрдБ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрдиреЗ рдФрд░ рдЙрдиреНрд╣реЗрдВ рдмрдВрдж рдХрд░рдиреЗ рдХреА рдХреНрд╖рдорддрд╛ рдХреЛ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд╣рд╛, рдХреНрдпреЛрдВрдХрд┐ рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ, рдЬрдм рд╣рдо рдиреЛрдЯреЛрдВ (рдХрд╛рд░реНрдпреЛрдВ) рдХреЗ рд▓рд┐рдП рдЖрд╡реЗрджрди рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╛рдд рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рд░рд┐рдорд╛рдЗрдВрдбрд░ рдирд┐рд╣рд┐рдд рд╣реЛрддреЗ рд╣реИрдВ, рдФрд░ рджреВрд╕рд░реА рдмрд╛рдд, рдЙрдиреНрд╣реЗрдВ рд▓рд╛рдЧреВ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ рддрд╛рдХрд┐ рд╡реЗ рдирд╛рд░рд╛рдЬрд╝ рди рд╣реЛрдВ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЗ рдмрд╛рд░-рдмрд╛рд░ рдкреНрд░рдХрдЯ рд╣реЛрдиреЗ рдкрд░, рдЕрд░реНрдерд╛рдд рднреИрдпрд╛ред
- рдкреНрд░рд╛рд░рдВрдн рдореЗрдВ, рдЖрд╡реЗрджрди рдиреЗ рди рдХреЗрд╡рд▓ рддрд╛рд░реАрдЦ, рдмрд▓реНрдХрд┐ рдЕрдиреБрд╕реНрдорд╛рд░рдХ рдХреЗ рд╕рдордп рдХреЛ рдЗрдВрдЧрд┐рдд рдХрд░рдиреЗ рдХреА рдХреНрд╖рдорддрд╛ рдкреНрд░рджрд╛рди рдХреАред рдЗрд╕рдХреЗ рдмрд╛рдж, рдореИрдВрдиреЗ рдлреИрд╕рд▓рд╛ рдХрд┐рдпрд╛ рдХрд┐ рддрд╛рд░реАрдЦ рдкрд░реНрдпрд╛рдкреНрдд рд╣реИред рд╣рд╛рд▓рд╛рдВрдХрд┐, рдпрджрд┐ рд╡рд╛рдВрдЫрд┐рдд рд╣реИ, рддреЛ рдЬреЛрдбрд╝рдирд╛ рдЖрд╕рд╛рди рд╣реИред
рд╣рдо рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ:* {
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;
}
рдЙрди рдкрд░ рдЕрднреА рдЬреНрдпрд╛рджрд╛ рдзреНрдпрд╛рди рди рджреЗрдВредрд╣рдо рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдкрд╛рд╕ рдХрд░рддреЗ рд╣реИрдВредрдЗрдирдкреБрдЯ рдлрд╝реАрд▓реНрдб рдвреВрдВрдвреЗрдВ рдФрд░ рдиреЛрдЯреНрд╕ рдХреЗ рд▓рд┐рдП рдПрдХ рдХрдВрдЯреЗрдирд░ рдмрдирд╛рдПрдВ: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)
рдПрдХ рдбреЗрдЯрд╛рдмреЗрд╕ рдФрд░ рднрдВрдбрд╛рд░рдг рдмрдирд╛рдПрдБ:let db;
(async () => {
db = await idb.openDb('db', 1, db => {
db.createObjectStore('notes', {
keyPath: 'id'
})
})
createList()
})();
рдПрдХ рдПрдХрд▓ рдиреЛрдЯ рдХреНрдпрд╛ рд╣реИ, рдпрд╣ рд╕рдордЭрдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐ рдЗрд╕рдореЗрдВ рдХреНрдпрд╛ рд╣реИ, рдЗрд╕рдореЗрдВ рдиреЛрдЯреНрд╕ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рдХрд╛рд░реНрдп рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░реЗрдВред рдпрд╣ рд╕рдордЭрдиреЗ рдореЗрдВ рдорджрдж рдХрд░реЗрдЧрд╛ рдХрд┐ рд╕реВрдЪреА рдХреИрд╕реЗ рдмрдирддреА рд╣реИ:
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 { }
}
рдЕрдм рд╣рдо рдПрдХ рд╕реВрдЪреА рдмрдирд╛рдиреЗ рдЬрд╛ рд░рд╣реЗ рд╣реИрдВ: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>')
}
рдЕрдиреБрд╕реНрдорд╛рд░рдХ рддрд┐рдерд┐рдпреЛрдВ рдХреЛ рд╕рдВрдЧреНрд░рд╣реАрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╡рд╕реНрддреБрдУрдВ рдХреА рдПрдХ рд╕рд░рдгреА рдореЗрдВ рджреЛ рдлрд╝реАрд▓реНрдб рд╣реИрдВ: рдиреЛрдЯреЛрдВ рдХреА рдкрд╣рдЪрд╛рди рдХреЗ рд▓рд┐рдП "рдЖрдИрдбреА" рдФрд░ рддрд╛рд░реАрдЦреЛрдВ рдХреА рддреБрд▓рдирд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП "рджрд┐рдирд╛рдВрдХ"ред "рджрд┐рдирд╛рдВрдХ" рдлрд╝реАрд▓реНрдб рдореЗрдВ рдЕрдиреБрд╕реНрдорд╛рд░рдХ рддрд┐рдерд┐ рдХрд╛ рдорд╛рди рд▓рд┐рдЦрддреЗ рд╣реБрдП, рд╣рдо рдЗрд╕ рдорд╛рди рдХреЛ рдмрджрд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдордЬрдмреВрд░ рд╣реИрдВ, рдХреНрдпреЛрдВрдХрд┐ inputDate.value рдбреЗрдЯрд╛ рдХреЛ "yyyy-mm-dd" рдкреНрд░рд╛рд░реВрдк рдореЗрдВ рд▓реМрдЯрд╛рддрд╛ рд╣реИ, рдФрд░ рд╣рдо рдЗрд╕ рдбреЗрдЯрд╛ рдХреА рддреБрд▓рдирд╛ рдЙрд╕ рдбреЗрдЯрд╛ рд╕реЗ рдХрд░рдиреЗ рдЬрд╛ рд░рд╣реЗ рд╣реИрдВ рдЬрд┐рд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рд╣рдо рдЙрд╕ рдкреНрд░рд╛рд░реВрдк рдореЗрдВ рдХрд░рддреЗ рд╣реИрдВ, рдЬреЛ "Dd.mm.yyyy"ред рдЗрд╕рд▓рд┐рдП, рд╣рдо "рд░рд┐рдкреНрд▓реЗрд╕" рд╡рд┐рдзрд┐ рдФрд░ рдирд┐рдпрдорд┐рдд рдЕрднрд┐рд╡реНрдпрдХреНрддрд┐ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ, рдЬрд╣рд╛рдВ, рд╕рдореВрд╣реАрдХрд░рдг рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ, рдмреНрд▓реЙрдХ рдХреЛ рдкрд▓рдЯрдирд╛ рдФрд░ рдбреЙрдЯреНрд╕ рдХреЗ рд╕рд╛рде рд╣рд╛рдЗрдлрд╝рди рдХреЛ рдмрджрд▓рдирд╛ред рдЕрдзрд┐рдХ рдмрд╣реБрдореБрдЦреА рдпрд╛ рд╕реБрд░реБрдЪрд┐рдкреВрд░реНрдг рд╕рдорд╛рдзрд╛рди рд╣реЛ рд╕рдХрддрд╛ рд╣реИредрдЕрдЧрд▓рд╛, рд╣рдо рдиреЛрдЯреЛрдВ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддреЗ рд╣реИрдВ:
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)
}
рд╕реВрдЪреА рдФрд░ рднрдВрдбрд╛рд░рдг рд╕реЗ рдиреЛрдЯ рд╣рдЯрд╛рдиреЗ рдХрд╛ рдХрд╛рд░реНрдп рдХреБрдЫ рдЗрд╕ рдкреНрд░рдХрд╛рд░ рд╣реИ:const deleteNote = async key => {
await db.transaction('notes', 'readwrite')
.objectStore('notes')
.delete(key)
await createList()
}
рд╣рдорд╛рд░реЗ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдореЗрдВ рдбреЗрдЯрд╛рдмреЗрд╕ рдХреЛ рд╣рдЯрд╛рдиреЗ рдХреА рдХреНрд╖рдорддрд╛ рдирд╣реАрдВ рд╣реИ, рд▓реЗрдХрд┐рди рд╕рдВрдмрдВрдзрд┐рдд рдлрд╝рдВрдХреНрд╢рди рдЗрд╕ рддрд░рд╣ рджрд┐рдЦ рд╕рдХрддреЗ рд╣реИрдВ:document.querySelector('.delete-btn').onclick = async () => {
await idb.deleteDb('dataBase')
.then(location.reload())
}
рдЕрдиреБрд╕реНрдорд╛рд░рдХ рдЬрд╛рдБрдЪ рдлрд╝рдВрдХреНрд╢рди рд╡рд░реНрддрдорд╛рди рддрд┐рдерд┐ рдФрд░ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рджреНрд╡рд╛рд░рд╛ рджрд░реНрдЬ рдЕрдиреБрд╕реНрдорд╛рд░рдХ рддрд┐рдерд┐рдпреЛрдВ рдХреА рддреБрд▓рдирд╛ рдХрд░рддрд╛ рд╣реИ: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 = '!'
}
})
}
рдЕрдВрдд рдореЗрдВ, рд╡рд┐рдВрдбреЛ рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЗ рд▓рд┐рдП рдПрдХ рддреНрд░реБрдЯрд┐ рд╣реИрдВрдбрд▓рд░ рдЬреЛрдбрд╝реЗрдВ рдЬреЛ рд╕рдВрдмрдВрдзрд┐рдд рдХреЛрдб рдмреНрд▓реЙрдХ рдореЗрдВ рд╕рдВрд╕рд╛рдзрд┐рдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛:window.addEventListener('unhandledrejection', event => {
console.error('error: ' + event.reason.message)
})
рдкрд░рд┐рдгрд╛рдо рдЗрд╕ рддрд░рд╣ рджрд┐рдЦрддрд╛ рд╣реИ:тЖТ Github рдкрд░ рдХреЛрдбрдпрд╣рд╛рдБ рд╕реНрдерд╛рдиреАрдп рднрдВрдбрд╛рд░рдг рдкрд░ рдПрдХ рд╕рдорд╛рди рдЕрдиреБрдкреНрд░рдпреЛрдЧ рд╣реИ:тЖТ GithubI рдкрд░ рдЗрд╕ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХрд╛ рдХреЛрдб рдХрд┐рд╕реА рднреА рдЯрд┐рдкреНрдкрдгреА рдкрд░ рдЦреБрд╢реА рд╣реЛрдЧреАредрдзреНрдпрд╛рди рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред