TimonVS/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Cryptocoin Tracker</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="app"></div>
  </body>

  <script>
    // You can also require other files to run in this process
    require('./renderer.js')
  </script>
</html>

## renderer.js
const app = document.getElementById('app')

const getPrices = () => {
  return fetch(
    'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LTC&tsyms=USD,EUR'
  ).then(res => {
    return res.json()
  })
}

const update = () => {
  getPrices().then(res => {
    const html = Object.entries(res)
      .map(currency => {
        return `<div class="currency-row">
          <h2 class="currency-title">${currency[0]}</h2>
          € ${currency[1].EUR}<br />
          $ ${currency[1].USD}
        </div>`
      })
      .join('')

    app.innerHTML = html
  })
}

update()
setInterval(update, 2000)

## styles.css
@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css';

body {
  font-family: sans-serif;
}

.currency-row {
  width: 100%;
  padding: 10px;
}

.currency-row:nth-child(odd) {
  background-color: #f0f0f0;
}

.currency-title {
  margin: 0;
  margin-bottom: 10px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Cryptocoin Tracker</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div id="app"></div>
	</body>

	<script>
	// You can also require other files to run in this process
	require('./renderer.js')
	</script>
	</html>
	const app = document.getElementById('app')

	const getPrices = () => {
	return fetch(
	'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LTC&tsyms=USD,EUR'
	).then(res => {
	return res.json()
	})
	}

	const update = () => {
	getPrices().then(res => {
	const html = Object.entries(res)
	.map(currency => {
	return `<div class="currency-row">
	<h2 class="currency-title">${currency[0]}</h2>
	€ ${currency[1].EUR}<br />
	$ ${currency[1].USD}
	</div>`
	})
	.join('')

	app.innerHTML = html
	})
	}

	update()
	setInterval(update, 2000)
	@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css';

	body {
	font-family: sans-serif;
	}

	.currency-row {
	width: 100%;
	padding: 10px;
	}

	.currency-row:nth-child(odd) {
	background-color: #f0f0f0;
	}

	.currency-title {
	margin: 0;
	margin-bottom: 10px;
	}