timoosterveer / fix-the-flow-interactive-website Goto Github PK

En position: fixed werkt lekker met bottom en right (een margin met percentages werkt hier niet zo fijn :))

https://github.com/DikkeTimo/fix-the-flow-interactive-website/blob/2022b1389ed2dc95fa9334eb26d70a12b1bf4816/index.html#L118-L120

Probeer hier een volgende keer echt het <details> element te gebruiken, dat is hiervoor bedoeld: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

https://github.com/DikkeTimo/fix-the-flow-interactive-website/blob/2022b1389ed2dc95fa9334eb26d70a12b1bf4816/media.html#L166-L181

De knop verzenden moet wel feedback geven aan de user zelf, dit is essentieel voor users. Je kan gebruik maken van de volgende opties:

• Collapse het formulier terug naar het originele met een melding "Bedankt voor het verzenden van een formulier" ipv button
• pop up bovenop het scherm (bovenaan een bericht)
• Ergens anders op de pagina een bericht (DIRECT ZICHTBAAR VOOR DE USER)

Ik mag er op klikken, maar ik kan er niet heen tabben..

https://github.com/DikkeTimo/fix-the-flow-interactive-website/blob/2022b1389ed2dc95fa9334eb26d70a12b1bf4816/index.html#L129-L135

Via de tab toets kan ik gewoon naar dit formulier. Je verbergt 'm nu alleen “naar boven”, in plaats van met het hidden attribuut/display: none, waardoor 'ie ook echt niet bereikbaar is.

https://github.com/DikkeTimo/fix-the-flow-interactive-website/blob/2022b1389ed2dc95fa9334eb26d70a12b1bf4816/index.html#L1040

Add max width to textarea, otherwise you get it like the screenshot

Add to the textarea the style max-width: 100%;. It listens to its container (fieldset).

change link stylesheet in your index.html

<link rel="stylesheet" href="./styles/style.css" />

https://github.com/DikkeTimo/fix-the-flow-interactive-website/blob/main/index.html#L7

Wat betekent dit?

https://github.com/DikkeTimo/fix-the-flow-interactive-website/blob/2022b1389ed2dc95fa9334eb26d70a12b1bf4816/formulieren.html#L153-L162

LEKKER BEZIG TIM! Ziet er heel goed uit qua design en je bent al heel goed op weg qua js code, heb een paar opmerkingen:

• https://github.com/DikkeTimo/fix-the-flow-interactive-website/blob/575ac02eb7f06f2cafc1b8e7c321780a3a4c146a/scripts/scripts.js#L1 Schrijf variabele namen voluit, accordion dus ipv acc ennn ik zou hem zo schrijven:

// ik gebruik dus const ipv var (weet je wat het verschil is tussen var const en let?) 
// en ik gebruik een querySelector i.p.v. een className selector (die is een pietsie beetje ouderwets)
 const accordion = document.querySelector(".accordion"); 

• https://github.com/DikkeTimo/fix-the-flow-interactive-website/blob/575ac02eb7f06f2cafc1b8e7c321780a3a4c146a/scripts/scripts.js#L18 Heel cool dat je localStorage gebruikt
• https://github.com/DikkeTimo/fix-the-flow-interactive-website/blob/575ac02eb7f06f2cafc1b8e7c321780a3a4c146a/scripts/scripts.js#L40 Hahah myFunction is misschien niet heel handig, je kan deze naam aanpassen naar een naam die omschrijft wat de functie doet. Doet deze functie ook wel wat?

Add an initial width to the .contact. class and a transition to the .toggle class, like below

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  width: 100px;
}

.toggle {
  margin: 0 auto;
  transition: 1s ease-in-out all;
}

https://github.com/DikkeTimo/fix-the-flow-interactive-website/blob/main/styles/style.css#L248-L280