matschik/reddit-realtime.html

## reddit-realtime.html
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Reddit Realtime</title>
  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
  <style>
    body {
      font-family: 'IBM Plex Sans', sans-serif;
    }

    .theme-light {
      color: #202124;
    }

    .theme-dark {
      color: #ffffff;
      background-color: #202124;
    }

    a {
      text-decoration: none;
    }
  </style>
</head>

<body class="theme-dark">
  <label>Choose your subreddit: </label>
  <input id="subreddit" type="text" value="askreddit" />
  <button id="theme-btn">Switch theme</button>
  <ul class="js-posts"></ul>
  <script>
    $body = document.querySelector('body');
    $subredditInput = document.querySelector('#subreddit');
    var subredditDefault = $subredditInput.value;

    function request(opts, cb) {
      var httpRequest = new XMLHttpRequest();

      httpRequest.onload = function () {
        var statusCode = httpRequest.status;

        if (statusCode < 200 || statusCode >= 400) {
          console.error('Server reached but request failed.');
          return cb(true);
        }

        var json;
        try {
          json = JSON.parse(httpRequest.response);
        } catch (err) {
          // Response is not JSON valid string
        }

        if (!json) {
          cb(false, httpRequest.response);
        } else {
          cb(false, json);
        }
      }

      httpRequest.onerror = function () {
        console.log('Server not reached');
        return cb(true);
      }

      httpRequest.open(opts.method, opts.url, true);

      if (opts.headers) {
        for (var headerName in opts.headers) {
          httpRequest.setRequestHeader(headerName, opts.headers[headerName]);
        }
      }

      httpRequest.send();
    }

    function displayRedditPosts(subreddit) {
      request({
        method: 'GET',
        url: 'https://www.reddit.com/r/' + subreddit + '/.json'
      }, function (err, data) {
        if (err) {
          console.log('Fail');
          return;
        }
        var $posts = document.querySelector('.js-posts');

        while ($posts.firstChild) {
          $posts.removeChild($posts.firstChild);
        }

        var redditPosts = data.data.children;
        var nbRedditPosts = redditPosts.length;

        for (var i = 0; i < nbRedditPosts; i++) {
          var redditPost = redditPosts[i];
          var title = redditPost.data.title;
          var score = redditPost.data.score;
          var url = redditPost.data.url;


          var stickied = redditPost.data.stickied;
          var firstTag = '<span>';
          if (stickied) {
            firstTag = '<span style="color:#4caf50;">'
          }

          // New Post DOM
          var newLI = document.createElement('li');
          newLI.innerHTML = firstTag + title + '</span><span> | <b>' + score + '</b> </span><a href="' + url + '" target="_blank">=></a>';
          $posts.appendChild(newLI);
        }

      });
    }

    function intervalUpdate(subreddit) {
      return setInterval(
        function () { displayRedditPosts(subreddit) }
        , 500);
    }

    function switchTheme() {
      var darkClass = 'theme-dark';
      var lightClass = 'theme-light';
      document.getElementById('theme-btn').onclick = function () {
        var actualTheme = $body.classList[0];
        if (actualTheme === lightClass) {
          $body.classList.remove(lightClass);
          $body.classList.add(darkClass);
        } else {
          $body.classList.remove(darkClass);
          $body.classList.add(lightClass);
        }
      }
    }

    var updatePosts = intervalUpdate(subredditDefault);

    $subredditInput.oninput = function () {
      clearInterval(updatePosts);
      var subreddit = this.value;
      updatePosts = intervalUpdate(subreddit);
    }

    switchTheme();

  </script>
</body>

</html>
	<!DOCTYPE html>
	<meta name="robots" content="noindex">
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Reddit Realtime</title>
	<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
	<style>
	body {
	font-family: 'IBM Plex Sans', sans-serif;
	}

	.theme-light {
	color: #202124;
	}

	.theme-dark {
	color: #ffffff;
	background-color: #202124;
	}

	a {
	text-decoration: none;
	}
	</style>
	</head>

	<body class="theme-dark">
	<label>Choose your subreddit: </label>
	<input id="subreddit" type="text" value="askreddit" />
	<button id="theme-btn">Switch theme</button>
	<ul class="js-posts"></ul>
	<script>
	$body = document.querySelector('body');
	$subredditInput = document.querySelector('#subreddit');
	var subredditDefault = $subredditInput.value;

	function request(opts, cb) {
	var httpRequest = new XMLHttpRequest();

	httpRequest.onload = function () {
	var statusCode = httpRequest.status;

	if (statusCode < 200 \|\| statusCode >= 400) {
	console.error('Server reached but request failed.');
	return cb(true);
	}

	var json;
	try {
	json = JSON.parse(httpRequest.response);
	} catch (err) {
	// Response is not JSON valid string
	}

	if (!json) {
	cb(false, httpRequest.response);
	} else {
	cb(false, json);
	}
	}

	httpRequest.onerror = function () {
	console.log('Server not reached');
	return cb(true);
	}

	httpRequest.open(opts.method, opts.url, true);

	if (opts.headers) {
	for (var headerName in opts.headers) {
	httpRequest.setRequestHeader(headerName, opts.headers[headerName]);
	}
	}

	httpRequest.send();
	}

	function displayRedditPosts(subreddit) {
	request({
	method: 'GET',
	url: 'https://www.reddit.com/r/' + subreddit + '/.json'
	}, function (err, data) {
	if (err) {
	console.log('Fail');
	return;
	}
	var $posts = document.querySelector('.js-posts');

	while ($posts.firstChild) {
	$posts.removeChild($posts.firstChild);
	}

	var redditPosts = data.data.children;
	var nbRedditPosts = redditPosts.length;

	for (var i = 0; i < nbRedditPosts; i++) {
	var redditPost = redditPosts[i];
	var title = redditPost.data.title;
	var score = redditPost.data.score;
	var url = redditPost.data.url;


	var stickied = redditPost.data.stickied;
	var firstTag = '<span>';
	if (stickied) {
	firstTag = '<span style="color:#4caf50;">'
	}

	// New Post DOM
	var newLI = document.createElement('li');
	newLI.innerHTML = firstTag + title + '</span><span> \| <b>' + score + '</b> </span><a href="' + url + '" target="_blank">=></a>';
	$posts.appendChild(newLI);
	}

	});
	}

	function intervalUpdate(subreddit) {
	return setInterval(
	function () { displayRedditPosts(subreddit) }
	, 500);
	}

	function switchTheme() {
	var darkClass = 'theme-dark';
	var lightClass = 'theme-light';
	document.getElementById('theme-btn').onclick = function () {
	var actualTheme = $body.classList[0];
	if (actualTheme === lightClass) {
	$body.classList.remove(lightClass);
	$body.classList.add(darkClass);
	} else {
	$body.classList.remove(darkClass);
	$body.classList.add(lightClass);
	}
	}
	}

	var updatePosts = intervalUpdate(subredditDefault);

	$subredditInput.oninput = function () {
	clearInterval(updatePosts);
	var subreddit = this.value;
	updatePosts = intervalUpdate(subreddit);
	}

	switchTheme();

	</script>
	</body>

	</html>