Furkan's Wiki - Lawlzilla7/ProjectTech-Team2 GitHub Wiki

Furkan

Ontwerpen en uitwerking begin scherm 1-3 2024

Ik heb gewerkt aan de zerostate pagina. Eerste heb ik het aan het ontwerp van de pagina in Figma, Het logo moet centraal staan vandaar dat het zo groot in het midden staat met de titel erachter met wat overlap voor diepte.

image

Daarna heb ik dit uitgewerkt en het gecodeerd het enige wat er nog niet inzit op dit moment zijn de animaties want we zijn er op dit moment nog niet helemaal uit of we het willen animeren in code of een video willen gebruiken.

Hoofdscherm

Er zitten een paar verschillen in zoals de knop is net iets kleiner en de tekst is groter omdat het beter past op een mobiel scherm. De knoppen bovenaan zijn op dit moment nog place holders en daar komen iconen voor op de plek.

Code van knop

Voor de code hiervan check commit 1bcac57

8-3-2024 Week 4

Vandaag begonnen met swiperJS proberen toe te passen aan op onze website voor het samenstellen van de auto waarmee je gebaseerd op die resultaten van het samenstellen suggesties voor autos.

als allereerste heb ik de basis opmaak gemaakt met simpel css en html

image

Daarna heb ik geprobeerd om swiper hierin te implementeren maar dat gaat niet zo soepel omdat het lastiger is meerdere swiper objecten onder elkaar te zetten en het wordt snel verwarrend daardoor.

Week 5 15-03-2024

Heb deze week de swiper objecten kunnen implementeren dat was best lastig omdat wij meerdere sliders onder elkaar hebben ipv 1 per pagina, De styling hiervan was ook een probleem omdat er heel veel dingen zijn die van elkaar afhangen.

Uiteindelijk is het mij wel gelukt met de deze code:

      <figure class="CarWithButtons">
        <div class="swiper-container swiper-no-swiping" id="swiper1">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="./images/green.png" alt="A picture of a green Audi TT">
            </div>
            <div class="swiper-slide">
              <img src="./images/red.png" alt="A picture of a red Audi TT">
            </div>
            <div class="swiper-slide">
              <img src="./images/blue.png" alt="A picture of a blue Audi TT">
            </div>
          </div>
          <div class="swiper-button-prev" onclick="BodyKnopPrev()"></div>
          <div class="swiper-button-next" onclick="BodyKnopNext()"></div>
        </div>
      </figure>

Ik ben ook begonnen met het laten werken van de waardes doorsturen zodat wij het kunnen sorteren gebaseerd op je keuzes.

const BodyKnopPrev = () => {
    BodyWaarde -= 1;
    ChangeBody(BodyWaarde);

    console.log("body waarde = " + BodyWaarde);
}

const BodyKnopNext = () => {
    BodyWaarde += 1;
    ChangeBody(BodyWaarde);

    console.log("body waarde = " + BodyWaarde);
}

Daar heb ik deze functies bij geschreven die een waarde optellen wanneer je op een swiper knop drukt.

const ChangeBody = (BodyWaarde) => {
    let image = document.querySelector('#CarBody');

    if (BodyWaarde === 1) {
        image.src = '/images/green.png';
    } else if (BodyWaarde === 2) {
        image.src = '/images/red.png';
    } else if (BodyWaarde === 3) {
        image.src = '/images/blue.png';
    }

}

Met deze functie wordt de afbeelding veranderd aan de bovenkant

Die waarde wordt later doorgestuurd met deze functie nadat je op de opslaan knop drukt:

const SendBuildData = () => {
    console.log("body waarde = " + BodyWaarde + " Velgen waarde = " +
        VelgenWaarde + " Kleur waarde = " + KleurWaarde);
    
        return KleurWaarde + VelgenWaarde + BodyWaarde;
}

image

Dit is hoe de pagina er nu uit ziet enige wat er nog bij moet komen zijn de definitieve afbeeldingen voor de verschillende onderdelen en kleuren

Week 6 22-3

Polish

Vandaag verder gegaan met polishen van de auto bouw pagina heb animaties toegevoegd zoals wanneer je van onderdeel of kleur wisselt en ook dat de afbeelding aan de bovenkant verandert het enige wat nu nog moet zijn de juiste afbeeldingen ipv gekleurde vakken.

animaties

Taakverdeling in projects

We zijn ook begonnen met de taakverdeling in GitHub projects image

Mergen

