3: Bouwen🦋

Nadat wij het design hebben gemaakt zijn we begonnen met het aanmaken van branches. Wij hebben verschillende branches aangemaakt en hebben aan de hand van pull requests deze gemerged.

---

API

Zij hebben ons een API aangeboden die wij konden gebruiken om te posten. Hier is deze te zien

app.get("/new-plant", (request, response) => {
  let url = `https://api.buurtcampus-oost.fdnd.nl/api/v1/stekjes?id=${request.query.id}`;
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      response.render("new-plant", data);
    });
}); 

Proces

Wij hadden verschillende taken uitgedeeld. Suus ging bijvoorbeeld over de header: Suus legt hieronder uit hoe ze te werk is gegaan en nog een voorbeeld van de code die ze heeft gebruikt.

TIjdens het bouwen heb ik mij voornamelijk gefocust op de header en het menu. Ik wilde het menu graag zonder javascript maken en puur met css, voor de progressive enhancement. Dit heb ik gedaan door een checkbox te gebruiken om ook te zorgen dat de toegankelijkheid goed is. Ik heb onderschat hoeveel tijd hierin ging en ben er uiteindelijk te lang mee bezig geweest. Wel ben ik blij met het eindresultaat en heb ik er veel van geleerd. Tijdens het bouwen was het ook nog even wennen aan de branches, dat je voor alles het beste een nieuwe branche kan maken zodat de code up to date blijft. Aan het einde van de sprint had ik hem helemaal door en ging dat heel makkelijk.

De html die Suus heeft gebruikt:

  <a href="/"><img src="assets/Logo-plantswap.png" alt="logo plantswapt"></a>
          
<input type="checkbox" id="nav-checkbox" class="nav-checkbox" tabindex="0">

          <label for="nav-checkbox" class="nav-toggle"></label>
          <ul class="nav-menu" role="menubar" aria-haspopup="true">

            <li><a href="/" role="menuitem" aria-label="Home">Home</a></li>
            <li><a href="/what-the-plant" role="menuitem" aria-label="Link what the plant">What the plant</a></li>
            <li><a href="#" role="menuitem" aria-label="Blije smiley">:)</a></li>
            <li><a href="/toevoegen" role="menuitem" aria-label="Toevoegen">Toevoegen</a></li>

          </ul>
        </nav>  

Een klein stukje css die Suus heeft gebruikt:

input[type="checkbox"] {
  position: absolute;
  cursor: pointer;
  margin: 15px 32px;
  width: 22px;
  height: auto;
  right: 0;
  background-color: white;
}
input[type="checkbox"]:checked {
  position: absolute;
  cursor: pointer;
  margin: 17px 32px;
  background-color: white;

}

Anouk heeft bijvoorbeeld gewerkt aan de header en het form voor de site. Hieronder is uitgelegd hoe dit is verlopen.

Ik ben begonnen een design te maken in figma. We hadden al een basis en een styleguide. Na het maken van het design hebben we overlegd en ben ik begonnen met het bouwen hiervan. Doordat ik hiervoor al hiermee heb gewerkt was het best makkelijk om dit te maken. Op dit moment ben ik bezig met het zorgen dat het formulier werkt met posten. Hiervoor moet ik wel eerst nog een andere pagina maken waarop ik het uberhaupt kan gaan posten. Hieronder is wat van de code die ik heb gebruikt voor het formulier.

<section class="form">
    <div class="formulier">

        <form>
            <input type="text" placeholder="E-mailadres" required>
            <input type="text" placeholder="Naam stekje" required>
            <input type="date" placeholder="Aanmelddatum" required>
            <input type="text" placeholder="Giftig?" required>
            <input type="text" placeholder="Land van herkomst" required>
            <input type="text" placeholder="Welke voeding" required>
            <input type="text" placeholder="Hoevaak verpotten" required>
            <input type="file" placeholder="Afbeelding" required>
        </form>
<button class=toevoegen-button> Voeg toe! </button>

</div>

</section>

Hiernaast is ook nog een deel van de css:

form {
  justify-content: center;
}

input {
  border-color: #75916e;
  border-radius: 5px;
  width: 320px;
  height: 52px;
  font-size: medium;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  margin-left: 35px;
  margin-right: 35px;
}

button.toevoegen-button {
  margin-left: 35px;
}

Wij gaan nu verder met het bouwen van de rest van de website.