JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="controllers">
  <input id="start" class="button" type="button" value="gen new image"/>
  <input id="stop" class="button" type="button" value="stop image gen" style="display:none;"/>
  <br>
  <b>Append Images</b><input id="viewer" name="view" type="radio" checked/>
  <br>
  <b>Append in console</b><input name="view" type="radio"/>
  <br>
  <b>Blur Images</b><input id="blur" type="checkbox"/>
</div>

<div id="container">
  <!--  Generated images goes in here !-->
</div>

CSS

body{
  background:#272727;
  color:#aaa;
}
#container{
  width:40em;
  padding-top:2em;
  margin:0 auto;
}
#imgItem{
  max-width:80%;
  padding-bottom:2em;
  position:relative;
  left:50%;
  transform:translate(-50%);
}

.imgBlur{
  filter:blur(20px);
  transition:filter ease .2s;
}.imgBlur:hover{
  filter:blur(0px);
}

#controllers{
  position:fixed;
  z-index:999;
}

img{
  width:100%;
}
li{
  display:block;
}
a{
  color:#555;
  position:relative;
  display:block;
  left:50%;
  transform:translate(-25%);
}

JavaScript

(function(g){"use strict";function h(i,j){return{string:"+",style:"font-size: 1px; padding: "+Math.floor(j/2)+"px "+Math.floor(i/2)+"px; line-height: "+j+"px;"}}g.image=function(i,j){j=j||1;var k=new Image;k.onload=function(){var l=h(this.width*j,this.height*j);g.log("%c"+l.string,l.style+"background: url("+i+") no-repeat; background-size: "+this.width*j+"px "+this.height*j+"px; color: transparent;")},k.src=i}})(console);


function ErrorCount(){
	this.errors = 0;
  this.max = 500;
  
  this.update = function(){
  	this. limit();
    console.log(this.status());
  }
  
	this.increment = function(){
  	this.errors++;
  }
  
  this.reset = function(){
  	this.errors -= this.errors;
  }
  
  this. limit = function(){
    if(this.errors >= this.max){
    	console.log("________________");
      console.log("Limit Reaced");
      return true;
    }
    
    return false;
  }
  
  this.status = function(){
  	return "limit reached: "+this.limit()+", "+this.errors+"/"+this.max;
  }
}

$(document).ready(function(){
  var error = new ErrorCount();
	var image = new Image;
  
  var stopGen = false;
  var url = "https://i.imgur.com/";
  var prefix = ".jpg";
  var urlLength = 5;
  var triedURL = [];
  
  this.view = function(){return $("#viewer").is(':checked')};
  this.blurImages = function(){return $("#blur").is(":checked")};
  
  function imageNotFound(attempt){
    if(!error.limit()){
      error.increment();
      triedURL.push();
      if(!stopGen){
      	genNewImg();
      }
    }
  }

  function imageFound(){
    error.reset();
    
  	if(image.width <= "161" && image.height <= "81"){
			imageNotFound();
      return false;
    }
    
    if(document.view()){
    	appendNewImage()
    }else{
    	consoleNewImage();
    }
    
    genNewImg();
  }

  function genNewImg(){
    console.log("Fetching new image");
  	if(error.limit()){return false;}
    
  	var randURL = randString(urlLength);
    
    for(var i in triedURL){
    	if(randURL == triedURL[i]){
     ...