JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<div id="container"></div>

CSS

/* editable */
#slider { width: 640px; }
.slide { width: 320px; height: 240px; }
.playing .slide { width: 640px; height: 480px; }

/* not editable */
#slider { overflow: hidden; }

#wrapper, .slide, .slide canvas {
    -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;
}

#wrapper:before, #wrapper:after { content: " "; display: table; }
#wrapper:after { clear: both; }

.playing #wrapper { width: 10000px; }

.slide {
    float: left;
    overflow: hidden;
    position: relative;
}

.slide canvas {
    width: 110%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}

JavaScript

var App = {
    container: document.getElementById("container"),
    slider: document.createElement("div"),
    wrapper: document.createElement("div"),
    slides: [],
    canvases: [],
    times: [],
    currentSlide: 0,
    uploadField: document.createElement("input"),
    durationField: document.createElement("input"),
    startButton: document.createElement("button"),
    
    playEntity: "&#9654;",
    stopEntity: "&#9632;",
    
    playing: false,
    timer: null
};

App.loadImage = function(event) {
    var
        slide = document.createElement("div"),
        canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d"),
        reader = new FileReader();
    
    reader.onload = function(evt) {
        var img = new Image();
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
        }
        img.src = evt.target.result;
    }
    reader.readAsDataURL(event.target.files[0]);
        
    slide.className = "slide";
    slide.appendChild(canvas);
    
    this.value = "";
    
    wrapper.appendChild(slide);

    App.times.push((App.slider.offsetWidth * -App.slides.length) + "px");
    
    App.canvases.push(canvas);
    App.slides.push(slide);
    
    if(App.slides.length > 1) {
        App.startButton.style.display = "inline-block";
    }
}

App.init = function() {
    var
        p = document.createElement("p"),
        uploadLabel = document.createElement("label"),
        durationLabel = document.createElement("label");
    
    this.uploadField.type = "file";
    this.uploadField.id = "upload-field";
    this.uploadField.addEventListener("change", this.loadImage, false);
    
    uploadLabel.appendChild(document.createTextNode("Upload image: "));
    uploadLabel.appendChild(this.uploadField);
    p.appendChild(uploadLabel);
    
    this.durationField.type = "number";
    this.durationField.value = 5;

   ...