4. intregreren 📜 - Daan645/fix-the-flow-ui-events GitHub Wiki

.1 Color change button

Comitten en pushen

Ik heb mijn functie gecommit met de naam Color change function zodat het duidelijk is wat ik gecommit heb. Daarnaast heb ik het volgende beshcreven in de commit message: Made a function that changes te color of the frontend link.

Aanpak van functie

Voor deze functie ben ik door de dlc gelopen. Ik heb eerst gekeken hoe ik het wou bouwen (analyseren). Daarna heb ik doormiddel van een breakdown schets verzameld wat ik nodig had. Vervolgens ben ik gaan bouwen. Ik heb doormiddel van de eventlistener click de css aankunnen passen van mijn a element. Vervolgens ben ik zoals bovenstaat gaan integreren.

Reflectie / bronnen

Deze functie ging erg soepel ik heb deze functie uit mijn hoofd gebouwd en heb overal comments bij gezet zodat ik alles voor mezelf extra uitgelegd heb om er zo nog meer van te leren.

.2 Optel functie

Comitten en pushen

Ik heb mijn functie gecommit met de naam Plus One zodat het duidelijk is wat ik gecommit heb. Daarnaast heb ik het volgende beshcreven in de commit message: Made the Plus One function. This function displays a digit that will add up with +1 everytime the a element is clicked on.

Aanpak van functie

Reflectie / bronnen

Deze functie ging erg soepel ik heb deze functie uit mijn hoofd gebouwd en heb overal comments bij gezet zodat ik alles voor mezelf extra uitgelegd heb om er zo nog meer van te leren.

.3 Doubleclick check functie

Comitten en pushen

Ik heb mijn functie gecommit met de naam doubleclick check zodat het duidelijk is wat ik gecommit heb. Daarnaast heb ik het volgende beshcreven in de commit message: made a function that displays u have to double click with red background when single clicked on. And goedzo! with a gren background when doubleclicked on.

Aanpak van functie

Reflectie / bronnen

Deze functie ging erg soepel ik heb deze functie uit mijn hoofd gebouwd en heb overal comments bij gezet zodat ik alles voor mezelf extra uitgelegd heb om er zo nog meer van te leren. Het enige wat ik heb bekeken is hoe doubleclick werkt via de aangeboden site

.4 Mousehover grow functie

Comitten en pushen

Ik heb mijn functie gecommit met de naam mousehover grow function zodat het duidelijk is wat ik gecommit heb. Daarnaast heb ik het volgende beshcreven in de commit message: met deze functie heb ik ervoor gezorgd dat de mouseover knop groeit door middel van een keyframes animatie.

Aanpak van functie

Voor deze functie ben ik door de dlc gelopen. Ik heb eerst gekeken hoe ik het wou bouwen (analyseren). Daarna heb ik doormiddel van een breakdown schets verzameld wat ik nodig had. Vervolgens ben ik gaan bouwen. Vervolgens ben ik zoals bovenstaat gaan integreren. Ook heb ik over de mouseover functie gelezen. Voor de rest ben ik ook gaan kijken naar de code die al in de opdracht stond hoe de keyframes werden aangeroepen.

Reflectie / bronnen

Deze functie ging iets stroefer kreeg hem eerst niet aan de praat maar na wat googelen is het mij gelukt. Ik heb gekeken op de aangeboden site aangeboden site

.5 Down functie

Comitten en pushen

Ik heb mijn functie gecommit met de naam down functie zodat het duidelijk is wat ik gecommit heb. Daarnaast heb ik het volgende beschreven in de commit message: ik heb een functie gemaakt waarbij de knop met het id down naar beneden gaat wanneer er op pijltje omlaag is gedrukt.

Aanpak van functie

Voor deze functie ben ik door de dlc gelopen. Ik heb eerst gekeken hoe ik het wou bouwen (analyseren). Daarna heb ik doormiddel van een breakdown schets verzameld wat ik nodig had. Vervolgens ben ik gaan bouwen en zoals bovenstaat gaan integreren. Ook heb ik over de key functie gelezen. Ik heb daar veel van geleerd. Ik ben daarna met de code gaan experimenteren. Nadat ik de code nog die op de website kirupa stond niet helemaal begreep ben ik aan chat gtp gaan vragen of hij het stukje voor stukje simpel kon uitleggen zodat ik begreep hoe ik ermee moest omgaan en zo mijn eigen code kon bouwen.

Reflectie / bronnen

Deze functie ging best goed moest mij hier eerst alleen wel wat meer in verdiepen ook vooral met de keycodes. Ik heb gekeken op de aangeboden site kirupa en heb de code extra laten uitleggen door chat gtp.

.6 Zizag functie

Comitten en pushen

