Skip to content

Instantly share code, notes, and snippets.

@GoSubRoutine
Forked from christiannolles/.block
Last active Jan 16, 2021
Embed
What would you like to do?
JSON Religious Articles
height: 550
scrolling: yes
border: yes
{
"Articles": [
{ "ID": "520",
"Title": "Blijf waakzaam",
"Date": "Vrijdag 28 juli 2017",
"Image": "http:\/\/www.dagelijkseoverdenkingen.nl\/wp-content\/uploads\/2017\/07\/waakzaam.png",
"Link": "blijf-waakzaam"
},
{ "ID": "497",
"Title": "Wees vernieuwd in je denken",
"Date": "Donderdag 27 juli 2017",
"Image": "http:\/\/www.dagelijkseoverdenkingen.nl\/wp-content\/uploads\/2017\/07\/vernieuwd-small.png",
"Link": "wees-vernieuwd-in-je-denken"
},
{ "ID": "478",
"Title": "Bevrijd van de macht van de zonde",
"Date": "Woensdag 26 juli 2017",
"Image": "http:\/\/www.dagelijkseoverdenkingen.nl\/wp-content\/uploads\/2017\/07\/bevrijd-small.png",
"Link": "bevrijd-van-de-macht-van-de-zonde"
},
{ "ID": "486",
"Title": "Niet door goede werken",
"Date": "Dinsdag 25 juli 2017",
"Image": "http:\/\/www.dagelijkseoverdenkingen.nl\/wp-content\/uploads\/2017\/07\/werken-small.png",
"Link": "niet-door-goede-werken"
},
{ "ID": "459",
"Title": "Amazing Grace",
"Date": "Maandag 24 juli 2017",
"Image": "http:\/\/www.dagelijkseoverdenkingen.nl\/wp-content\/uploads\/2017\/07\/amazing-grace-small.png",
"Link": "amazing-grace"
},
{ "ID": "440",
"Title": "De schuld voorbij - deel 5",
"Date": "Vrijdag 21 juli 2017",
"Image": "http:\/\/www.dagelijkseoverdenkingen.nl\/wp-content\/uploads\/2017\/07\/schuld-voorbij-small.png",
"Link": "de-schuld-voorbij-deel-5"
},
{ "ID": "399",
"Title": "Leven vanuit Genade - deel 4",
"Date": "Donderdag 20 juli 2017",
"Image": "http:\/\/www.dagelijkseoverdenkingen.nl\/wp-content\/uploads\/2017\/07\/levenuitgenade-small.png",
"Link": "leven-vanuit-genade-deel-4"
},
{ "ID": "394",
"Title": "Gered voor de schepping - deel 3",
"Date": "Woensdag 19 juli 2017",
"Image": "http:\/\/www.dagelijkseoverdenkingen.nl\/wp-content\/uploads\/2017\/07\/geredvoordeschepping-small.png",
"Link": "gered-voor-de-schepping-deel-3"
},
{ "ID": "370",
"Title": "Je bent een hemelbewoner - deel 2",
"Date": "Dinsdag 18 juli 2017",
"Image": "http:\/\/www.dagelijkseoverdenkingen.nl\/wp-content\/uploads\/2017\/07\/hemelbewoner-small.png",
"Link": "je-bent-een-hemelbewoner-deel-2"
},
{ "ID": "361",
"Title": "De Verrassing - deel 1",
"Date": "Maandag 17 juli 2017",
"Image": "http:\/\/www.dagelijkseoverdenkingen.nl\/wp-content\/uploads\/2017\/07\/deverrassing-small.png",
"Link": "de-verrassing-deel-1"
}
]}
<!DOCTYPE html>
<meta charset=UTF-8>
<script async src=http://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>
/**
* JSON Religious Articles (v2.0.2)
* Christian Nolles (2017-Jul-28)
* GoToLoop (2017-Jul-30)
*
* https://Forum.Processing.org/two/discussion/23622/
* how-do-i-assign-my-elements-to-a-specific-div#Item_32
*
* http://Bl.ocks.org/GoSubRoutine/bef70ffdae5e1a052ade9c6b15f737cc
*/
"use strict";
const HTTP = 'http' + '://',
SITE = HTTP + 'DagelijkseOverdenkingen.nl/',
JSON = 'json/',
FILE = 'articles.json',
REMOTE = false,
PATH = REMOTE && SITE + JSON || FILE,
T_COL = 'blue', D_COL = 'darkmagenta', T_SIZE = 6,
LIST = 'ul', ITEM = 'li',
SPC = '&emsp;', BLANK = '_blank';
let articles;
function preload() {
loadJSON(PATH, jsonObj => console.table(articles = jsonObj.Articles));
}
function setup() {
noCanvas();
const list = createElement(LIST);
for (const art of articles) {
const title = art.Title.bold().fontsize(T_SIZE).fontcolor(T_COL),
date = art.Date.italics().big().fontcolor(D_COL),
td = title + SPC + date + SPC,
link = createA(SITE + art.Link, null, BLANK);
createImg(art.Image).parent(link);
createElement(ITEM, td).child(link).parent(list);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment