JSFiddle - React, Tailwind, and code Playground

by ajmeese7

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- TODO: Make fancy color picker for scheme from image background -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background-color: black;
        overflow: hidden;
      }

      #container, canvas {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      /* Style buttons */
      .btn {
        background-color: DodgerBlue;
        border: none;
        border-radius: 50%;
        color: white;
        padding: 10px 10px;
        cursor: pointer;
        font-size: 20px;
        position: absolute;
        bottom: 0;
        left: 0;
        margin-left: 4px;
        margin-bottom: 22px;
      }

      /* Darker background on mouse-over */
      .btn:hover {
        background-color: RoyalBlue;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <a class="btn draggable" id="button"><i class="fas fa-sync-alt"></i></a>
      <canvas id="canvas"></canvas>
    </div>
  </body>
</html>

JavaScript

var pixelation = 100;

document.getElementById("button").addEventListener("click", function() {
    randomWallpaper(pixelation);
});

randomWallpaper(100);

function randomWallpaper(pixelDensity) {
	const Http = new XMLHttpRequest();
    var url = "https://dynamic-page-retrieval.herokuapp.com/scrape?URL=https://source.unsplash.com/random/1920x1080";
    Http.open("GET", url);
    Http.send();
    Http.onreadystatechange=(e)=>{
      response = Http.responseText;
      response = JSON.parse(response);
      url = response.html.substring(response.html.search("src=") + 5).split("\"")[0];
      var img = new Image();
      pixelation = pixelDensity;
      img.src = url;
      img.width = "1920";
      img.height = "1080";

      img.onload = function() {
        eightBit(document.getElementById('canvas'), img, pixelDensity)
      };
    }
}

(function() {
  var DraggableDiv = function(elem) {
    var styles = window.getComputedStyle(elem),
        self = this;
    this.elem = elem;
    this.x = Number.parseInt(styles.marginLeft.match(/[0-9]/g).join(''));
    this.y = Number.parseInt(styles.marginTop.match(/[0-9]/g).join(''));
    this.pX = NaN;
    this.pY = NaN;
    /*this.elem.addEventListener('mousedown', function(evt) {
      if(!evt.ctrlKey)
        return;
      evt.preventDefault();
      self.pX = evt.pageX - self.x;
      self.pY = evt.pageY - self.y;
    }, false);*/
    window.addEventListener('mousemove', function(evt) {
      if (!evt.ctrlKey)
        return;
      evt.preventDefault();
      if(!isNaN(self.pX) && !isNaN(self.pY)) {
        self.x = evt.pageX - self.pX;
        self.y = evt.pageY - self.pY;
        self.elem.style.marginLeft = self.x + 'px';
        self.elem.style.marginTop = self.y + 'px';
      }
    }, false);
    window.addEventListener('mouseup', function(evt) {
      if (!evt.ctrlKey)
        return;
      evt.preventDefault();
      self.pX = null;
      self.pY = null;
    }, false);
  };
  var divs =...