JSFiddle - React, Tailwind, and code Playground

MapleStory News

by MegaScience

HTML

<div id="newsContainer"></div>
<input id="toggle" name="toggle" type="checkbox" />
<div id="webpage">
  <div id="inner"></div>
  <label for="toggle">X</label>
</div>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
}

input#toggle {
  position: fixed;
  left: -9999px;
}

label[for="toggle"] {
  position: absolute;
  right: 0;
  top: 0;
  width: 1.3em;
  height: 1.3em;
  box-sizing: border-box;
  border: 1px dotted black;
  background-color: #2980B9;
  color: white;
  text-align: center;
}

input#toggle:not(:checked) + div#webpage {
  display: none;
}

div#webpage {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 80%;
  width: 80%;
  background-color: white;
  border: 1px solid black;
  padding: 5px;
}

div#inner {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}

div#webpage img {
  max-width: 100%;
}

div#newsContainer > div {
  border: 1px solid gray;
  box-sizing: border-box;
  float: left;
  clear: both;
  margin: 3px;
  padding-right: 3px;
  width: 100%;
}

div#newsContainer > div span {
  float: right;
}

div#newsContainer div.events {
  border-left: 3px solid #7acca3;
  background-color: rgba(122, 204, 163, 0.1);
}

div#newsContainer div.sale {
  border-left: 3px solid #2e5ce6;
  background-color: rgba(122, 204, 163, 0.1);
}

div#newsContainer div.maintenance {
  border-left: 3px solid #cf5300;
  background-color: rgba(207, 83, 0, 0.1);
}

div#newsContainer div.update {
  border-left: 3px solid #b20047;
  background-color: rgba(178, 0, 71, 0.1);
}

div#newsContainer div.community {
  border-left: 3px solid #c6f;
  background-color: rgba(204, 102, 255, 0.1);
}

div#newsContainer h3 {
  margin-top: 0;
}

div#newsContainer img {
  float: left;
  padding-right: 5px;
  max-width: 150px;
}

JavaScript

const newsFeed = {
  elements: {
    container: document.getElementById('newsContainer'),
    webpage: document.getElementById('inner'),
    toggle: document.getElementById('toggle')
  },
  sites: {
    cors: 'https://cors.io/?',
    newsURLR: 'http://nxl.nxfs.nexon.com/news/10100/en-US/recent.json',
    newsURL: 'http://nxl.nxfs.nexon.com/news/10100/en-US/list.json',
    newsPage: 'http://nxl.nxfs.nexon.com/news/items/'
  },
  getNews: function(url) {
    $.getJSON(this.sites.cors + url, json => {
      let safetyStop = 0;
      for (let news of(Array.isArray(json) ? json : json.List)) {
        this.processNews(news);
        if (++safetyStop > 20) break;
      }
    });
  },
  processNews: function(news) {
    let div = document.createElement('div');
    div.classList.add(news.Category);
    div.onclick = () => $.ajax({
      dataType: "html",
      url: this.sites.cors + this.sites.newsPage + news.Id,
      success: html => {
        this.elements.webpage.innerHTML = html;
        //document.getElementById('webpage').innerHTML = html + '<label for="toggle">X</label>';
        this.elements.toggle.checked = true;
      }
    });
    let img = document.createElement('img');
    img.setAttribute('src', news.ImageThumbnail);
    div.appendChild(img);
    let date = document.createElement('span');
    //console.log((new Date(news.LiveDate)).toDateString());
    date.innerHTML = (new Date(news.LiveDate)).toLocaleString();
    div.appendChild(date);
    let title = document.createElement('h3');
    title.innerHTML = news.Title;
    div.appendChild(title);
    this.elements.container.appendChild(div);
  },
  init: function() {
    //this.getNews(this.sites.newsURLR);
    this.getNews(this.sites.newsURL);
  }
};

newsFeed.init();