JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="controllers">
  <input id="start" class="genbutton" type="button" value="Start image gen"/>
  <input id="stop" class="genbutton" 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" checked/>
  <br>
  <b>url length: </b>
  <select id="urlLength">
    <option value="5">5</option>
    <option value="7">7</option>
  </select>
  <br>
  <br>
  <input id="clear" class="button" type="button" value="Clear gens"/>
</div>

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

CSS

body{
  background:#272737;
  color:#aaa;
}
#container{
  width:40em;
  padding-top:2em;
  margin:0 auto;
}

.imgItem {
    max-width: 80%;
    margin-bottom: 5em;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    background: #110f1a;
    border-radius: 3%;
    padding-top: 1em;
    padding-bottom: 1em;
    box-shadow: rgba(10, 21, 30, 0.54) 1px 1px 8px 3px;
}

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

#controllers{
  position:fixed;
  z-index:999;
}
#urlLength{
  width:3em;
}
input,select{
  cursor:pointer;
}
img{
  width:100%;
  background:#0e0d12;
}
li{
  display:block;
}
a{
  color:#aaa;
  position:relative;
  display:block;
  left:50%;
  transform:translate(-20%);
}

#checkmark {
    position: relative;
    bottom: 0.5em;
    left: 0.5em;
    display: block;
    width: 2em;
    height: 2em;
    background-color: #252432;
    border-radius: 50%;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border: solid 2px white;
    cursor: pointer;
    transition:background-color ease .7s, border-color ease .7s;
}#checkmark:before {
    content: "";
    position: absolute;
    left: 15px;
    top: 5px;
    width: 5px;
    height: 18px;
    background-color: #fff;
    transition:background-color ease .3s;
}#checkmark:after {
    content: "";
    position: absolute;
    width: 7px;
    height: 5px;
    background-color: #fff;
    left: 8px;
    top: 18px;
    transition:background-color ease .3s;
}

.checked:after, .checked:before{
  background-color:#06ce06!important;
}
.checked{
  border-color:#06ce06!important;
}

#delete {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    display: block;
    width: 2em;
    height: 2em;
    background-color: #252432;
    border-radius: 50%;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border: solid 2px red;
    cursor:...

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 = true;
  var url = "https://i.imgur.com/";
  var prefix = ".jpg";
  var triedURL = [];

  this.view = function(){return $("#viewer").is(':checked')};
  this.blurImages = function(){return $("#blur").is(":checked")};
  this.urlLength = function(){return $("#urlLength").val()};
  
  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(document.urlLength());
    
    for(var i in triedURL){
...