outline html omzetten naar componenten / form page

lisavanmansom commented 3 hours ago

outline html omzetten naar componenten / form page

Na het coderen van de outline ga ik het omzetten naar componenten. Vooraf had ik al de componenten geïdentificeerd vanuit een schets.

Mijn page bestaat uit 3 componenten:

Form
Input
Link

lisavanmansom commented 3 hours ago

Componenten code

Question-set component

<script>
  export let id;
  export let name;
  export let value;
  export let labelText;
</script>

<div>
  <input type="radio" id={id} name={name} value={value} />
  <label for={id}>{labelText}</label>
</div>

Question-set component

<script>
  import QuestionOption from './question-option.svelte';

  export let legend;
  export let options;
  export let name;
</script>

<fieldset>
  <legend>{legend}</legend>
  {#each options as option}
    <QuestionOption
      id={option.id}
      name={name}
      value={option.value}
      labelText={option.labelText}
    />
  {/each}
</fieldset>

Question-form component

<script>
  import QuestionSet from './question-set.svelte';

  // content form
  const questions = [
    {
      legend: "Hoe denk je over het verlies?",
      name: "question1",
      options: [
        { id: "f1-i-1", value: "f1-i-1", labelText: "Ik voel intens verdriet of pijn wanneer ik aan het verlies denk." },
        { id: "f1-i-2", value: "f1-i-2", labelText: "Het voelt nog steeds onwerkelijk, alsof het niet echt is gebeurd." },
        { id: "f1-i-3", value: "f1-i-3", labelText: "Ik probeer manieren te vinden om mijn dagelijkse leven aan te passen." },
        { id: "f1-i-4", value: "f1-i-4", labelText: "Ik begin de persoon een plek te geven in mijn herinneringen en probeer door te gaan." }
      ]
    },
    {
      legend: "Hoe vaak ervaar je emotionele pijn gerelateerd aan het verlies?",
      name: "question2",
      options: [
        { id: "f2-i-1", value: "f2-i-1", labelText: "Vrijwel constant voel ik verdriet en rouw." },
        { id: "f2-i-2", value: "f2-i-2", labelText: "Soms voel ik pijn, maar ik probeer verder te gaan." },
        { id: "f2-i-3", value: "f2-i-3", labelText: "Het wordt minder intens en ik vind troost in herinneringen." },
        { id: "f2-i-4", value: "f2-i-4", labelText: "Ik voel geen sterke emoties over het verlies, meer verwarring." }
      ]
    },
    {
      legend: "Hoe kijk je naar een toekomst zonder je dierbare?",
      name: "question3",
      options: [
        { id: "f3-i-1", value: "f3-i-1", labelText: "Ik kan me een toekomst zonder hen niet voorstellen." },
        { id: "f3-i-2", value: "f3-i-2", labelText: "Ik probeer nieuwe routines te ontwikkelen zonder hen." },
        { id: "f3-i-3", value: "f3-i-3", labelText: "Ik begin hoop te zien voor de toekomst en herinner me hen met liefde." },
        { id: "f3-i-4", value: "f3-i-4", labelText: "Ik voel me overweldigd door het verdriet en kan niet aan de toekomst denken." }
      ]
    }
  ];
</script>

<form>
  {#each questions as question}
    <QuestionSet
      legend={question.legend}
      name={question.name}
      options={question.options}
    />
  {/each}
</form>

Result

Op deze manier is het makkelijker om de componenten bij te houden en de structuur te zien.

lisavanmansom commented 2 hours ago

JS test

Ik maak gebruik van JS d.m.v content daarin te zetten en dan in de page in te laden. Voordat ik verder ga met coderen test ik eerst of alles inlaad als de JS uitstaat.

Performance test

Omdat alles wordt ingeladen met JS wordt de performance lager, om bij te houden wat de performance is meet ik voordat de styling wordt toe gevoegd. Momenteel is de performance 73.

fdnd-agency / drop-and-heal