Deze week hebben wij ook het begin gemaakt met het mergen van de individuele branches in de testing, Ik heb daarbij de merge conflicten opgelost omdat er uiteindelijk best wat conflicten waren omdat wij de front enders nog geen back end bestanden hadden in ons project en er moesten daarom best wat dingen verschuiven. image

1-04-24

deze week ben ik verdergegaan met het samenvoegen van de secties en het verder afmaken van de bouw pagina zoals polish en zorgen dat deze pagina’s ook responsive zijn.

Ik heb zoveel mogelijk clamps proberen te gebruiken in Css zodat het soepel schaalt en ook om het gebruik van mediaquery’s ook te verminderen van dat kan snel uit de hand lopen.

responsive

Deze week ben ik ook begonnen met het maken van de iconen van de autos en velgen voor het gebruik in de bouw pagina en boven aan de resultaten pagina.

Resultaten pagina

Voor de resultaten moest ik ervoor zorgen de resultaten van de bouw pagina werden over gegeven naar de resultaten pagina zodat je kan boven aan kan zien wat je hebt gemaakt.

Dat heb ik kunnen doen door het gebruik van de session storage met deze code

const SendBuildData = () => {
    console.log("body waarde = " + BodyWaarde + " Velgen waarde = " +
        VelgenWaarde + " Kleur waarde = " + KleurWaarde);

    sessionStorage.setItem('Body', BodyWaarde);
    sessionStorage.setItem('Velgen', VelgenWaarde);
    sessionStorage.setItem('Kleur', KleurWaarde);
}
const ToResults = () => {
    location.href = 'results.html'
}

const OnLoadResults = () => {
    let image = document.querySelector('#CarBody');
    let image2 = document.querySelector('#CarVelgen');
    let image3 = document.querySelector('#CarKleur');

    console.log(image);

    if (sessionStorage.getItem("Body") == 1) {
        image.src = '/images/hatchback-02.png';
    } else if (sessionStorage.getItem("Body") == 2) {
        image.src = '/images/suv.png';
    } else if (sessionStorage.getItem("Body") == 3) {
        image.src = '/images/sportcar-02.png';
    }

    if (sessionStorage.getItem("Velgen") == 1) {
        image2.src = '/images/blue.png';
    } else if (sessionStorage.getItem("Velgen") == 2) {
        image2.src = '/images/red.png';
    } else if (sessionStorage.getItem("Velgen") == 3) {
        image2.src = '/images/green.png';
    }

    if (sessionStorage.getItem("Kleur") == 1) {
        image.style.filter = 'invert(34%) sepia(49%) saturate(7485%) hue-rotate(345deg) brightness(115%) contrast(102%)';
    } else if (sessionStorage.getItem("Kleur") == 2) {
        image.style.filter = 'invert(72%) sepia(74%) saturate(991%) hue-rotate(64deg) brightness(103%) contrast(101%)';
    } else if (sessionStorage.getItem("Kleur") == 3) {
        image.style.filter = 'invert(51%) sepia(69%) saturate(6308%) hue-rotate(209deg) brightness(106%) contrast(101%)';
    }
}

Met deze code worden de waarde opgeslagen naar de session storage in de vorm van integers dat zou moeten worden veranderd naar woorden zodat de back enders dat kunnen gebruiken voor query’s.

bouwen (de iconen zijn nog niet definitief)

4-4-2024

Ben verder gegaan met het werkend krijgen van het sorteren dat ging moeilijker dan verwacht omdat de list js library eerst niet wou gaan werken dat heb ik opgelost door de list code uit te voeren na dat de data wordt ingeladen.

 // Initialize List.js for sorting and searching
 var options = {
		valueNames: ['merk', 'kilometers', 'Brandstof', 'Bouwjaar']
 };
 var carList = new List('theList', options);

Nu kreeg ik geen errors meer maar het werkte niet helemaal daarvoor moest ik wat bijschrijven om de knoppen ook werkend te krijgen. Nu kan je o

// Initialize sorting based on button clicks
var buttons = document.querySelectorAll('.sort');
		buttons.forEach(function (button) {
	  button.addEventListener('click', function () {
			  var sortBy = button.getAttribute('data-sort');
        var currentSortOrder = button.getAttribute('data-default-order') || 'asc';

        carList.sort(sortBy, { order: currentSortOrder });
        button.setAttribute('data-default-order', currentSortOrder === 'asc' ? 'desc' : 'asc');
	      });
});

// Initialize search functionality
var searchField = document.querySelector('.search');
searchField.addEventListener('input', function () {
	var searchString = this.value.toLowerCase();
	carList.search(searchString);
});

