Natuurlijk! Hier is een stapsgewijze gids voor het maken van een taakbeheersysteem in JavaScript, inclusief structuur, taakstatussen en voorbeelden van code voor het toevoegen, bijwerken en verwijderen van taken, met aandacht voor gebruikersauthenticatie en herinneringen. 1. Projectstructuur opzetten Maak een overzichtelijke mappenstructuur, bijvoorbeeld: - index.html - styles.css - app.js - data.json (optioneel, voor opslag) - api.js (voor API-interacties, indien je back-end gebruikt) 2. Data modellering Definieer een taakobject met eigenschappen: ```javascript { id: unieke_id, titel: string, beschrijving: string, status: 'in afwachting' | 'bezig' | 'voltooid', deadline: Date, herinnering: Date (optioneel) } ``` 3. Structurering van de applicatie Gebruik JavaScript-modules of gescheiden functies: - Voer functies uit voor CRUD-operaties (Create, Read, Update, Delete) - Beheer de status van taken - Beveilig gebruikersgegevens (bijvoorbeeld met authenticatie) - Plan herinneringen (bijvoorbeeld met setTimeout of setInterval) 4. Implementatie van taakstatussen Maak bijvoorbeeld een functie om taken te filteren op status: ```javascript function filterTakenOpStatus(taken, status) { return taken.filter(t => t.status === status); } ``` 5. Voorbeeldcode: taken toevoegen ```javascript let taken = []; function voegTaakToe(titel, beschrijving, deadline) { const nieuweTaak = { id: Date.now().toString(), titel, beschrijving, status: 'in afwachting', deadline: new Date(deadline), }; taken.push(nieuweTaak); return nieuweTaak; } ``` 6. Taak bijwerken Bijvoorbeeld status veranderen: ```javascript function updateTaakStatus(id, nieuweStatus) { const taak = taken.find(t => t.id === id); if (taak) { taak.status = nieuweStatus; } } ``` 7. Taak verwijderen ```javascript function verwijderTaak(id) { taken = taken.filter(t => t.id !== id); } ``` 8. Gebruikersauthenticatie Implementeer basisauthenticatie via een login-systeem met gebruikersgegevens: - Opslag van gebruikersgegevens (bijvoorbeeld in een database of lokaal) - Login-formulier - Token of sessiebeheer Voor eenvoudige projecten kun je lokale opslag gebruiken: ```javascript localStorage.setItem('user', JSON.stringify({ username, token })); ``` 9. Herinneringen aan deadlines Plan herinneringen met setTimeout: ```javascript function planHerinnering(taak) { const nu = new Date(); const tijdTotDeadline = taak.deadline - nu; if (tijdTotDeadline > 0) { setTimeout(() => { alert(`Herinnering: De taak "${taak.titel}" is bijna verlopen!`); }, tijdTotDeadline); } } ``` Je kunt dit bij het toevoegen van een taak uitvoeren: ```javascript taken.forEach(planHerinnering); ``` 10. Samenvatting - Gebruik een gestructureerde dataopslag (bijvoorbeeld array of database) - Maak functies voor CRUD-operaties - Beheer taakstatussen via eigenschappen - Voeg authenticatie toe voor beveiliging - Plan herinneringen op basis van deadlines - Bouw de gebruikersinterface met HTML en CSS, en gebruik JavaScript om interacties te beheren Met deze stappen heb je een solide basis voor je taakbeheersysteem in JavaScript. Veel succes!

