In de workshop zijn we aan de slag gegaan met get en post en hebben we een eenvoudig formulier aangemaakt om te oefenen met het doen van een POST.

<form method="post" action="/berichten">
    <label>Message
        <input type="text" name="messageInput">
    </label>
    <button type="submit">Submit</button>
</form>

<ul>
    {% for message in messages %}
        <li>{{ message }}</li>
    {% endfor %}
</ul>

app.get('/berichten', async function (request, response) {
  response.render('messages.liquid', {messages: messages})
})

app.post('/berichten', async function (request, response) {
  messages.push(request.body.messageInput)
  response.redirect(303, '/berichten') // redirect en stuur daarna terug met GET route
})

Ook hebben we als groep nieuwe ideeën gegenereerd en ideeën samengevoegd:

Op basis van deze ideeën hebben zijn we tot één gezamenlijk idee gekomen, namelijk. Hier hebben we een gezamenlijk schets bij gemaakt en een wireflow met URL design

• Issues aangemaakt en verdeeld
• Code conventies opgeschreven
• Gezamenlijke stylesheet gemaakt

Ik ben vandaag ook aan de slag gegaan met mijn eerste issues:

• header partial
• team cards

Ik ben vandaag verder gegaan met het maken van de team cards. Ik had gister een overzicht van de teams kunnen genereren met hierbij de bijbehorende leden per team. Ik ben verder gegaan met de styling van de cards en heb een start gemaakt met de functionaliteit om de teams te kunnen raten.

• team cards
• rating functionaliteit

Formulier met method="post"

        <form method="post" action="/">
          <h3>Rating</h3>
          <label for="ratingInput{{ team.teamName | replace: ' ', '-' }}" class="input-output"> Beoordeel de squadpage van Team {{ team.teamName }}</label>
          <div class="input-output">
              <input type="hidden" name="teamID" value="Team Flex / Rating for Team {{ team.teamName }}">
              <input type="range" id="ratingInput{{ team.teamName | replace: ' ', '-' }}" name="ratingInput" min="1" max="10" step="1" value="{{ team.rating  }}">
              <output id="amountOutput{{ team.teamName | replace: ' ', '-' }}" for="ratingInput">{{ team.rating  }}</output>
          </div>
          <button type="submit" class="btn-small">Verstuur</button>
        </form>

We hebben vandaag gewerkt aan de wrap up. Hiervoor hebben we een stand-up gehouden om inzicht te krijgen in hoe iedereen ervoor staat, wat er is gedaan, wat er gedaan gaat worden en waar iedereen vastloopt.

Ik liep zelf vast bij de laatste stappen om de opgeslagen ratings aan de teams te koppelen en vervolgens het gemiddelde te berekenen. Hier heeft Dion mee bij geholpen en is deze code geschreven

  const messages = messagesResponseJSON.data;
  teams.forEach(team => { // loop door de teams
    const ratings = messages.filter((a) => a.for === `Team Flex / Rating for Team ${team.teamName}`); // filter alle berichten per team en stop in nieuwe array (ratings)
    let rating = 0;

    if (ratings.length !== 0) { // als er ratings zijn
      rating = 0
      ratings.forEach((r) => {
        rating += parseInt(r.text); // zet om naar int en tel op (want ratings zijn strings)
      })
      rating /= ratings.length; // reken remiddelde uit (totaal ratings delen door aantal)
    };

    team.rating = rating.toFixed(1); // 1 decimaal achter komma
  })

  // sort ratings highest to lowest
  teams = teams.sort((a, b) => b.rating - a.rating); 

Vandaag heb ik een /admin pagina gemaakt waarmee alle ingestuurde ratings uit de database verwijderd worden: https://github.com/julia-stevens/connect-your-tribe-team-squad-page-flex/blob/1c95cc390535614a80ac65e8717d9b859e494a13/server.js#L169-L185

Ook hebben we de README geschreven: https://github.com/julia-stevens/connect-your-tribe-team-squad-page-flex?tab=readme-ov-file#squad-page---team-flex

Daarnaast heb ik nog gewerkt aan het oplossen van verschillende W3C errors en de responsiviteit.

Voor de retrospective hebben we verschillende tekeningen gemaakt. Hiervoor hebben we eerst do's en dont's beschreven:

Vervolgens hebben we de samenwerking gevisualiseerd met de piek en dal tekening:

En gezamenlijk hebben we een tekening gemaakt met het samenwerkingsproces en hoe wij dit ervaren hebben, genaamd: Van brainstorm tot meesterwerk