Приложение неполное, поскольку я работаю с другими функциями сейчас < /p>
Я пытался спросить об этом вопросе, и Chatgpt сказал, что его браузер оптимизирует себя, поскольку он считает Textarea не стеснять во время загрузки DOM. Затем он добавил еще одну requestAnimationFrame внутри уже активного ... но это тоже не сработало.
Код: Выделить всё
const main = document.getElementById('home');
const create = document.getElementById('create');
// const view = document.getElementById('view');
const createBtn = document.getElementById('createBtn');
const viewBtn = document.getElementById('viewBtn');
const saveBtn = document.getElementById('saveBtn');
const backBtn = document.getElementById('backBtn');
function goHome() {
main.classList.remove('hidden');
create.classList.add('hidden');
}
function createPage() {
main.classList.add('hidden');
create.classList.remove('hidden');
requestAnimationFrame(() => {
create.classList.remove('opacity-0', 'scale-50');
create.classList.add('opacity-100', 'scale-100');
})
}
//route handler
function handleRoute(path) {
if (path === '/create') createPage();
else goHome();
}
createBtn.addEventListener("click", () => {
history.pushState({
page: 'create'
}, '', '/create');
handleRoute('/create');
})
saveBtn.addEventListener('click', async () => {
const title = document.getElementById('title').value;
const noteBody = document.getElementById('textSpace').value;
const response = await fetch('/api/notes', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title,
noteBody
})
})
const result = await response.text();
console.log(result);
})
backBtn.addEventListener("click", () => {
create.classList.remove('opacity-100', 'scale-100');
create.classList.add('opacity-0', 'scale-50');
setTimeout(() => {
history.back();
document.querySelector('#create input').value = '';
document.querySelector('#create textarea').value = '';
}, 150);
})
//controlling browser buttons as we add to history stack using pushstate
window.addEventListener('popstate', () => handleRoute(window.location.pathname));
//page load for manual traversal or reload
//why? app js is loaded from top down everytime when these scenarios happen
//so browser should navigate to that place before user can see the dom
handleRoute(window.location.pathname);
//show the DOM only after setting up DOM (JS reads from top to bottom,
//sets everything above this, and then onnly unhides body)
document.body.classList.remove("hidden");< /code>
.font-inter {
font-family: 'Josefin sans', sans-serif;
}
textarea {
scrollbar-width: thin;
scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}
textarea::-webkit-scrollbar {
width: 6px;
}
textarea::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.3);
/* Tailwind's gray-400 */
border-radius: 6px;
}
textarea::-webkit-scrollbar-track {
background: transparent;
}< /code>
Minimalist Note Taker
Welcome! Ready to start noting today?
[img]./assets/addnote.svg[/img]
NEW
[img]./assets/seenotes.svg[/img]
VIEW
BACK
SAVE
Подробнее здесь: https://stackoverflow.com/questions/796 ... shows-ever