component

Client-side Component - Image preview

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.

Met CSS & Javascript

Zoals je ziet krijgt de gebruiker de foto te zien. Daarnaast hoeft de foto niet vierkant te zijn. Ik heb ervoor gezorgd dat er een object-fit: cover; op zit zodat het goed schaalt.

Zonder CSS

Zonder css krijg je de upload button te zien zodat de gebruiker nogsteeds zijn foto kan uploaden. Ook ziet de gebruiker de preview er nog. Hiervoor moest ik wel in de HTML de img een width geven om ervoor te zorgen dat de afbeelding niet het hele scherm overnam en de button verbergt. Het gaat anders te koste van de UX.

Zonder JavaScript

Zonder JavaScript werkt het uploaden van een foto nog steeds alleen ziet de gebruiker nu niet welke foto hij heeft geüpload.

Gebruikte JavaScript

Wat ik hier eigenlijk zeg is 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. Het begint natuurlijk 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.

  /* Image upload */
  const fileInput = document.querySelector("#upload-image");
  fileInput.addEventListener("change", () => {
    const file = fileInput.files[0];
    if (file) {
      document.querySelector("img").src = URL.createObjectURL(file);
    }
  });

Client-side Component - Select artists/bands

Een 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'); 
      }
    });
  });

ES6 functies

• Arrow functions
• Const & let
• Template literals
• High order functions - forEach

CSS Enhancement

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 ook voor gezorgd dat de opmaak ook aantrekkelijk wordt voor de doelgroep. Dir heb ik gedaan doormiddel van het gebruik van kleuren, lettertypes, paddings, uitlijning en transitions.

Browser ondersteuning

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)