JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<input id="start" type="button" value="gen new image"/>
<input id="stop" type="button" value="stop image gen"/>
<b>Append Images</b><input id="viewer" type="checkbox"/>
<div id="container"></div>

CSS

body{
  background:#272727;
  
}
#container{
  width:40;
  margin:0 auto;
}
#imgItem{
  max-width:15em;
  padding-bottom:2em;
  position:relative;
  left:50%;
  transform:translate(-50%);
}
img{
  width:100%;
}
li{
  display:block;
}
a{
  color:#555;
  position:relative;
  left:50%;
  transform:translate(-50%);
}

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.4cdn.org/b/1542328";
  var prefix = ".jpg";
  var urlLength = 6;
	var chars = "0123456789";
  var triedURL = [];
  
  this.view = function(){return $("#viewer").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]){
      	genNewImg();
      }
   ...