The clients case Coding the Curbs
Welkom op de wiki van sprint 2 The client case Coding the curbs. Via deze wiki zal ik jullie laten hoe ik heb gewerkt aan een user story voor Coding the Curbs.
Tijdens het analyseren kregen we een case(user story) van de client. Mijn user story heb ik de opdracht om voor de eindgebruiker een pagina te creëren waar in gezien kan worden waar allemaal een smart zone is zodat de persoon daar kan parkeren of laden/lossen. We moesten aan de hand daarvan(user story) een moment hebben voor briefinf/debriefing waardoor we beter de wensen van onze opdrachtgever kunnen opstellen.
Tijdens het ontwerpen van het product heb ik als focus desktop en mobile gehanteerd gezien meeste eindgebruikers meestal 1 van deze device's gebruikt. Aan de hand van schetsen en figma heb ik uiteindelijk een HiFi concept gemaakt die ik ga uitwerken bij de volgende stap.
Tijdens het bouwen heb ik zo veel mogelijk gebruik gemaakt van een responsive design zo dat ik tegelijk voor desktop en mobile ready ben. Voor de website heb ik gebruik gemaakt van de basis principe die ik heb geleerd voor HTML en CSS. Ik heb ook JS voor de menu knop gebruikt.
const doc = document;
const menuOpen = doc.querySelector(".menu");
const menuClose = doc.querySelector(".close");
const overlay = doc.querySelector(".overlay");
menuOpen.addEventListener("click", () => {
overlay.classList.add("overlay--active");
});
menuClose.addEventListener("click", () => {
overlay.classList.remove("overlay--active");
});Dit is de JS code voor de mobile menu knop. De bedoeling is dat de menu een overlay doet over de scherm zodat het mooi der uit ziet.
Zo ziet het overlay menu der uit
Nog een code die ik wil laten zien is die voor de geïntrigeerde google maps.
<iframe src="https://www.google.com/maps/d/embed?mid=1gqmyNn7os6ZzXyRZrCr-Cp2dyEiJAw8&ehbc=2E312F" width="100%" height="542"></iframe>We hebben alle aanpassingen van de website geïntegreerd naar Github. Met behulp van commits hebben we die gepushed naar de main branch om alle veranderingen door te voeren. Nadat de code klaar was, hebben we de link van de site getest met Github pages en die werkte zoals behoren.
Dit is de live-url: fg-ctc-clientcase.student.fdnd.nl
Tijdens het testen heb ik getest of alle functionaliteiten werken. Ik heb ook al een groepsgenoot gevraagd om dubbel te checken zodat er vanaf buiten ook gecontroleerd is.
