html addons

html-addons.markdown

html addons

A Pen by Teak1 on CodePen.

License.

index.html

<input type=text value="https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json" id=target>
<div id="app"></div>

script.js

let Components = {};
let colors = ["ff000077","00ff0077","0000ff77"];
Components.JSON = function(object,color){
  let element = document.createElement("div");
  element.style.marginLeft = "10px";
  element.style.marginTop = "10px";
  element.style.marginBottom="10px";
  element.style.paddingLeft="10px";
  element.style.paddingTop="10px";
  element.style.paddingBottom="10px";
  element.style.borderRadius="10px 0px 0px 10px";
  element.style.borderLeft = "1px solid black";
  element.style.borderTop = "1px solid black";
  element.style.borderBottom = "1px solid black";
  element.style.overflowX="hidden";
  if(color==undefined){
    element.style.paddingRight="10px";
    element.style.width = "fit-content";
    color=0;
  }else{
    element.style.marginRight="-10px";
  }
  element.style.backgroundColor = "#"+colors[color%colors.length];
  for(let key in object){
    let constructor; 
    if(object[key]!=null){constructor= object[key].constructor;}
    else{constructor=null;}
    if(constructor==Array||constructor==Object){
      let name = document.createTextNode(`"${key}"`);
      let wrap = document.createElement("span");
      wrap.style.marginRight="10px";
      wrap.appendChild(name);
      let btn = document.createElement("button");
      let wrapper = document.createElement("div");
      wrap.appendChild(btn);
      wrap.appendChild(document.createElement("br"));
      btn.appendChild(document.createTextNode("show"));
      btn.addEventListener("click",()=>btn.innerText=(wrapper.hidden=!wrapper.hidden)?"show":"hide");
      wrapper.hidden=true;
      element.appendChild(wrap);
      wrapper.appendChild(Components.JSON(object[key],color+1));
      element.appendChild(wrapper);
    }else{
      let item = document.createElement("div");
      let name = document.createElement("span");
      let value = document.createElement("span");
      name.appendChild(document.createTextNode(`"`+key+`"`));
      item.appendChild(name);
      item.appendChild(document.createTextNode(":"));
      value.appendChild(document.createTextNode(JSON.stringify(object[key])));
      item.appendChild(value);
      element.appendChild(item);
    }
  }  
  return element;
}

let app = document.getElementById("app");
let pval = "";
setInterval(()=>{
if(pval!=document.getElementById("target").value){
  fetch(document.getElementById("target").value).then(data=>data.json()).then(json=>{
  app.innerHTML="";
  app.appendChild(Components.JSON(json));
  }).catch(err=>app.innerHTML=err.message);
  pval=document.getElementById("target").value;
  }
},100);

style.css

html,body{
  width:100%;
  height:100%;
  margin:0px;
  overflow-x:hidden;
}