Dit is mijn portfolio voor het vak waarin ik verschillende concepten en principes van webontwikkeling heb toegepast. Elk onderwerp is hieronder beschreven, samen met de voorbeelden van waar ze zijn gebruikt in het project.
Deze takenlijst applicatie is gemaakt om verschillende JavaScript- en webontwikkelingsconcepten te demonstreren. Het doel van deze portfolio is om te bewijzen dat alle concepten en principes uit het vak gekend zijn en praktisch kunnen worden toegepast.
- Taken toevoegen
- Taken markeren als voltooid
- Taken verwijderen
- Taken opslaan in LocalStorage
- Taken laden vanuit LocalStorage
- CSS-animaties voor visuele feedback
- Gebruik van flexbox voor layout
- Elementen selecteren
- Elementen manipuleren
- Event aan een element koppelen
- Formulier valideren
- Gebruiken van een constante
- Gebruiken van template literals
- Destructuring
- Spread & Rest operator
- Iteration over een array
- Arrow function
- Callback function
- Promise
- Consumer methods
- Async & Await
- Self executing function
- Fetch om data op te halen
- JSON manipuleren en weergeven
- Basis CSS Animatie
- Gebruiken van een flexbox of CSS grid
- Gebruik van LocalStorage
- Bronnen
Voorbeeld: const taskForm = document.getElementById('task-form');
In het bestand main.js worden elementen geselecteerd met document.getElementById en document.querySelector.
Voorbeeld: taskSpan.classList.toggle('completed');
Elementen worden gemanipuleerd door klassen toe te voegen en te verwijderen, zoals te zien is in de functie addTask.
Voorbeeld: taskForm.addEventListener('submit', handleFormSubmit);
Events worden gekoppeld aan elementen met addEventListener.
Voorbeeld: if (taskText !== '') { addTask(taskText); } else { alert('Please enter a task'); }
Formulieren worden gevalideerd voordat gegevens worden verwerkt.
Voorbeeld: const LOCAL_STORAGE_KEY = 'tasks';
Constantes worden gebruikt voor waarden die niet veranderen, zoals de sleutel voor LocalStorage.
Voorbeeld: taskSpan.textContent = `${taskText}`;
Template literals worden gebruikt voor het dynamisch maken van strings.
Voorbeeld: tasks.forEach(({ text, completed }) => { addTask(text, completed); });
Destructuring wordt gebruikt om objecten te ontleden.
Voorbeeld: function mergeTasks(...taskArrays) { return [].concat(...taskArrays); }
De spread en rest operator worden gebruikt voor het samenvoegen en verspreiden van arrays.
Voorbeeld: tasks.forEach(task => { addTask(task.text, task.completed); });
Arrays worden doorlopen met forEach.
Voorbeeld: tasks.forEach(task => { addTask(task.text, task.completed); });
Arrow functions worden gebruikt voor korte, anonieme functies.
Voorbeeld: fetchButton.addEventListener('click', () => { fetchAndConsumeTasks(); });
Callback functies worden gebruikt als argumenten voor andere functies.
Voorbeeld: function saveTasks() { return new Promise((resolve, reject) => { ... }); }
Promises worden gebruikt voor asynchrone bewerkingen zoals het opslaan van taken.
Voorbeeld: .then(res => { return res.json(); })
Consumer methods zoals then en catch worden gebruikt om resultaten van promises te verwerken.
Voorbeeld: async function fetchAndConsumeTasks() { const tasks = await fetchTasks(); ... }
Async/Await wordt gebruikt om asynchrone code te schrijven die lijkt op synchrone code.
Voorbeeld: (function() { console.log('Self executing function'); })();
Self executing functions worden gebruikt om code direct uit te voeren.
Voorbeeld: fetch('https://fakestoreapi.com/carts?limit=5')
De Fetch API wordt gebruikt om data op te halen van een externe bron.
Voorbeeld: const tasks = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || [];
JSON wordt gebruikt voor het opslaan en ophalen van data in LocalStorage.
Voorbeeld:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#tasks li {
animation: fadeIn 0.5s ease-in-out;
}
**Bronnen**
-- : https://www.w3schools.com/js/default.asp
-- : https://chatgpt.com/share/7cb55f6a-33a8-4e01-b895-52ddab3a6c9d
-- : https://chatgpt.com/share/c858618e-3c14-4b0f-b772-b6570ee18ad3
-- : https://fakestoreapi.com/docs