giopunt/clients.js

## clients.js
window.onload = function(){
  //get https://www.reddit.com/r/all.json
  var utils = new Reddit().init(document.getElementById('news'));
};

var Reddit = function(){
  this.feedUrl = 'https://www.reddit.com/r/all.json';
};

Reddit.prototype.init = function(targetEl){
  this.targetEl = targetEl;
  this.loadAPI(this.feedUrl, this.displayNews.bind(this));
};

Reddit.prototype.displayNews = function(feed){
  if(typeof(feed.data) != "undefined"){
    this.targetEl.innerHTML = '';
    for(var i = (feed.data.children.length - 1); i >= 0; i--){
      var post = feed.data.children[i].data;
      var li = document.createElement('li');
      li.innerHTML = '<a href="' + post.url  + '">' + post.title + '</a>';
      this.targetEl.appendChild(li);
      console.log(feed.data.children[i]);
    }
  }
};

Reddit.prototype.loadAPI = function(URL, callback) {
  var xmlhttp;
  if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
  } else { // code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          callback(JSON.parse(xmlhttp.responseText));
      }
  };
  xmlhttp.open("GET", URL, true);
  xmlhttp.setRequestHeader('Accept', 'application/json');
  xmlhttp.send();
};

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to Casual Feeds</title>
    <meta name="description" content="A cool thing made with HyperDev">
    <link id="favicon" rel="icon" href="https://avatars2.githubusercontent.com/u/19780807?v=3&s=32" type="image/x-icon">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>
        casual feeds
      </h1>
    </header>

    <main>
      <p class="bold">Oh hi,</p>
      <p>Here are same reddit news:</p>
      <section class="news">
        <ul id="news">
          <li>juicy feed is coming, hold on...</li>
        </ul>
      </section>
    </main>

    <footer>
      <a href="https://github.com/casualprogrammers">
        Made by Casual Programmers
      </a>
    </footer>

    <!-- Your web-app is https, so your scripts need to be too -->
    <script src="/client.js"></script>

  </body>
</html>

## style.css
* {
  box-sizing: border-box;
}

body {
  font-family: helvetica, arial, sans-serif;
  margin: 0;
}

h1 {
  font-weight: bold;
  color: pink;
}

.bold {
  font-weight: bold;
}

header {
  border-bottom: 1px solid lightgrey;
  margin: 0;
  padding: 20px;
}

header h1 {
  margin: 0;
  padding: 0;
}

p {
  max-width: 600px;
}

form {
  margin-bottom: 25px;
  padding: 15px;
  background-color: cyan;
  display: inline-block;
  width: 100%;
  max-width: 340px;
  border-radius: 3px;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

input {
  display: block;
  margin-bottom: 10px;
  padding: 5px;
  width: 100%;
  border: 1px solid lightgrey;
  border-radius: 3px;
  font-size: 16px;
}

button {
  font-size: 16px;
  border-radius: 3px;
  background-color: lightgrey;
  border: 1px solid grey;
  box-shadow: 2px 2px teal;
  cursor: pointer;
}

button:hover {
  background-color: yellow;
}

button:active {
  box-shadow: none;
}

li {
  margin-bottom: 5px;
}

li a {
  color: blue;
  text-decoration: none;
}

li a:hover {
  color: lightblue;
  text-decoration: underline;
}

footer {
  padding-top: 25px;
  border-top: 1px solid lightgrey;
}

footer > a {
  color: #BBBBBB;
  padding: 20px;
}

.nicejob {
  text-decoration: line-through;
}
	window.onload = function(){
	//get https://www.reddit.com/r/all.json
	var utils = new Reddit().init(document.getElementById('news'));
	};

	var Reddit = function(){
	this.feedUrl = 'https://www.reddit.com/r/all.json';
	};

	Reddit.prototype.init = function(targetEl){
	this.targetEl = targetEl;
	this.loadAPI(this.feedUrl, this.displayNews.bind(this));
	};

	Reddit.prototype.displayNews = function(feed){
	if(typeof(feed.data) != "undefined"){
	this.targetEl.innerHTML = '';
	for(var i = (feed.data.children.length - 1); i >= 0; i--){
	var post = feed.data.children[i].data;
	var li = document.createElement('li');
	li.innerHTML = '<a href="' + post.url + '">' + post.title + '</a>';
	this.targetEl.appendChild(li);
	console.log(feed.data.children[i]);
	}
	}
	};

	Reddit.prototype.loadAPI = function(URL, callback) {
	var xmlhttp;
	if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
	} else { // code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
	callback(JSON.parse(xmlhttp.responseText));
	}
	};
	xmlhttp.open("GET", URL, true);
	xmlhttp.setRequestHeader('Accept', 'application/json');
	xmlhttp.send();
	};
	<!DOCTYPE html>
	<html>
	<head>
	<title>Welcome to Casual Feeds</title>
	<meta name="description" content="A cool thing made with HyperDev">
	<link id="favicon" rel="icon" href="https://avatars2.githubusercontent.com/u/19780807?v=3&s=32" type="image/x-icon">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<header>
	<h1>
	casual feeds
	</h1>
	</header>

	<main>
	<p class="bold">Oh hi,</p>
	<p>Here are same reddit news:</p>
	<section class="news">
	<ul id="news">
	<li>juicy feed is coming, hold on...</li>
	</ul>
	</section>
	</main>

	<footer>
	<a href="https://github.com/casualprogrammers">
	Made by Casual Programmers
	</a>
	</footer>

	<!-- Your web-app is https, so your scripts need to be too -->
	<script src="/client.js"></script>

	</body>
	</html>
	* {
	box-sizing: border-box;
	}

	body {
	font-family: helvetica, arial, sans-serif;
	margin: 0;
	}

	h1 {
	font-weight: bold;
	color: pink;
	}

	.bold {
	font-weight: bold;
	}

	header {
	border-bottom: 1px solid lightgrey;
	margin: 0;
	padding: 20px;
	}

	header h1 {
	margin: 0;
	padding: 0;
	}

	p {
	max-width: 600px;
	}

	form {
	margin-bottom: 25px;
	padding: 15px;
	background-color: cyan;
	display: inline-block;
	width: 100%;
	max-width: 340px;
	border-radius: 3px;
	}

	main {
	max-width: 960px;
	margin: 0 auto;
	padding: 20px;
	}

	input {
	display: block;
	margin-bottom: 10px;
	padding: 5px;
	width: 100%;
	border: 1px solid lightgrey;
	border-radius: 3px;
	font-size: 16px;
	}

	button {
	font-size: 16px;
	border-radius: 3px;
	background-color: lightgrey;
	border: 1px solid grey;
	box-shadow: 2px 2px teal;
	cursor: pointer;
	}

	button:hover {
	background-color: yellow;
	}

	button:active {
	box-shadow: none;
	}

	li {
	margin-bottom: 5px;
	}

	li a {
	color: blue;
	text-decoration: none;
	}

	li a:hover {
	color: lightblue;
	text-decoration: underline;
	}

	footer {
	padding-top: 25px;
	border-top: 1px solid lightgrey;
	}

	footer > a {
	color: #BBBBBB;
	padding: 20px;
	}

	.nicejob {
	text-decoration: line-through;
	}