3. Bouwen 🏗

• Reactie component
• Overzichtspagina
• Zoekbalk

Reactie component

28-09-2023 · Stefan

Voor het reactie component is binnen SvelteKit een opzet gemaakt.

<section>
	<article>
		<!-- {#each reactions as reaction} -->
		<figure>
			<svg width="" height="" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
			[...]
			</svg>
		</figure>
		<blockquote>
			<h2>Kees Hoffman</h2>
			<time datetime="2023-09-27">27 september 2023</time>
			<p>Dit is een citaat of een stukje tekst dat je wilt benadrukken.</p>
		</blockquote>
		<!-- {/each} -->
	</article>
</section>

	article {
		width: 20rem;
		background-color: var(--color-secundary);
		display: grid;
		grid-template-columns: 2.5rem 1fr;
		grid-template-rows: 1fr;
		grid-column-gap: var(--unit-small);
		grid-row-gap: 0px;
		padding: var(--unit-small);
		position: relative;
	}

	article h2 {
		font-size: 1rem;
		color: var(--color-primary);
	}

Overzichtspagina

05-10-2023 · David

Voor de overzichtspagina moest ik data van de wensen vanuit de cms Sveltkit tonen in de client side. Dit deed ik doormiddel van een for each loop. De data probeer ik op te maken via a card. De cards maak ik responsive zodat ze naast elkaar kunnen staan. Ook zorg ik voor een interactie dat als je over de card hover je de beschrijving van de wens zie. Dit zorgt ervoor dat mensen gelijk te weten krijgen waar de wens over gaat zodat ze niet verder hoeven te klikken daarvoor.

	<section>
		<!-- Alle wensen uit de Hygraph API  -->
		{#each filteredWishes as wish}
			<article class="card_article">
				<div class="card_image">
					<img
						src={wish.image.url}
						alt="foto van {wish.heading}"
						width={wish.image.width}
						height={wish.image.height}
						class="card_img"
					/>
					<div class="card_image_body">
						<h3>Beschrijving:</h3>
						<p class="card_description">
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
							has been the industry's standard dummy text ever since the 1500s, when an unknown
							printer took a galley of type and scrambled it to make a type specimen book. It has
							survived not only five centuries, but also the leap into electronic t
						</p>
					</div>
				</div>

				<div class="card_data">
					<h2>{wish.heading}</h2>
					<span class="card_date">Geplaats op: {wish.date}</span>
					<div class="card_label">
						<svg xmlns="http://www.w3.org/2000/svg" height="13px" viewBox="0 0 448 512"
							><style>
								svg {
									fill: #c2c2c2;
								}
							</style><path
								d="M0 80V229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7H48C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
							/></svg
						>
						<span>{wish.label}</span>
					</div>
					<h3>Supporters: <span>4</span></h3>
					<a href="/wens/{wish.id}" class="button">Lees meer</a>
				</div>
			</article>
		{/each}
	</section>

Voor de interactie heb ik z-index gebruikt. z-index is een laag waarin de opmaak zich bevind. Als iemand over de card hover zeg ik dat de beschrijving de bovenste laag moet hebben. Om dit fijn voor de oog te maken heb ik een transition gemaakt namelijk ease-in-out.

	.card_article:hover .card_image_body {
		z-index: 10;
		transition: ease-in-out;
	}

Zoekbalk

10-10-2023 · Stefan

Ook heb ik voor de overzichtspagina een werkende zoekbalk gemaakt. Hiervoor heb ik op de overzichtspagina een geneste javascript functie geschreven.

	import Navbar from '$lib/components/navigatiebalk/navigatie.svelte';
	import { onMount } from 'svelte';

	export let data;

	let searchInput = null;
	let filteredWishes = data.wishes;

	// Functie om te zoeken
	function searchWishes() {
		const searchTerm = searchInput.value.toLowerCase();
		filteredWishes = data.wishes.filter((wish) => wish.heading.toLowerCase().includes(searchTerm));
	}

	onMount(() => {
		searchInput.addEventListener('input', searchWishes);
	});

Ook heb ik binnen html een formulier met een inputveld gemaakt waar de gebruiker een wens kan opzoeken.

<form method="get" action="/">
			<label hidden for="search">Zoeken</label>
			<input bind:this={searchInput} id="search-wishes" type="search" name="q" />
			<button>
				<figure>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="icon icon-tabler icon-tabler-search"
						width="24"
						height="24"
						viewBox="0 0 24 24"
						stroke-width="2"
						stroke="currentColor"
						fill="none"
						stroke-linecap="round"
						stroke-linejoin="round"
					>
						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
						<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
						<path d="M21 21l-6 -6" />
					</svg>
					<figcaption>zoeken</figcaption>
				</figure>
			</button>
		</form>

Met css heb ik tot slot een animatie gemaakt voor de articles dat ze weer verschijnen.

	article {
		width: 20rem;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 20rem 1fr;
		padding: var(--unit-default);
		border-radius: var(--unit-small);
		background-color: var(--color-secundary);
		animation: fade-in var(--animation-default) ease-in-out;
	}

	@keyframes fade-in {
		from {
			opacity: 0;
			transform: translateY(var(--unit-default)); /* Optioneel: voeg een lichte verticale verschuiving toe */
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}