David van den Bor davidvandenbor

Html includes with standard javascript

An example of how you can include "snippets" of HTML into other HTML pages. This might come in handy for things like including headers, footers, menu's or sidebars to multiple pages of a website or application. For instance, you can embed this into 20 or 30 webpages: a single top bar navigation menu which was saved as a reusable piece of code in a seperate text or HTML file. It takes just a couple of lines of javascript to do this.

As a bonus, I've also added a few lines of code that sticks an ".active" css class on the menu item with the name as the currently loaded page. It does this by checking the URL that's actively present in the address bar of your browser.

See it in action

Grid challenge exercise (solution with grid areas)

One of three lesson files with CSS grid exercises. This file contains the grid areas solution to the layout challenge. There's a second one with the solution using grid lines, see here.

Preview: at bl.ocks.org

Grid challenge exercise (solution with grid-lines)

One of three lesson files with CSS grid exercises. This file contains the grid lines solution to the layout challenge. There's a second one with the solution using grid areas see here

Preview: at bl.ocks.org

Basic CSS Grid example, study of grid lines

See the code preview here The full page preview here: https://bl.ocks.org/davidvandenbor/raw/94973470a99d843d008631af6cf6014e/?raw=true

This is the layout that we're trying to build:

Mobile first scalable layout with media queries

Example of how to scale a layout from mobile to desktop (and larger) by figuring out when the layout "breaks" when resizing, and then placing your css media queries strategically. Note also the clever use of REM measurements for margins and paddings, relative to the global font-size! Preview: at bl.ocks.org

Edit:

Edit / Play around with it for yourself in Plunker! > See link below: https://plnkr.co/edit/gist:b98556c9eedd735e79a4af043835f909

Drawing tiny houses with P5.js and javascript nested loops

Using P5.js in combination with nested javascript loops to draw a grid of tiny houses. Preview: at bl.ocks.org

Edit / Play around with it for yourself in Plunker! > See link below: https://plnkr.co/edit/gist:31ea0b06ad81401fa371230b0dfbff3d

Simple navigation for desktop and mobile

Example of a very simple horizontal bar navigation which changes into a vertical navigation menu on mobile (meaning, when the screen is smaller than 500px) As a bonus, I've also added some javascript that sticks an ".active" class on the menu link of the current page (that is loaded in the browser window)

Preview: at bl.ocks.org

Event Listeners in javascript

An example demonstrating the use of event listeners (used as one-offs or globally) in Javascript. When using event listeners globally you can use event.target.matches to "listen" for events executed on all HTML elements (identified bij element, class or ID)
Preview at: bl.ocks.org

	<!DOCTYPE html>
	<html>

	<body>

	<p id="demo"></p>

	<script>
	// Create arrays for the months and the weekdays
	const weekdays = ["Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag","Zondag"];

	<script type='text/javascript'>
	var link = !!document.querySelector("link[rel='canonical']") ? document.querySelector("link[rel='canonical']") : document.createElement('link');
	link.setAttribute('rel', 'canonical');
	link.setAttribute('href', location.protocol + '//' + location.host + location.pathname);
	document.head.appendChild(link);
	</script>