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;" />
  
  <span class="switchContainer">
    <b class="switchTitle">Preview/Console</b>
  <input type="checkbox" id="switchCheckbox_1" class="viewer">
  <label class="switchButton" for="switchCheckbox_1"></label>
  </span>
  
  <span class="switchContainer">
    <b class="switchTitle">Blur</b>
    <input type="checkbox" id="switchCheckbox_2" class="blur" checked>
    <label class="switchButton" for="switchCheckbox_2"></label>
  </span>
  
  <span class="switchContainer">
    <b class="switchTitle">url length</b>
  <input type="checkbox" id="switchCheckbox_3" class="urlLength">
  <label class="switchButton" for="switchCheckbox_3"></label>
  </span>

  <input id="clear" class="button" type="button" value="Clear gens" />
  <span id="backToTop"></span>
</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 {
  position: relative;
  top:2em;
  left: 50%;
  max-width: 80%;
  margin-bottom: 5em;
  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;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 3.5em;
  display: inline-flex;
  background: #272727;
  border: solid 1px rgba(0, 0, 0, 0.7);
  box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 5px 0px;
  z-index:3;
}

#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%);
}

#backToTop {
  position: fixed;
  top: 2em;
  right: 1em;
  display: none;
  width: 2em;
  height: 2em;
  background-color: #252432;
  border-radius: 50%;
  border: solid 2px white;
  cursor: pointer;
  transform: rotate(0deg);
}

#backToTop:before {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  border-style: solid;
  border-width: 0px 10px 15px 10px;
  border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgb(255, 255, 255) rgba(255, 255, 255, 0);
}

#backToTop:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  background-color: #fff;
  left: 12px;
  top: 16px;
}

#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...

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() {
  	if($(".urlLength").is(":checked"))return "7";
    return "5";
  };

  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();
   ...