JSFiddle - React, Tailwind, and code Playground

by scurrilus

JavaScript

// Content from json feed

/* https://www.news38.de/nr/proxy/?service=jsonp&url=https://api.wetterkontor.de/json/funke/wr_json.asp?s=38100&list=0&int=0&dt=0&name=Braunschweig&callback=jsonp_callback*/

const factory = {
	contFactory: function(search, attributes) {		
		// using Promise
		fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

		const test = {
			'name': 'peter12',
		}
		return eval(search);
	},
	
	elFactory: function(type, attributes, ...children) {
  	const el = document.createElement(type);

		for (key in attributes) {
			el.setAttribute(key, attributes[key]);
		}

		children.forEach(child => {
			console.log('child', child);
			if (typeof child === 'string') {
				el.appendChild(document.createTextNode(child));
			} else {
				el.appendChild(child);
			}
		});

  	return el;
	}
}

// load Json

// Generate Element
const markup = factory.elFactory(`div`, { class: `my-component`},
  factory.elFactory('span', {}, factory.elFactory('span', {}, `Hello World! ${factory.contFactory('test.name')}`)),
  factory.elFactory('div', {}, `Thanks for reading my blog!`)
)

document.body.appendChild(markup)