component
Wat ik hier heb gedaan is ervoor gezorgd dat mijn Image previewer het blijft doen ook al wordt de CSS of JavaScript uit gezet. De reden dat ik dit heb gedaan is omdat het fijn is voor de gebruiker dat het is gelukt om een foto te uploaden. Als je alleen een button hebt dan weet je niet of het wel of niet is gelukt. Maar doordat je een preview ziet weet de gebruiker dat het is gelukt en of die er tevreden mee is.
Zoals je hieronder ziet krijgt de gebruiker de foto te zien die hij heeft geupload. Door de object-fit: cover; heb ik ervoor gezorgd dt het niet uitmaakt welk format de foot is, het wordt altijd vierkant. Als extra confirmatie krijgt de gebruiker nog een bericht in het groen te zien dat het is gelukt om de file te uploaden.
Zonder css krijgt de gebruiker ook een upload button te zien. Naast de upload button ziet de gebruiker dat hij nog geen bestand heeft gekozen. Als de gebruiker een foot upload ziet die zowel de preview als de file uploaded successfully bericht. Naast de upload button komt ook de file naam te staan. Om ervoor te zorgen dat de afbeelding zonder css niet het hele scherm inneemt heb ik ervoor gekozen om in de HTML de img een width geven. Als ik dat niet doe gaat anders te koste van de UX doordat de next button niet meer zichtbaar is. Die staat dan ergens onderaan de foto.
Zonder JavaScript krijgt de gebruiker een "error" bericht te zien. Dit krijgt die te zijn doordat ik een noscript gebruik. Zo weet de gebruiker dat hij de JavaScript aan moet zetten om een preview te zien van de foto. Het uploaden van een foto werkt nog steeds alleen ziet de gebruiker nu niet welke foto hij heeft geüpload.
<noscript>
<p>You need to enable JavaScript to see the image preview</p>
</noscript>In deze code zeg ik dat als de waarde van het bestandsinput veranderd dat de huidige img die er staat verandert moet worden naar de image die net is geüpload. Oftewel de live preview. De waarde begint op nul (leeg) maar zodra er een foto wordt geüpload verandert de waarde en toont het de geüploade foto. Het change element zorgt ervoor dat de code wordt gactiveerd als er iets wordt verandert oftewel er wordt een image geüpload. Daarnaast zit er nog code tussen van de gebruikte API maar die leg ik uit op de API pagina.
const fileInput = document.querySelector("#upload-image");
const errorMessage = document.querySelector("#error-message");
fileInput.addEventListener("change", () => {
const file = fileInput.files[0];
if (file) {
const reader = new FileReader();
reader.addEventListener("error", (event) => {
const error = reader.error;
errorMessage.textContent = `Error reading the file ${error.message}`;
});
reader.readAsDataURL(file);
document.querySelector("img").src = URL.createObjectURL(file);
}
}); /* Image upload server-side check */
document.querySelector("#upload-image").addEventListener("change", (event) => {
const messageElement = document.querySelector("#message");
const file = event.target.files[0];
if (file) {
const fr = new FileReader();
fr.onload = () => {
if (fr.readyState === FileReader.DONE) {
messageElement.textContent = "File uploaded successfully!";
messageElement.style.color = "green";
}
};
fr.onerror = () => {
messageElement.textContent = "There was an error with uploading the file.";
messageElement.style.color = "red";
};
fr.readAsDataURL(file);
}
});Een ander onderdeel van mijn feature is dat je kan selecteren naar welke artist je luistert. Hiervoor heb ik een Array gemaakt waar de artiesten in staan zodat ik die via EJS kan aanroepen in mijn bestand:
const artists = [
{id:1, name: 'Sleep token', image: '/static/sleeptoken.jpg'},
{id:2, name: 'PVRIS', image: '/static/pvris.jpg'},
{id:3, name: 'Arctic monkeys', image: '/static/arcticmonkeys.jpg'},
{id:4, name: 'Kovacs', image: '/static/kovacs.jpg'},
{id:5, name: 'Melanie Martinez', image: '/static/melaniemartinez.jpg'},
{id:6, name: 'Bring me the horizon', image: '/static/bmth.jpg'},
{id:7, name: 'Doja Cat', image: '/static/dojacat.jpg'},
{id:8, name: 'Grandson', image: '/static/grandson.jpg'},
{id:9, name: 'Ashnikko', image: '/static/ashnikko.jpg'},
{id:10, name: 'Inhaler', image: '/static/inhaler.jpg'},
{id:11, name: 'NF', image: '/static/nf.jpg'},
{id:12, name: 'Nothing but thieves', image: '/static/nbt.jpg'},
{id:13, name: 'Cassyette', image: '/static/cassyette.jpg'},
{id:14, name: 'Chase Atlantic', image: '/static/chaseatlantic.jpg'},
{id:15, name: 'Palaye Royale', image: '/static/palayeroyale.jpg'},
{id:16, name: 'Polyphia', image: '/static/polyphia.jpg'},
{id:17, name: 'Maneskin', image: '/static/maneskin.jpg'},
{id:18, name: 'Bad omens', image: '/static/badomens.jpg'},
];Vervolgens heb ik JavaScript toegevoegd om ze te kunnen selecteren en deselecteren.
Wat is hier zeg is het volgende. Ik selecteer de li want daar staat de data in van de artists. Vervolgens zeg ik dat voor elke li een click event aan toegevoegd moet worden. Daarna zeg ik als de li een class heeft van selected en er wordt op geklikt dan haalt die de class weg. Anders komt de class erbij.
const selectArtist = document.querySelectorAll("#artistList ul li");
selectArtist.forEach(artist => {
artist.addEventListener('click', () => {
if (artist.classList.contains('selected')) {
artist.classList.remove('selected');
} else {
artist.classList.add('selected');
}
});
});- Arrow functions
- Const & let
- Template literals
- High order functions - forEach
De CSS Enhancement heb ik gebruikt om de UX van de site te verbeteren. Hierdoor is het voor de gebruiker een stuk prettiger om mijn feature te gebruiken. Daarnaast heb ik er voor gezorgd dat de opmaak (het design) aantrekkelijker wordt voor de doelgroep. Dit heb ik gedaan doormiddel van het gebruik van kleuren, lettertypes, paddings, uitlijning en onderzoek (check ideas & concept en design & styling).
Om ervoor te zorgen dat mijn code ondersteund wordt door meerdere browser heb ik mijn CSS door de Autoprefixer gehaald. Dit zorgt ervoor dat mijn CSS door meerdere browsers beter wordt ondersteund. De browserslist van last 4 versions heb ik toegepast. Veder heb ik mijn Feature in de volgende Browser getest:
- Safari - Alle functies werken
- Chrome - Alle functies werken
- Edge - Alle functies werken
- Opera - Alle functies werken
- Firefox - Bijna functies werken ( de date input en flexbox heeft kuren)