Shipping beats perfection

index.html

<div class="container">

	<div class="logo row">
		<div class="twelve column">
			<button id="myBtn">Open Modal test</button>
		</div>
	</div>

	<div id="grid">

		<div id="cards-wrap" class="cards row"></div>

		<div id="myModal" class="modal">
			<div class="modal-content">
				<span class="close">&times;</span>
				<p>Some text in the Modal..</p>
			</div>
		</div>

	</div>

</div>

script.babel

const cards = document.getElementById('cards-wrap');
const modal = document.getElementById('myModal');
const btn = document.getElementById("myBtn");
const span = document.getElementsByClassName("close")[0];

function fetchData() {
	return fetch("https://api.myjson.com/bins/w5ltt")
		.then(function(res) {
			return res.json();
		})
		.then(function(data) {
			return data;
		});
}

function generateCard(item) {
	const { image, title, description } = item;
	const test = generateModal();
	return '<div class="card four column"><div class="card__header--image"><img src='+image+' alt="Placeholder"></div><div class="card__body"><h2>'+title+'</h2><p>'+description+'</p><div class="card__button"><a onclick='+test+' href="#" class="button primary">Open modal</a></div></div></div>';
}

let getData = async () => {
	try {
		let results = await fetchData();
		cards.innerHTML = results
			.map(generateCard)
			.join(" ");
	} catch (err) {
		console.error(err);
	}
};

getData();

function showModal() {
	modal.style.display = "block";
}

function hideModal() {
	modal.style.display = "none";
}

function generateModal() {
	console.log("generateModal");
}

btn.onclick = function() {
    showModal();
}

span.onclick = function() {
    hideModal();
}

window.onclick = (e) => {
    if (e.target == modal) hideModal();
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser-polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.min.js"></script>

shipping-beats-perfection.markdown

Shipping beats perfection

A Pen by Edvins Antonovs on CodePen.

License.

style.scss

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");

/* Color scheme */
$primary: #0f63ab;
$body: #4c4c4c;
$bg: #b0b0b0;
$white: #ffffff;
$black: #000000;

/* Typography */
* {
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: $body;
}

/* Global settings */
*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/* IE 8+ to use box-sizing, < IE 9 support is pretty much void at this point */
}

html,
body {
	height: 100%;
	width: 100%;
	font-size: 100%;
	margin: 0;
	padding: 0;
}

body {
	background-color: $bg;
}

/* Grid */
.container {
	width: 96%;
	position: relative;
	max-width: 1020px;
	margin: 0 auto;
	padding: 20px 0;

	&::after {
		content: "";
		clear: both;
		display: table;
	}
}

.row {
	position: relative;
	width: 100%;
	margin: 0 auto;

	&::after {
		content: "";
		clear: both;
		display: table;
	}

	.column {
		margin: 8px 2%;
	}
}

.column {
	width: 96%;
	float: left !important;
}

.four.column {
	width: 29.33333333%;
}

.twelve.column {
	width: 96%;
}

/* Logo */
.logo {
	img {
		max-width: 135px;
	}
}

/* Card */
.cards {
	justify-content: space-between;
	display: flex;
}

.card {
	width: 100%;
	display: block;
	position: relative;
	margin-bottom: 10px;
	background-color: $white;
	color: $primary;

	.card__header--image {
		position: relative;

		img {
			display: block;
			width: 100%;
			position: relative;
			left: 0px;
			right: 0px;
			top: 0px;
			bottom: 0px;
		}
	}

	.card__body {
		padding: 10px 20px;

		h2 {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		p {
			margin-bottom: 10px;
		}
	}
}

/* Button */
.button {
	padding: 8px 12px;
	display: inline-block;
	text-align: center;
	line-height: 1;
	cursor: pointer;
	margin: 0 0 20px;
	position: relative;
	white-space: nowrap;
	vertical-align: middle;
	text-decoration: none;
	transition: 0.2s ease-out;
	transition-property: background-color, color;
	background-color: transparent;
	color: $body;
	border: 1px solid $body;
}

.button.primary {
	background-color: $primary;
	color: #fff;
	font-weight: bold;
	border: 1px solid darken($primary, 3%);
}

.button.primary:hover,
.button.primary:focus {
	background-color: darken($primary, 10%);
}

/* Modal */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}