Демо: jsFiddle DEMO
HTML
Все, что вам нужно HTML
<h1>Work Day Scheduler</h1>
<h3>A simple calendar app for scheduling your work day</h3>
<div class="Scheduler"></div>
JavaScript
Мы будем использовать Window.localStorage для сохранения данных, чтобы пользователь мог выйти или обновить sh страницу.
Создание 24h в AM / PM конвертера:
const ampm = h => (h%12||12)+(h<12?'AM':'PM');
Использование Window.localStorage для чтения (и сохранения) вашего LS объекта в браузере Память.
const LS = JSON.parse(localStorage.scheduler||'{}'); // String is now an Object
Создайте и сохраните шаблон HTML как JS String
const template_schedule = h => `<div class="Schedule">
<div class="Schedule-time">${ampm(h)}</div>
<textarea class="Schedule-desc" data-h="${h}">${LS[h]||''}</textarea>
<div class="Schedule-save">SAVE</div>
</div>`;
и добавьте эту строку в DOM, используя Element.insertAdjacentHTML с учетом начало from и конец to час:
for (let h=from; h<=to; h++) {
EL_scheduler.insertAdjacentHTML('beforeend', template_schedule(h))
}
Теперь самое интересное.
Сохранение на размытие текста !
Текстовое поле можно размыть, щелкнув за пределами текстовой области - на элементе «СОХРАНИТЬ» или где-либо еще. Так что это будет работать в каждом случае. (Показать прозрачный "SAVE" текст с помощью CSS :focus и смежного братского комбинатора +)
const save = ev => {
const h = ev.target.getAttribute('data-h'); // Get the hour
LS[h] = ev.target.value; // Update Object
localStorage.scheduler = JSON.stringify(LS); // Store into localStorage as string
};
EL_scheduler.querySelectorAll('.Schedule-desc').forEach(el => {
el.addEventListener('blur', save);
});
Пример в реальном времени:
С Песочницы StackOverflow iframe live-snippet и localStorage не будут работать - перейдите к этому jsFiddle DEMO
А вот SO-фрагмент для полноты:
const from = 9; // use 24h format here
const to = 17; // use 24h format here
// Use window.localStorage to retrieve and store your data object as string
const LS = JSON.parse(localStorage.scheduler||'{}'); // now an Object
const EL_scheduler = document.querySelector('.Scheduler');
const ampm = h => (h%12||12)+(h<12?'AM':'PM');
const template_schedule = h => `<div class="Schedule">
<div class="Schedule-time">${ampm(h)}</div>
<textarea class="Schedule-desc" data-h="${h}">${LS[h]||''}</textarea>
<div class="Schedule-save">SAVE</div>
</div>`;
// Populate Scheduler
for (let h=from; h<=to; h++) {
EL_scheduler.insertAdjacentHTML('beforeend', template_schedule(h))
}
// Logic to save the data:
// On textarea blur Event - save the data by reading the data-h value
const save = ev => {
const h = ev.target.getAttribute('data-h'); // Get the hour
LS[h] = ev.target.value; // Update Object
localStorage.scheduler = JSON.stringify(LS); // Store into localStorage as string
};
EL_scheduler.querySelectorAll('.Schedule-desc').forEach(el => {
el.addEventListener('blur', save);
});
/*QuickReset*/ *{margin:0;box-sizing:border-box;}
body {font: 16px/1.4 sans-serif; color:#555;}
h1, h3 {text-align:center; font-weight:300;}
.Scheduler {
width: calc(100% - 40px);
max-width: 500px;
margin: 1em auto;
}
.Schedule {
border-top: 1px dashed #aaa;
display: flex;
padding: 2px 0;
}
.Schedule > *{
padding: 0.5em 0.8em;
}
.Schedule-time {
width: 70px;
text-align: right;
}
.Schedule-desc {
flex: 1;
font: inherit;
min-height: 70px;
resize: vertical;
background: #eee;
border: none;
border-right: 1px solid #555;
}
.Schedule-desc:focus {
outline: none;
background: #cbe8ef;
}
.Schedule-desc:focus+.Schedule-save{
color: #fff; /* Show the SAVE text on textarea :focus */
}
.Schedule-save {
color: transparent;
background: #06AED5;
border-radius: 0 1em 1em 0;
display: flex;
align-items: center;
user-select: none;
}
<h1>Work Day Scheduler</h1>
<h3>A simple calendar app for scheduling your work day</h3>
<div class="Scheduler"></div>