Background default img

Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md

FDND overzichtspagina

Inhoudsopgave

Beschrijving
Kenmerken
Installatie
Gebruik
Bronnen
Licentie

Beschrijving

In dit project is er een squad page gemaakt met de NodeJS, Express en de WhoIsApi van FDND.

Kenmerken

Dit project is opgezet met NodeJS,

Node

Node is een JavaScript runtime omgeving waarmee JavaScript buiten de browser kan worden uitgevoerd. Met Node js kun je gebruik maken van server side scripting en command-line tools.

Express

Express Js is een Node js web-framework. Express het routen en het verwerken van API requests en responses.

EJS

EJS is een templating language voor het genereren van HTML met JavaScript. Het zorgt ervoor dat ik HTML files kan renderen met JavaScript data. Ook kan ik gebruik maken van partials om ervoor te zorgen dat ik geen herhalende code gebruik.

⚡ Installatie

# Cloning the repository
git clone https://github.com/Siem-P/Squad-page-Siem.git

# Moving to the folder
cd Squad-page-Siem

# Installing Node-modules
npm install

# Starting the server / Running development script
npm start / npm run devStart

Bronnen

https://expressjs.com/en/guide/routing.html

Licentie

This work is licensed under GNU GPLv3.

	<article class="card">
	<div class="image-container">
	<div class="colour-circle"></div>
	<%
	const avatarSrc = member?.avatar // If there is a value for avatar, use it. Otherwise stay empty.
	if (avatarSrc && avatarSrc !== 'null') {
	%>
	<img class="card-image" src="<%- member.avatar %>" alt="Avatar van <%= member.name %>">
	<% } else { %>
	<img class="card-image" src="/assets/sussybaka.png" alt="Een verdacht poppetje in een schacht">
	<% } %>
	</div>

	<div class="info-area">
	<h3><%= member.name + " " + (member.prefix ?? '') + " " + member.surname %></h3>
	<div class="tags">
	<a class="tag" href="<%= member.website %>" target="_blank">Website</a>
	<% if(!member.colour?.hex) {%>
	<% } else { %>
	<a class="tag" href="#">
	<p class="colour-circle" style="--card-circle-colour:<%= member.colour?.hex%>"></p>
	</a>
	<% } %>
	</div>
	</div>
	</article>

	:root {
	/* Important Colors */
	--primary-purple: #772ce8;
	--white: #ffffff;
	--dark-grey: #30343f;

	/* Light Mode */
	--main-light-color: #f7f7f8;
	--tag-color: #eaeaeb;

	/* Dark Mode */
	--main-dark-color: #28282f;
	--content-dark-color: #393939;
	--dark-tag-color: #212123;
	--dark-tag-text-color: #;
	}

siem-p / squad-page-siem Goto Github PK

squad-page-siem's Introduction

FDND overzichtspagina

Inhoudsopgave

Beschrijving

Kenmerken

Node

Express

EJS

⚡ Installatie

Bronnen

Licentie

squad-page-siem's People

Contributors

Stargazers

squad-page-siem's Issues

Recommend Projects

Recommend Topics

Recommend Org