ooade/README.md

## README.md

      
    Raw
  

              README.md
            
          
    I made use of fetch API(A browser based request API, LOL). You can replace with any of your choice :)
Working solution here


## index.css
.sub {
  background-color: #fff;
  font-size: 14px;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel='stylesheet' href='index.css'/>
</head>
<body>
  <div id='post'></div>
  <script src='index.js'></script>
</body>
</html>

## index.js
const post = document.getElementById('post');

fetch('https://www.reddit.com/r/EPL/.json')
  .then(res => res.json()) // Fetch JSON
  .then(res => res.data.children) // Grab the children
  .then(res => {
   res.map((sub, n) => { // Loop through each Subreddits
    let { data: { id, title } } = sub;
    // Let's render our title to the page with numbers...
    // 1.) blah blah blah
    let textnode = document.createTextNode(`${n + 1}.) ${title}`);
    let div = document.createElement('div');
    div.id = id;
    div.className= 'sub';
    div.appendChild(textnode);
    post.appendChild(div)
  });
});
	.sub {
	background-color: #fff;
	font-size: 14px;
	padding: 10px;
	border-bottom: 1px solid #ddd;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<link rel='stylesheet' href='index.css'/>
	</head>
	<body>
	<div id='post'></div>
	<script src='index.js'></script>
	</body>
	</html>
	const post = document.getElementById('post');

	fetch('https://www.reddit.com/r/EPL/.json')
	.then(res => res.json()) // Fetch JSON
	.then(res => res.data.children) // Grab the children
	.then(res => {
	res.map((sub, n) => { // Loop through each Subreddits
	let { data: { id, title } } = sub;
	// Let's render our title to the page with numbers...
	// 1.) blah blah blah
	let textnode = document.createTextNode(`${n + 1}.) ${title}`);
	let div = document.createElement('div');
	div.id = id;
	div.className= 'sub';
	div.appendChild(textnode);
	post.appendChild(div)
	});
	});