Development Lifecycle
Als eerste ben ik gaan kijken welke pagina's ik wil bezoeken als klant. Ik wil ook er voor zorgen dat je een dropdown menu krijgt omdat het best veel links zijn over hetzelfde onderwerp. Hiervoor wil ik javascript gebruiken om dit uiteindelijk te kunnen maken. Dit hoort bij een van mijn user stories:
"Als gebruiker wil ik kunnen navigeren op mijn telefoon door de pagina via een menu optie."
Ik heb voor de deeltaak en deze opdracht voor dit projectgever een wireflow gemaakt voor het bedrijf van Funda. Ik heb de mobile versies van de pagina gemaaakt (ik ben uiteindelijk vergeten een schets te maken voor de laptop versie).
Ik heb meeste gebruik gemaakt van mijn oudere schetsen die ik voor Funda heb gemaakt.
Voor meer informatie over de wireflow kan je vinden in 'Deeltaak wireflow'.
Voor de opzet gebruikte ik een groot deel van mijn oude project van Sprint 4 | Look and Feel Corporate Identity Gebruikt. Hier heb ik door middel van <header/>, <main/> & <footer/> de structuur gemaakt van de pagina. Bij dit project ben ik verder gegaan door eerst de mobiele uitbereiding te maken en daarna voor grotere schermen.
Ik heb voor mijn menu op mobiel een hamburger menu gemaakt. Deze opent een menu die hele overlay van de scherm inneemt. Hier in krijg je verschillende dropdown menu's waarin je kan navigeren. Ik heb speciaal gekozen dat als je 1 dropdown opent, de andere dropdowns dicht gaan via mijn JavaScript script. Anders kan het zijn dat je veel te veel links hebt om door te kijken. Dit is goed kwa accessibility maar ook voor een algemeen iemand die even snel een link moet zoeken en dus niet alles hoeft door te lezen.
Voor het filteren van huizen & groepen wil ik een popup methode maken. Deze zal ongeveer hetzelfde eruit zien als een hamburger menu maar helemaal omgebouwd zodat het er goed uit ziet voor een filter en sorteer menu.
Als ik op opslaan druk zullen alle filter opdrachten worden opgeslagen en zal de lijst aangepast worden door middel van de informatie die ik heb doorgegeven in de popup. Deze popup werkt hetzelfde voor een grotere scherm maar zal niet het hele scherm innemen maar een klein deel.
Als laaste wil ik nog flink wat aanpassingen doen aan de @media. Dit ziet er allemaal nog heel ongeorganiseerd uit en dit wil ik een stuk verbeteren. Alleen heb ik nu meer code nodig voor het maken en het fixen van de hamburger menu en filter/sorteer menu.
Ik heb mijn code in de repository op GitHub gezet. Ook staat de pagina live zodat iedereen deze kan bekijken.
klik hier om naar de live url te gaan
Bij de dropdown menu's heb ik een speciale manier gevonden hoe ik de dropdown wil laten werken. Ik heb speciaal gekozen om door middel van 1 dropdown open te hebben een goede functie te laten werken. Hier is een codevoorbeeld over mijn dropdown
// Pakt alle dropdown buttons en voegt een event listener toe
const dropdownButtons = document.querySelectorAll(".dropdown-button");
// Hide all dropdowns initially
const hideAllDropdowns = () => {
const dropdowns = document.querySelectorAll(".dropdown");
// Verstopt alle dropdowns door middel van de "hidden" class
dropdowns.forEach((dropdown) => dropdown.classList.add("hidden"));
dropdownButtons.forEach((button) => {
// Verwijdert de "active" class van alle dropdown buttons
button.classList.remove("active");
button.setAttribute("aria-expanded", "false");
// verwijderd alle stylings van de svg voor rotatie
const img = button.querySelector("img");
img.classList.remove("rotate");
});
};
// Verstopt alle dropdowns
hideAllDropdowns();
// Voegt een event listener toe aan alle dropdown buttons
// Dit betekent als je op een dropdown drukt dat eerst alle dropdowns worden verstopt en de dropdown die je hebt aangeklikt wordt geopend
dropdownButtons.forEach((button) => {
button.addEventListener("click", (event) => {
event.stopPropagation();
const target = button.getAttribute("data-target");
const isAlreadyOpen = !document.querySelector(target).classList.contains("hidden");
// Gebruikt de vorige functie om vervolgens maar 1 dropdown open te hebben
hideAllDropdowns();
if (!isAlreadyOpen) {
// geeft alle styling toe aan de geopende knop en dropdown en laat de svg roteren
document.querySelector(target).classList.toggle("hidden");
// voegt de "active" class van de gekozen dropdown toe
button.classList.add("active");
button.setAttribute("aria-expanded", "true");
// voegt de rotate class toe aan de svg
const img = button.querySelector("img");
img.classList.toggle("rotate");
}
});
});
// resets the dropdown als je opnieuw menu opened
const menuOverlay = document.querySelector('#menu-overlay');
function toggleMenu() {
menuOverlay.classList.toggle('hidden');
hideAllDropdowns();
document.querySelector('main').classList.toggle('hidden');
document.querySelector('footer').classList.toggle('hidden');
}Ik heb een aantal feedback opties gekregen van mijn opdrachtgever en een maar medestudenten, deze issues zal ik op de nieuwe pagina verbeteren zodat ik deze issues kan afronden en afsluiten.
(gemaakt door @WesleySchorel
Ik heb de pagina en de navigatie van de Funda website getest. Ik ging kijken of ik snapte hoe ik mijn toekomstige droomhuizen kon delen met mijn partner.
Ik heb gekeken naar wat er zichtbaar was op alle pagina's en heb een voor mij een logische route gevolgd. Ik heb gekeken of ik de knoppen begreep en of mijn taak zonder hulp van de developer voltooid kon worden.
Uit de test kwam dat de groep pagina niet heel duidelijk was dat het de groep pagina was. Ook dacht hij dat bij de test je 1 huis kon delen en dus niet de hele groep met de persoon.
Senario 1
Taak: Bekijk je lijst die je hebt gedeeld met lijst naam: "Toekomstige Droomhuizen" en je wilt de gehele lijst delen met je partner (Jelte).
Senario: ik (Lisanne) wil de lijst zien waar je je bewaarde huizen op slaat. Zoek hoe je naar deze pagina komt om uiteindelijk je lijst te kunnen delen en druk op de knop om de lijst te delen.
(gemaakt door @
Ik moest van de taak de lijst delen voor mijn partner voor de lijst Toekomstige Droomhuizen
Ik heb op de "Toekomstige Huizen" pagina gedrukt d
Dat ik uiteindelijk wel naar de deelknop kwam maar het was niet heel duidelijk waar de knop stond. Het zou ook wel fijn zijn om een deel knop te hebben in de groepen lijst zelf.
Senario 1
Taak: Bekijk je lijst die je hebt gedeeld met lijst naam: "Toekomstige Droomhuizen" en je wilt de gehele lijst delen met je partner (Jelte).
Senario: ik (Lisanne) wil de lijst zien waar je je bewaarde huizen op slaat. Zoek hoe je naar deze pagina komt om uiteindelijk je lijst te kunnen delen en druk op de knop om de lijst te delen.