-
Notifications
You must be signed in to change notification settings - Fork 0
🔨 Bouwen
In de bouwfase ben ik begonnen door even terug te kijken naar de vorige sprint. Hierin kregen we een introductie aan node, express en ejs door je visitekaartje en squadpage met Node te gaan maken en alles uit de whois api halen van de fdnd opleiding.
Ik wilde nog niet eerst mijn ontwerp maken, maar eerst alle content erin zetten en de connectie maken met de api van Vini Mini. Dit heb ik gedaan door de onderstaande code in de index.js te zetten.
Wat hier eigenlijk gebeurt, is dat ik link naar de api maak van Vini Mini, zodat ik deze data kan gaan gebruiken en kan laten zien op de verschillende websites die ik ga bouwen.
// Link naar de api van vini mini
const url = "https://api.vinimini.fdnd.nl/api/v1";
const data = await fetch(url)
.then((response) => response.json())
.catch((error) => error);In de onderstaande code heb ik meerdere routes aangemaakt voor de verschillende databases die de api aanbiedt. Hier wordt de data naar de index.ejs gestuurd en kan in in de index.ejs de data ophalen.
// Maak een route naar de index.ejs voor categorieën
app.get("/", (request, response) => {
let categoriesUrl = url + "/categories";
fetchJson(categoriesUrl).then((data) => {
response.render("index", data);
});
});
// Maak een route naar de ei.ejs
app.get("/ei", async (request, response) => {
let productenUrl = url + "/producten";
await fetchJson(productenUrl).then((data) => {
response.render("ei", data);
});
});
// Maak een route naar de pinda.ejs
app.get("/pinda", async (request, response) => {
let productenUrl = url + "/producten";
await fetchJson(productenUrl).then((data) => {
response.render("pinda", data);
});
});In de head heb ik de navigatie geplaatst zodat ik de navigatie, maar op 1 pagina hoef aan te passen.
<header>
<a class="logo" href="/"><img class="image-vini-mini" src="/logo.png" alt="Logo Vini Mini"></a>
<nav>
<ul class="nav-links">
<li><a href="#">Voor Vini Mini</a></li>
<li><a href="#">Vini Mini producten</a></li>
<li><a href="#">Over ons</a></li>
<li><a href="#">Nieuws</a></li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p class="menu cta">Menu</p>
</header>Hieronder is de code van de index.ejs. Hier laad ik de data in van de api. Ik laad de categorie database in door middel van de forEach loop waardoor de de data automatisch wordt ingeladen, maakt niet uit hoeveel data erin zit. Hierdoor hoefde ik, maar 1 kaartje te coderen, en niet meerdere. Door dit in de pagina te zetten, kan ik de data zoals titel en foto's inladen.
<%- include('./partials/head') %>
<main class="main-content">
<% categories.forEach(category => { %>
<section class="container">
<article class="row">
<div class="image">
<div class="details">
<h2><span><%= category.titel %></span></h2>
<img class="logo-allergy" src="/<%=category.titel%>.png" />
<div class="category">
<a href="/<%= category.titel %>" class="product-info">Bekijk <span>product</span></a>
<div class="icon-links">
<a href="#"><i class="fa-sharp fa-solid fa-share-from-square"></i></a>
</div>
</div>
</div>
</div>
</article>
</section>
<% }); %>
</main>
<%- include('./partials/foot') %>Heel veel code, I know. Maar het komt ook omdat er erg veel gebeurd op deze pagina wat best belangrijk is. De forEach loop gaat door de producten database heen en laat alle data zien waardoor niks herhaald wordt. Binnen de categorie Pinda zijn er een aantal producten wat je kan laten zien. Dit zijn mijn eerste pinda in 3 en 6 stappen, een opvolgkit en pinda presentje. De if statement die je ziet, zorgt ervoor dat wanneer er een product is met de titel: Mijn eerste pinda in 6 stappen, dat er alleen de titel, foto, product informatie en prijs wordt laten zien van dat betreffende product. Dit is ook zo met de andere producten Mijn eerste pinda in 3 stappen, Pinda opvolgkit en Pinda presentje.
<main class="main-content">
<% producten.forEach(product => { %> <% if(product.categorie.titel === "Pinda") { %>
<section class="container">
<article class="row">
<div class="image">
<div class="details">
<h2><span><%= product.titel %></span></h2>
<% if(product.titel === "Mijn eerste pinda in 6 stappen") { %>
<img class="logo-allergy" src="/Pinda-6-stappen.png" alt="Mijn eerste pinda in 6 stappen" />
<div class="category">
<a href="/<%= product.titel %>" class="product-info">Prijs €<span><%= product.prijs %></span></a>
<div class="icon-links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#"><i class="fa-sharp fa-solid fa-share-from-square"></i></a>
</div>
</div>
<% } else if(product.titel === "Mijn eerste pinda in 3 stappen") { %>
<img class="logo-allergy" src="/Pinda-3-stappen.png" alt="Mijn eerste pinda in 3 stappen" />
<div class="category">
<a href="/<%= product.titel %>" class="product-info">Prijs €<span><%= product.prijs %></span></a>
<div class="icon-links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#"><i class="fa-sharp fa-solid fa-share-from-square"></i></a>
</div>
</div>
<% } else if(product.titel === "Pinda Opvolgkit") { %>
<img class="logo-allergy" src="/Pinda-opvolgkit.png" alt="Pinda opvolgkit" />
<div class="category">
<a href="/<%= product.titel %>" class="product-info">Prijs €<span><%= product.prijs %></span></a>
<div class="icon-links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#"><i class="fa-sharp fa-solid fa-share-from-square"></i></a>
</div>
</div>
<% } else if(product.titel === "Pinda presentje") { %>
<img class="logo-allergy" src="<%= product.plaatjes[0].url %>" alt="Pinda presentje" />
<div class="category">
<a href="/<%= product.titel %>" class="product-info">Prijs €<span><%= product.prijs %></span></a>
<div class="icon-links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#"><i class="fa-sharp fa-solid fa-share-from-square"></i></a>
</div>
</div>
<% } %>
</div>
</div>
</article>
</section>
</main>
<% } %> <% }); %>