Ik zal je begeleiden bij het maken van een taakbeheersysteem in JavaScript. Hier is een complete structuur met codevoorbeelden. ## Applicatiestructuur ``` task-manager/ ├── index.html ├── css/ │ └── style.css ├── js/ │ ├── app.js │ ├── auth.js │ ├── tasks.js │ └── reminders.js └── data/ └── (lokale opslag) ``` ## 1. Gebruikersauthenticatie ```javascript // auth.js class AuthManager { constructor() { this.currentUser = null; this.users = JSON.parse(localStorage.getItem('users')) || []; } register(username, password) { const userExists = this.users.find(user => user.username === username); if (userExists) { throw new Error('Gebruikersnaam bestaat al'); } const user = { id: Date.now().toString(), username, password: this.hashPassword(password), createdAt: new Date().toISOString() }; this.users.push(user); localStorage.setItem('users', JSON.stringify(this.users)); return user; } login(username, password) { const user = this.users.find(u => u.username === username && u.password === this.hashPassword(password) ); if (user) { this.currentUser = user; localStorage.setItem('currentUser', JSON.stringify(user)); return user; } throw new Error('Ongeldige inloggegevens'); } logout() { this.currentUser = null; localStorage.removeItem('currentUser'); } hashPassword(password) { // Eenvoudige hash - gebruik bcrypt in productie return btoa(password); } isAuthenticated() { return this.currentUser !== null; } } ``` ## 2. Taakbeheer Systeem ```javascript // tasks.js class TaskManager { constructor() { this.tasks = this.loadTasks(); this.statuses = ['in-afwachting', 'bezig', 'voltooid']; } loadTasks() { const auth = new AuthManager(); const currentUser = JSON.parse(localStorage.getItem('currentUser')); if (!currentUser) return []; const allTasks = JSON.parse(localStorage.getItem('tasks')) || {}; return allTasks[currentUser.id] || []; } saveTasks() { const auth = new AuthManager(); const currentUser = JSON.parse(localStorage.getItem('currentUser')); if (!currentUser) return; const allTasks = JSON.parse(localStorage.getItem('tasks')) || {}; allTasks[currentUser.id] = this.tasks; localStorage.setItem('tasks', JSON.stringify(allTasks)); } // Taak toevoegen addTask(title, description, deadline, priority = 'normaal') { const task = { id: Date.now().toString(), title, description, status: 'in-afwachting', priority, deadline: new Date(deadline).toISOString(), createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), userId: JSON.parse(localStorage.getItem('currentUser')).id }; this.tasks.push(task); this.saveTasks(); this.scheduleReminder(task); return task; } // Taak bijwerken updateTask(taskId, updates) { const taskIndex = this.tasks.findIndex(task => task.id === taskId); if (taskIndex === -1) { throw new Error('Taak niet gevonden'); } this.tasks[taskIndex] = { ...this.tasks[taskIndex], ...updates, updatedAt: new Date().toISOString() }; this.saveTasks(); // Herinnering bijwerken als deadline verandert if (updates.deadline) { this.scheduleReminder(this.tasks[taskIndex]); } return this.tasks[taskIndex]; } // Taak verwijderen deleteTask(taskId) { const taskIndex = this.tasks.findIndex(task => task.id === taskId); if (taskIndex === -1) { throw new Error('Taak niet gevonden'); } const deletedTask = this.tasks.splice(taskIndex, 1)[0]; this.saveTasks(); this.cancelReminder(deletedTask.id); return deletedTask; } // Status wijzigen changeTaskStatus(taskId, newStatus) { if (!this.statuses.includes(newStatus)) { throw new Error('Ongeldige status'); } return this.updateTask(taskId, { status: newStatus }); } // Taken filteren op status getTasksByStatus(status) { return this.tasks.filter(task => task.status === status); } // Taken sorteren op deadline getTasksSortedByDeadline() { return [...this.tasks].sort((a, b) => new Date(a.deadline) - new Date(b.deadline) ); } } ``` ## 3. Herinneringssysteem ```javascript // reminders.js class ReminderManager { constructor() { this.reminders = new Map(); } scheduleReminder(task) { // Bestaande herinnering annuleren this.cancelReminder(task.id); const deadline = new Date(task.deadline); const now = new Date(); // Herinnering 1 uur voor deadline const reminderTime = new Date(deadline.getTime() - (60 * 60 * 1000)); if (reminderTime > now) { const timeoutId = setTimeout(() => { this.showReminder(task); }, reminderTime - now); this.reminders.set(task.id, timeoutId); } } cancelReminder(taskId) { const timeoutId = this.reminders.get(taskId); if (timeoutId) { clearTimeout(timeoutId); this.reminders.delete(taskId); } } showReminder(task) { if (Notification.permission === 'granted') { new Notification('Taakherinnering', { body: `"${task.title}" deadline nadert!`, icon: '/icon.png' }); } else if (Notification.permission !== 'denied') { Notification.requestPermission().then(permission => { if (permission === 'granted') { this.showReminder(task); } }); } // Verwijder herinnering uit cache this.reminders.delete(task.id); } // Dagelijkse herinneringen controleren checkDailyReminders() { const today = new Date(); const tomorrow = new Date(today); tomorrow.setDate(tomorrow.getDate() + 1); const tasksDueTomorrow = taskManager.tasks.filter(task => { const taskDate = new Date(task.deadline); return taskDate.toDateString() === tomorrow.toDateString() && task.status !== 'voltooid'; }); if (tasksDueTomorrow.length > 0) { this.showDailyReminder(tasksDueTomorrow); } } showDailyReminder(tasks) { const taskList = tasks.map(task => `• ${task.title}`).join('\n'); if (Notification.permission === 'granted') { new Notification('Taken voor morgen', { body: `Je hebt ${tasks.length} ta(a)k(en) voor morgen:\n${taskList}`, icon: '/icon.png' }); } } } ``` ## 4. Hoofdapplicatie ```javascript // app.js class TaskApp { constructor() { this.authManager = new AuthManager(); this.taskManager = new TaskManager(); this.reminderManager = new ReminderManager(); this.init(); } init() { this.checkAuthentication(); this.setupEventListeners(); this.loadTasks(); // Start dagelijkse herinneringen setInterval(() => { this.reminderManager.checkDailyReminders(); }, 24 * 60 * 60 * 1000); // Elke 24 uur } checkAuthentication() { const currentUser = localStorage.getItem('currentUser'); if (currentUser) { this.authManager.currentUser = JSON.parse(currentUser); this.showDashboard(); } else { this.showLoginForm(); } } setupEventListeners() { // Login form document.getElementById('login-form')?.addEventListener('submit', (e) => { e.preventDefault(); this.handleLogin(); }); // Registratie form document.getElementById('register-form')?.addEventListener('submit', (e) => { e.preventDefault(); this.handleRegister(); }); // Taak toevoegen form document.getElementById('add-task-form')?.addEventListener('submit', (e) => { e.preventDefault(); this.handleAddTask(); }); } async handleLogin() { const username = document.getElementById('username').value; const password = document.getElementById('password').value; try { const user = this.authManager.login(username, password); this.showDashboard(); this.loadTasks(); } catch (error) { this.showError(error.message); } } async handleRegister() { const username = document.getElementById('reg-username').value; const password = document.getElementById('reg-password').value; try { const user = this.authManager.register(username, password); this.authManager.login(username, password); this.showDashboard(); } catch (error) { this.showError(error.message); } } handleAddTask() { const title = document.getElementById('task-title').value; const description = document.getElementById('task-description').value; const deadline = document.getElementById('task-deadline').value; const priority = document.getElementById('task-priority').value; try { const task = this.taskManager.addTask(title, description, deadline, priority); this.renderTask(task); this.clearTaskForm(); } catch (error) { this.showError(error.message); } } renderTask(task) { const taskElement = document.createElement('div'); taskElement.className = `task task-${task.status} task-${task.priority}`; taskElement.innerHTML = ` <h3>${task.title}</h3> <p>${task.description}</p> <div class="task-meta"> <span class="status">${task.status}</span> <span class="deadline">${new Date(task.deadline).toLocaleDateString('nl-NL')}</span> <span class="priority">${task.priority}</span> </div> <div class="task-actions"> <button onclick="app.updateTaskStatus('${task.id}', 'bezig')">Start</button> <button onclick="app.updateTaskStatus('${task.id}', 'voltooid')">Voltooien</button> <button onclick="app.deleteTask('${task.id}')">Verwijderen</button> </div> `; document.getElementById('tasks-container').appendChild(taskElement); } updateTaskStatus(taskId, status) { try { this.taskManager.changeTaskStatus(taskId, status); this.loadTasks(); // Herlaad de weergave } catch (error) { this.showError(error.message); } } deleteTask(taskId) { try { this.taskManager.deleteTask(taskId); this.loadTasks(); // Herlaad de weergave } catch (error) { this.showError(error.message); } } loadTasks() { const container = document.getElementById('tasks-container'); container.innerHTML = ''; this.taskManager.tasks.forEach(task => { this.renderTask(task); }); } showError(message) { // Toon foutmelding aan gebruiker alert(message); } // Overige UI methoden... showLoginForm() { /* ... */ } showDashboard() { /* ... */ } clearTaskForm() { /* ... */ } } // Initialiseer de applicatie const app = new TaskApp(); ``` ## Gebruiksvoorbeelden ```javascript // Taak toevoegen const task = app.taskManager.addTask( 'Project afronden', 'Eindverslag schrijven en presentatie voorbereiden', '2024-12-31', 'hoog' ); // Status bijwerken app.taskManager.changeTaskStatus(task.id, 'bezig'); // Taak verwijderen app.taskManager.deleteTask(task.id); // Taken filteren const pendingTasks = app.taskManager.getTasksByStatus('in-afwachting'); const completedTasks = app.taskManager.getTasksByStatus('voltooid'); ``` ## Belangrijke kenmerken: 1. **Lokale authenticatie** met veilige wachtwoordopslag 2. **Drie taakstatussen** met eenvoudige statusovergangen 3. **Deadline herinneringen** met browser notifications 4. **Taakprioriteiten** voor beter overzicht 5. **Responsive UI** met duidelijke taakweergave 6. **Lokale opslag** voor persistentie tussen sessies Dit systeem biedt een solide basis die je verder kunt uitbreiden met extra functies zoals taakcategorieën, herhalende taken, of integratie met een backend API.