1. Week 1
Het is de bedoeling om een website te maken waar de eindgebruikers in staat zijn om content van de methode af te kunnen spelen en die de onderzoekers in staat stelt om data te verzamelen om vanuit daar de progressie van de methode te kunnen analyseren. De gebruiker van TuMi Mundo wil dat het mogelijk is om hun kind tweetalig op te voeden doormiddel van de methodes af te spelen en de progressie te kunnen volgen van hun kind.
- Als gebruiker wil ik een story toevoegen aan een bestaande playlist;
- Als gebruiker wil ik een playlist liken (favouriten);
- Als gebruiker wil ik playlist aanmaken;
- Als gebruiker wil ik een instelling opslaan.
Om mijn gedachten en processen te verkennen van de ui-states heb ik ze uitgeschetst. Ik heb een zero, hover, focus, error, succes ,active en loading state geschetst
Op donderdag was ik begonnen met het werkend maken van de like-button, op woensdag was ik begonnen met het werkend maken maar kreeg ik de button uiteindelijk niet werkend. Op donderdag heb ik het wel werkend gekregen, de onderstaande code is de werkende gecodeerde code van donderdag.
Server.js
Ik was begonnen met het maken van een post route. Met let favorites = {}: initialiseer ik een een leeg JS object. Dit object geeft informatie of een playlist is liked/unliked. Het object maakt gebruik van playlist ID's, de values zijn boolean (true/false) dit geeft aan of de playlist is geliked of niet.
app.post('/:playlistId/like-or-unlike', function(request, response) { ... }: Dit maakt de route in Express.js en heeft als endpoint /:playlistId/like-or-unlike. De :playlistId gedeelte van de route is een parameter, wat betekend dat het kan varieren gebaseerd op request.
const playlistId = Number(request.params.playlistId);: Deze regel verwijderd de playlist ID uit de URL parameters vanuit de request. Het zet de ID om in een nummer door Number() function te gebruiken.
const action = request.body.action;: Deze regel haalt de value van de actie van request op de body op. De parameter geeft aan of de user de playlist heeft geliked of niet. De value van de actie is 'like' of 'unlike'.
if (action === 'like') { ... } else if (action === 'unlike') { ... }: Dit is een if/else statements dat de value van de action checkt. Als de value 'like' is betekend het dat de gebruiker de playlist heeft geliked. Dit maakt de code in dat geval naar favorites[playlistId] true. Het omgekeerde geldt voor het 'unlike' geval. De laatste regels van de code redirects de gebruiker naar de /lessons route na de like/unlike actie.
let favorites = {}
app.post('/:playlistId/like-or-unlike', function(request, response) {
const playlistId = Number(request.params.playlistId);
const action = request.body.action; // Retrieve the value of the 'actie' parameter from the form
console.log(action, playlistId)
// Implement the logic to handle liking or unliking the playlist
if (action === 'like') {
// Handle 'like' action
favorites[playlistId] = true
} else if (action === 'unlike') {
favorites[playlistId] = false
}
response.redirect(303, '/lessons')
})
Liked playlist ejs
Daarna heb ik de code aangepast van liked playlist en suggested playlist. Ik heb bij beide een filter toegevoegd en een if + else statement. Bij de form heb ik een method & action toegevoegd, de buttons hebben een title, type, name & value.
<section>
<h2>Liked playlists</h2>
<% if (playlist.filter(playlistItem => favorites[playlistItem.id]).length > 0) { %>
<ul>
<% playlist.filter(playlistItem => favorites[playlistItem.id]).forEach(playlistItem => { %>
<li><a>
<img src="https://fdnd-agency.directus.app/assets/<%= playlistItem.image %>" width="100" height="100" onerror="this.onerror=null;this.src='Placeholder-1.png';" alt="playlist">
<div class="playlist-title"><%= playlistItem.title %></div>
<div class="play-audio">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="12" fill="#F3A22A"/><rect width="16.8" height="16.8" transform="translate(3.59961 3.6001)" fill="#F3A22A"/><path d="M17.0874 13.0614C17.7817 12.5242 17.7817 11.476 17.0874 10.9387C14.9891 9.31514 12.6461 8.03543 10.146 7.14749L9.68929 6.98528C8.8155 6.67494 7.89254 7.26613 7.77425 8.16812C7.44374 10.6883 7.44374 13.3119 7.77425 15.832C7.89254 16.734 8.8155 17.3252 9.68929 17.0148L10.146 16.8526C12.6461 15.9647 14.9891 14.685 17.0874 13.0614Z" fill="white"/></svg>
<p>31 min. 55sec</p>
<form method="POST" action="/<%= playlistItem.id %>/like-or-unlike">
<button title="unlike playlist" type="submit" name="action" value="unlike">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.4 5.25C5.61914 5.25 3.25 7.3293 3.25 10.0298C3.25 11.8927 4.12235 13.4612 5.27849 14.7604C6.43066 16.0552 7.91714 17.142 9.26097 18.0516L11.5796 19.6211C11.8335 19.793 12.1665 19.793 12.4204 19.6211L14.739 18.0516C16.0829 17.142 17.5693 16.0552 18.7215 14.7604C19.8777 13.4612 20.75 11.8927 20.75 10.0298C20.75 7.3293 18.3809 5.25 15.6 5.25C14.1665 5.25 12.9052 5.92214 12 6.79183C11.0948 5.92214 9.83347 5.25 8.4 5.25Z" fill="#F33232"/>
</svg></button>
</form></div></a></li>
<% }) %>
</ul>
<% } else { %>
<p>You have no liked playlists yet.</p>
<% } %>
Suggested playlist ejs
<h2>Suggested playlists</h2>
<% if (playlist.filter(playlistItem => !favorites[playlistItem.id]).length > 0) { %>
<ul>
<% playlist.filter(playlistItem => !favorites[playlistItem.id]).forEach(playlistItem => { %>
<li><a>
<img src="https://fdnd-agency.directus.app/assets/<%= playlistItem.image %>" width="100" height="100" onerror="this.onerror=null;this.src='Placeholder-1.png';" alt="playlist">
<div class="playlist-title"><%= playlistItem.title %></div>
<div class="play-audio"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="12" fill="#F3A22A"/><rect width="16.8" height="16.8" transform="translate(3.59961 3.6001)" fill="#F3A22A"/><path d="M17.0874 13.0614C17.7817 12.5242 17.7817 11.476 17.0874 10.9387C14.9891 9.31514 12.6461 8.03543 10.146 7.14749L9.68929 6.98528C8.8155 6.67494 7.89254 7.26613 7.77425 8.16812C7.44374 10.6883 7.44374 13.3119 7.77425 15.832C7.89254 16.734 8.8155 17.3252 9.68929 17.0148L10.146 16.8526C12.6461 15.9647 14.9891 14.685 17.0874 13.0614Z" fill="white"/></svg>
<p>31 min. 55sec</p>
<form method="POST" action="/<%= playlistItem.id %>/like-or-unlike">
<% if (!favorites[playlistItem.id]) { %>
<button title="like playlist" type="submit" name="action" value="like">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.6536 7.15238C11.8471 7.33832 12.1529 7.33832 12.3464 7.15238C13.1829 6.34871 14.326 5.75 15.6 5.75C18.1489 5.75 20.25 7.64769 20.25 10.0298C20.25 11.7261 19.4577 13.1809 18.348 14.428C17.2397 15.6736 15.7972 16.7316 14.4588 17.6376L12.1401 19.207C12.0555 19.2643 11.9445 19.2643 11.8599 19.207L9.54125 17.6376C8.20278 16.7316 6.76035 15.6736 5.65201 14.428C4.54225 13.1809 3.75 11.7261 3.75 10.0298C3.75 7.64769 5.85106 5.75 8.4 5.75C9.67403 5.75 10.8171 6.34871 11.6536 7.15238Z" stroke="#C4C4C4" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>
<% } else { %>
<button title="unlike playlist" type="submit" name="action" value="unlike">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.4 5.25C5.61914 5.25 3.25 7.3293 3.25 10.0298C3.25 11.8927 4.12235 13.4612 5.27849 14.7604C6.43066 16.0552 7.91714 17.142 9.26097 18.0516L11.5796 19.6211C11.8335 19.793 12.1665 19.793 12.4204 19.6211L14.739 18.0516C16.0829 17.142 17.5693 16.0552 18.7215 14.7604C19.8777 13.4612 20.75 11.8927 20.75 10.0298C20.75 7.3293 18.3809 5.25 15.6 5.25C14.1665 5.25 12.9052 5.92214 12 6.79183C11.0948 5.92214 9.83347 5.25 8.4 5.25Z" fill="#F33232"/>
</svg></button>
<% } %>
</form></div></a></li>
<% }) %>
</ul>
<% } else { %>
<p>No suggested playlists available.</p>
<% } %>
</section>
Ik heb het Figma ontwerp in een eigen file aangepast zodat het responsive is. In de voorgrond komt een geanimeerde rat.
