JSFiddle - React, Tailwind, and code Playground

by Adrian Pop

HTML

<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,700" rel="stylesheet" type="text/css">
    <title>Scratch Card</title>
  </head>

  <body>
    <div class="scratch-container">
      <div id="promo" class="scratchpad"></div>
    </div>
    <div class="promo-container" style="display:none;">
      <div class="promo-code"></div>
      <a href="www.we-know-fun.com" target="_blank" class="btn">Register Now</a>
    </div>

   <script type="text/javascript">
 (function(a){'use strict';function b(c,d){this.$el=a(c),this.options=d,this.init=!1,this.enabled=!0,this._generate()}b.prototype={_generate:function(){return a.support.canvas?void(this.canvas=document.createElement('canvas'),this.ctx=this.canvas.getContext('2d'),'static'===this.$el.css('position')&&this.$el.css('position','relative'),this.$img=a('<img src=""/>').attr('crossOrigin','').css({position:'absolute',width:'100%',height:'100%'}),this.$scratchpad=a(this.canvas).css({position:'absolute',width:'100%',height:'100%'}),this.$scratchpad.bindMobileEvents(),this.$scratchpad.mousedown(a.proxy(function(c){return!this.enabled||void(this.canvasOffset=a(this.canvas).offset(),this.scratch=!0,this._scratchFunc(c,'Down'))},this)).mousemove(a.proxy(function(c){this.scratch&&this._scratchFunc(c,'Move')},this)).mouseup(a.proxy(function(c){this.scratch&&(this.scratch=!1,this._scratchFunc(c,'Up'))},this)),this._setOptions(),this.$el.append(this.$img).append(this.$scratchpad),this.init=!0,this.reset()):(this.$el.append('Canvas is not supported in this browser.'),!0)},reset:function(){var...

CSS

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.scratchpad {
  width: 450px;
  height: 445px;
  border: solid 10px #FFFFFF;
  margin: 0 auto;
}

body {
  background: #efefef;
}

.scratch-container {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
}

@media only screen and (max-width: 480px) {
  .scratchpad {
    width: 400px;
    height: 396px;
  }
  .scratch-container {
    width: 400px !important;
  }
}

/* Custom, iPhone Retina */

@media only screen and (max-width: 320px) {
  .scratchpad {
    width: 290px;
    height: 287px;
  }
  .scratch-container {
    width: 290px !important;
  }
}

.promo-container {
  background: #FFF;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 450px;
  padding: 20px;
  margin: 0 auto;
  text-align: center;
  font-family: 'Open Sans', Arial, Sans-serif;
  color: #333;
  font-size: 16px;
  margin-top: 20px;
}

.btn {
  background: #56CFD2;
  color: #FFF;
  padding: 10px 25px;
  display: inline-block;
  margin-top: 15px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radiuss: 3px;
}

JavaScript

var promoCode = '';
var bg1 = 'http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg';
var bg2 = 'http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg';
var bg3 = 'http://images6.fanpop.com/image/photos/41500000/adorable-puppies-cute-puppies-41538743-590-393.jpg';

var bgArray = [bg1, bg2, bg3];
var selectBG = bgArray[Math.floor(Math.random() * bgArray.length)];

console.log(selectBG);

if (selectBG === bg1) {
  promoCode = 'SCRATCH400';
} else if (selectBG === bg2) {
  promoCode = 'SCRATCH500';
} else if (selectBG === bg3) {
  promoCode = '';
}

$('#promo').wScratchPad({
  // the size of the eraser
  size: 70,
  // the randomized scratch image   
  bg: selectBG,
  // give real-time updates
  realtime: true,
  // The overlay image
  fg: 'https://cdn.glitch.com/2c225b7b-6134-4f2b-9842-1d5d060d9cd4%2Foverlay.png',
  // The cursor (coin) image
  'cursor': 'url("https://cdn.glitch.com/2c225b7b-6134-4f2b-9842-1d5d060d9cd4%2Fcoin1.png") 5 5, default',

  scratchMove: function(e, percent) {
    console.log(percent);
    console.log(promoCode);

    // Show the plain-text promo code and call-to-action when the scratch area is 50% scratched
    if ((percent > 50) && (promoCode != '')) {
      $('.promo-container').show();
      $('body').removeClass('not-selectable');
      $('.promo-code').html('Your code is: ' + promoCode);
    }
  }
});