Ik heb mijn functie gecommit met de naam zigzag functie zodat het duidelijk is wat ik gecommit heb. Daarnaast heb ik het volgende beschreven in de commit message: Ik heb een fucntie gemaakt die het a element met het id zigzag over het beeld laat zigzaggen doormiddel van de animatie zigzag.

Aanpak van functie

Voor deze functie ben ik door de dlc gelopen. Ik heb eerst gekeken hoe ik het wou bouwen (analyseren). Daarna heb ik doormiddel van een breakdown schets verzameld wat ik nodig had. Vervolgens ben ik gaan bouwen. Vervolgens ben ik zoals bovenstaat gaan integreren. Ik heb bij deze gexperimenteerd met de translate x en y. Reflectie / bronnen

Deze functie ging erg goed ik snap nu meer over animaties en hoe je deze toggeld

.7 Disappear functie

Comitten en pushen

Ik heb mijn functie gecommit met de naam disappear functie zodat het duidelijk is wat ik gecommit heb. Daarnaast heb ik het volgende beschreven in de commit message: Ik heb een fucntie gemaakt die het a element met het id disappear laat verdwijnen door middel van opacity.

Aanpak van functie

Voor deze functie ben ik door de dlc gelopen. Ik heb eerst gekeken hoe ik het wou bouwen (analyseren). Daarna heb ik doormiddel van een breakdown schets verzameld wat ik nodig had. Vervolgens ben ik gaan bouwen. Vervolgens ben ik zoals bovenstaat gaan integreren. Ik heb bij deze gexperimenteerd met de opacity. Reflectie / bronnen

Deze functie ging erg goed ik snap nu meer over animaties en hoe je deze toggeld

.8 Shake functie

Comitten en pushen

Ik heb mijn functie gecommit met de naam shake functie zodat het duidelijk is wat ik gecommit heb. Daarnaast heb ik het volgende beschreven in de commit message: _ Ik heb een knop gemaakt die gaat shaken op het moment dat je erop klikt doormiddel van een keyframe animatie en js eventlistener.._

Aanpak van functie

Voor deze functie ben ik door de dlc gelopen. Ik heb eerst gekeken hoe ik het wou bouwen (analyseren). Daarna heb ik doormiddel van een breakdown schets verzameld wat ik nodig had. Vervolgens ben ik gaan bouwen. Vervolgens ben ik zoals bovenstaat gaan integreren. Ik heb bij deze gexperimenteerd met de translate x met + en - waardes. Reflectie / bronnen

Deze functie ging erg goed ik snap nu meer over animaties en hoe je deze toggeld

.9 Spin functie

Comitten en pushen

Ik heb mijn functie gecommit met de naam spin functie zodat het duidelijk is wat ik gecommit heb. Daarnaast heb ik het volgende beschreven in de commit message: _ Ik heb een spin functie gemaakt waarbij de knop met id spin rond gaat draaien als je eroverheen hovert. Dit gebeurd doormiddel van keyframes en js eventlistener._

Aanpak van functie

Voor deze functie ben ik door de dlc gelopen. Ik heb eerst gekeken hoe ik het wou bouwen (analyseren). Daarna heb ik doormiddel van een breakdown schets verzameld wat ik nodig had. Vervolgens ben ik gaan bouwen. Vervolgens ben ik zoals bovenstaat gaan integreren. Ik heb bij deze gexperimenteerd met de rotate en de degree waardes.

Vraag Ik vroeg mij bij deze functie wel af waarom hij soms niet getriggerd wordt als je eroverheen hovert

Reflectie / bronnen

Deze functie ging erg goed ik snap nu meer over animaties en hoe je deze toggeld

.10 Rainbow functie

Comitten en pushen

Ik heb mijn functie gecommit met de naam rainbow functie zodat het duidelijk is wat ik gecommit heb. Daarnaast heb ik het volgende beschreven in de commit message: _ Ik heb een functie gemaakt waarbij het a element met id rainbow van kleur veranderd, doormiddel van een css animatie en een js eventlistener op click._

Aanpak van functie

Voor deze functie ben ik door de dlc gelopen. Ik heb eerst gekeken hoe ik het wou bouwen (analyseren). Daarna heb ik doormiddel van een breakdown schets verzameld wat ik nodig had. Vervolgens ben ik gaan bouwen. Vervolgens ben ik zoals bovenstaat gaan integreren. Ik heb bij deze gexperimenteerd met de andere css klasses in een animatie, ik vroeg mij namelijk af of zoiets als background color ook zou kunnen werken en dat deed het!

Vraag Ik vroeg mij bij deze functie wel af waarom hij soms niet getriggerd wordt als je er op klikt maar het dan 2 keer moet doen.

Reflectie / bronnen

Deze functie ging erg goed ik snap nu meer over animaties en hoe je deze toggeld