deze code zorgt ervoor dat je kan intypen kan in de zoekbalk en dat hij ook sorteert gebaseerd daarop en ook dat de knoppen sorteren wanneer je erop drukt en de richting kan omdraaien wanneer je er weer op drukt.

De bouwpagina was kapot gegaan nadat we het samen hebben gevoegd en dat heb ik opgelost de bouw.ejs pagina geüpdatet met nieuwere afbeeldingen en daarna ben ik verder gegaan met de functionaliteit. Ik kwam er achter dat de script was aangepast door iemand anders en de build functie die nodig om het werkend te krijgen niet meer werd geroepen.

Nadat ik dat had opgelost werkte het versturen van de data tussen pagina’s niet meer. Om dat op te lossen moest ik de functie die de data verstuurde aanpassen dit keer met een try catch voor als het mis gaat.

function navigateToResults() {
    try {
        sessionStorage.setItem('Body', BodyWaarde);
        sessionStorage.setItem('Velgen', VelgenWaarde);
        sessionStorage.setItem('Kleur', KleurWaarde);
        console.log("Data stored successfully in session storage.");
    } catch (error) {
        console.error("Error storing data in session storage:", error);
    }

    // Navigeer naar de 'resultaten' pagina
    window.location.href = '/results';
}

Hierna werkte nog steeds niet helemaal omdat de functie niet correct werd opgeroepen ik moest daarom kijken waarom dat het geval was. Oorspronkelijk werd deze functie opgeroepen met een window.onload maar omdat dat al een keer gebeurde om de auto data op te halen kwam hij niet meer langs de OnLoadResults functie. Dat heb ik opgelost door een simpele functie aan te maken waar ik meerdere functies aan kan roepen zodat ik beide functies kan uitvoeren.

const LoadResults = () =>{
    OnLoadResults();
    showResults();
}

sortingandbuilding

Als 1 van de laatste dingen die nog moesten gebeuren was gepersonaliseerde resultaten met query’s best wel belangrijk maar voordat daar aan kon beginnen moest ik uitzoeken waarom het filteren en zoeken niet meer werkte na een merge.

Het bleek uiteindelijk te liggen aan hoe de functies werden geladen en ook dat de link naar de script was verandert.

Voor het personaliseren van de resultaten kreeg binnen hoe de resultaten moesten worden toegepast worden en welke termen worden geaccepteerd door de api.

Voordat ik dat kon doen moest ik de waardes van de auto onderdelen omzetten naar een string.

Daarvoor heb ik 3 strings aangemaakt en de functies die de data doorsturen moeten aanpassen

let BodyString;
let VelgenString;
let KleurString;

const ChangeBody = (BodyWaarde) => {
    let image = document.querySelector('#CarBody');

    if (BodyWaarde === 1) {
        image.src = '/images/hatchback-02.png';
        BodyString = 'hatchback';
    } else if (BodyWaarde === 2) {
        image.src = '/images/suv.png';
        BodyString = 'suv';
    } else if (BodyWaarde === 3) {
        image.src = '/images/sportcar-02.png';
        BodyString = 'coupe';
    }

}
const ChangeVelg = (VelgenWaarde) => {
    let image = document.querySelector('#CarVelgen');

    if (VelgenWaarde === 1) {
        image.src = '/images/blue.png';
        VelgenString = 'sport';
    } else if (VelgenWaarde === 2) {
        image.src = '/images/red.png';
        VelgenString = 'klassiek';
    } else if (VelgenWaarde === 3) {
        image.src = '/images/green.png';
        VelgenString = 'comfort';
    }
}

const ChangeKleur = (KleurWaarde) => {
    let image = document.querySelector('#CarBody');

    if (KleurWaarde === 1) {
        KleurString = 'rood';
        image.style.filter = 'invert(34%) sepia(49%) saturate(7485%) hue-rotate(345deg) brightness(115%) contrast(102%)';
    } else if (KleurWaarde === 2) {
        KleurString = 'groen';
        image.style.filter = 'invert(72%) sepia(74%) saturate(991%) hue-rotate(64deg) brightness(103%) contrast(101%)';
    } else if (KleurWaarde === 3) {
        KleurString = 'blauw';
        image.style.filter = 'invert(51%) sepia(69%) saturate(6308%) hue-rotate(209deg) brightness(106%) contrast(101%)';
    }
}

