smartITNinja/brutalist-sample-application.html

## brutalist-sample-application.html
<!-- Discover IT service management news, tips, information and resources provided by Smart IT Ninja -->
<!-- Website => https://smartit.ninja -->

<!DOCTYPE html>
<html lang="en">
<title>Brutalist Sample Application </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">

<body class="w-100 sans-serif bg-white">

    <section class="mw7 center avenir">
        <div id="root"></div>
    </section>

    <script>
        'use strict';

        var dclhandler = false;
        if (document.readyState !== 'loading') {
            start();
        } else {
            dclhandler = true;
            document.addEventListener('DOMContentLoaded', start);
            appl();
        }

        function start() {
            if (dclhandler) {
                document.removeEventListener('DOMContentLoaded', start);
            }
            console.log('Document ready, starting JS activities ...');
        }

        function appl() {
            var articlesDB = [];
            const url = '--- URL API ---';
            fetch(url)
                .then((resp) => resp.json())
                .then(function(data) {
                    articlesDB = data;
                    render(articlesDB);
                });
        }

        function render(articles) {
            var artHTML = [];
            for (var i = 0; i < 3; i++) {
                var paso = App(articles[i].image, articles[i].title, articles[i].desc, articles[i].author);
                artHTML.push(paso);
            }
            artHTML.map((val, i, arr) => {
                document.getElementById('root').insertAdjacentHTML('beforeend', val);
            });
        }


        function App(fotoUrl, title, postContent, author) {
            return `
            <article class="bt bb b--black-10">
                <a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
                    <div class="flex flex-column flex-row-ns">
                        <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
                            <img src=${fotoUrl} class="db" alt="">
                        </div>
                        <div class="w-100 w-60-ns pl3-ns">
                            <h1 class="f3 fw1 baskerville mt0 lh-title">${title}</h1>
                            <p class="f6 f5-l lh-copy">${postContent}
                            </p>
                            <p class="f6 lh-copy mv0">By ${author}</p>
                        </div>
                    </div>
                </a>
            </article>
           `;
        }
    </script>

</body>
</html>
	<!-- Discover IT service management news, tips, information and resources provided by Smart IT Ninja -->
	<!-- Website => https://smartit.ninja -->

	<!DOCTYPE html>
	<html lang="en">
	<title>Brutalist Sample Application </title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">

	<body class="w-100 sans-serif bg-white">

	<section class="mw7 center avenir">
	<div id="root"></div>
	</section>

	<script>
	'use strict';

	var dclhandler = false;
	if (document.readyState !== 'loading') {
	start();
	} else {
	dclhandler = true;
	document.addEventListener('DOMContentLoaded', start);
	appl();
	}

	function start() {
	if (dclhandler) {
	document.removeEventListener('DOMContentLoaded', start);
	}
	console.log('Document ready, starting JS activities ...');
	}

	function appl() {
	var articlesDB = [];
	const url = '--- URL API ---';
	fetch(url)
	.then((resp) => resp.json())
	.then(function(data) {
	articlesDB = data;
	render(articlesDB);
	});
	}

	function render(articles) {
	var artHTML = [];
	for (var i = 0; i < 3; i++) {
	var paso = App(articles[i].image, articles[i].title, articles[i].desc, articles[i].author);
	artHTML.push(paso);
	}
	artHTML.map((val, i, arr) => {
	document.getElementById('root').insertAdjacentHTML('beforeend', val);
	});
	}


	function App(fotoUrl, title, postContent, author) {
	return `
	<article class="bt bb b--black-10">
	<a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
	<div class="flex flex-column flex-row-ns">
	<div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
	<img src=${fotoUrl} class="db" alt="">
	</div>
	<div class="w-100 w-60-ns pl3-ns">
	<h1 class="f3 fw1 baskerville mt0 lh-title">${title}</h1>
	<p class="f6 f5-l lh-copy">${postContent}
	</p>
	<p class="f6 lh-copy mv0">By ${author}</p>
	</div>
	</div>
	</a>
	</article>
	`;
	}
	</script>

	</body>
	</html>