// Navigeer naar de 'results' pagina via 'opslaan knop' op build pagina
function navigateToResults() {
    var BodyWaarde = encodeURIComponent(BodyString);
    var VelgenWaarde = encodeURIComponent(VelgenString);
    var KleurWaarde = encodeURIComponent(KleurString);

    try {
        sessionStorage.setItem('Body', BodyString);
        sessionStorage.setItem('Velgen', VelgenString);
        sessionStorage.setItem('Kleur', KleurString);
        console.log("Data stored successfully in session storage.");
    } catch (error) {
        console.error("Error storing data in session storage:", error);
    }

    var url = `/results/?carrosserie=${BodyWaarde}&velgen=${VelgenWaarde}&kleur=${KleurWaarde}`;

    window.location.href = url;
}

gepersonaliseerde resultaten

Als 1 van de laatste dingen die nog moesten gebeuren was gepersonaliseerde resultaten met query’s best wel belangrijk maar voordat daar aan kon beginnen moest ik uitzoeken waarom het filteren en zoeken niet meer werkte na een merge.

Het bleek uiteindelijk te liggen aan hoe de functies werden geladen en ook dat de link naar de script was verandert.

Voor het personaliseren van de resultaten kreeg binnen hoe de resultaten moesten worden toegepast worden en welke termen worden geaccepteerd door de api.

Voordat ik dat kon doen moest ik de waardes van de auto onderdelen omzetten naar een string.

Daarvoor heb ik 3 strings aangemaakt en de functies die de data doorsturen moeten aanpassen

let BodyString;
let VelgenString;
let KleurString;

const ChangeBody = (BodyWaarde) => {
    let image = document.querySelector('#CarBody');

    if (BodyWaarde === 1) {
        image.src = '/images/hatchback-02.png';
        BodyString = 'hatchback';
    } else if (BodyWaarde === 2) {
        image.src = '/images/suv.png';
        BodyString = 'suv';
    } else if (BodyWaarde === 3) {
        image.src = '/images/sportcar-02.png';
        BodyString = 'coupe';
    }

}
const ChangeVelg = (VelgenWaarde) => {
    let image = document.querySelector('#CarVelgen');

    if (VelgenWaarde === 1) {
        image.src = '/images/blue.png';
        VelgenString = 'sport';
    } else if (VelgenWaarde === 2) {
        image.src = '/images/red.png';
        VelgenString = 'klassiek';
    } else if (VelgenWaarde === 3) {
        image.src = '/images/green.png';
        VelgenString = 'comfort';
    }
}

const ChangeKleur = (KleurWaarde) => {
    let image = document.querySelector('#CarBody');

    if (KleurWaarde === 1) {
        KleurString = 'rood';
        image.style.filter = 'invert(34%) sepia(49%) saturate(7485%) hue-rotate(345deg) brightness(115%) contrast(102%)';
    } else if (KleurWaarde === 2) {
        KleurString = 'groen';
        image.style.filter = 'invert(72%) sepia(74%) saturate(991%) hue-rotate(64deg) brightness(103%) contrast(101%)';
    } else if (KleurWaarde === 3) {
        KleurString = 'blauw';
        image.style.filter = 'invert(51%) sepia(69%) saturate(6308%) hue-rotate(209deg) brightness(106%) contrast(101%)';
    }
}

// Navigeer naar de 'results' pagina via 'opslaan knop' op build pagina
function navigateToResults() {
    var BodyWaarde = encodeURIComponent(BodyString);
    var VelgenWaarde = encodeURIComponent(VelgenString);
    var KleurWaarde = encodeURIComponent(KleurString);

    try {
        sessionStorage.setItem('Body', BodyString);
        sessionStorage.setItem('Velgen', VelgenString);
        sessionStorage.setItem('Kleur', KleurString);
        console.log("Data stored successfully in session storage.");
    } catch (error) {
        console.error("Error storing data in session storage:", error);
    }

    var url = `/results/?carrosserie=${BodyWaarde}&velgen=${VelgenWaarde}&kleur=${KleurWaarde}`;

    window.location.href = url;
}

Wat er is verandert is dat strings een waarde krijgen in de change functies en de strings worden door gestuurd en ook opgeslagen in sessionstorage i.p.v. de getallen. Ik heb ook de functie aangepast voor als er iets misgaat want het kan gebeuren dat het niet kan worden opgeslagen. Aan het einde wordt de url van de gezet naar de results pagina met de juiste strings in de url zodat je andere resultaten krijgt wanneer je andere onderdelen kiest.

einde

Laatste lootjes

Aan het einde heb ik de laatste iconen afgemaakt zoals de laatste velgen en heb ik mijn code een beetje opgeruimd zodat het beter te lezen is

red-icon green-icon blue-icon

Bronnenlijst

⚠️ **GitHub.com Fallback** ⚠️