JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="container">
  <div id="digital">
    <span id="y"></span>.<span id="m"></span>.<span id="d"></span> <span id="h"></span>:<span id="i"></span>:<span id="s"></span>
  </div>
  <canvas id="HorizontalBarDigitalClock"></canvas>
</div>

CSS

body {
  background-color:#000;
  padding:0;
  margin:0;
  overflow:hidden;
  color:#fff;
}

#container {
}

#digital {
  opacity:0.70;
  border-radius:5px;
  padding:5px;
  margin:10px 10px 5px 10px;
  color:#fff;
  font-family:'Arial';
  font-weight:bold;
  background-color:#000;
  text-shadow:0 1px 1px rgba(0,0,0,0.3);
}

#HorizontalBarDigitalClock {
  opacity:0.70;
}

JavaScript

// forked from _tetsuwo's "Horizontal Bar Digital Clock - 1.0" http://jsdo.it/_tetsuwo/eriy
/**
 *  [HorizontalBarDigitalClock feat. Flickr]
 *
 *  Author  : tetsuwo.oishi
 *  Twitter : @_tetsuwo
 *  Blog    : http://tetsuwo.tumblr.com/
 *  Version : 1.0 - feat. Flickr
 *  Note    : http://jsdo.it/tetsuwo/eriyをFlickr連動にしてみました。
 */
HorizontalBarDigitalClock = new function(){

  var SCREEN_WIDTH = window.innerWidth;
  var SCREEN_HEIGHT = window.innerHeight;
  var CANVAS_WIDTH = SCREEN_WIDTH - 20;
  var BAR_HEIGHT = 20;
  var BAR_MARGIN_BOTTOM = 5;
  var QUERY = ['sea']; // 'volcano', 'sumo', 'soccer', 'wc2010', 'sea'

  var cvs;
  var ctx;
  var timerID,per,beforeSec,beforeMin = null;
  var photo = {};
  var LOADED = false;
  var FIRST = true;

  var colors = {
    y:'#ff1e1e',
    m:'#ff1e8e',
    d:'#8e1eff',
    h:'#1e8eff',
    i:'#1eff8e',
    s:'#8eff1e'
  };

  var $ = function(id){return document.getElementById(id);};

  this.init = function()
  {
    cvs = $('HorizontalBarDigitalClock');

    if (cvs && cvs.getContext)
    {
      ctx = cvs.getContext('2d');
      setting();
      enterFrame();
      timerID = setInterval(enterFrame, 1000);
      window.addEventListener('resize', resize, false);
    }
    HorizontalBarDigitalClock.api((Math.floor(Math.random() * QUERY.length)));
    beforeSec = new Date().getSeconds();
    beforeMin = new Date().getMinutes();
  };

  this.api = function(index)
  {
    var u = 'http://www.flickr.com/services/rest/?'+[
      'api_key='       + '60078fa291af67d3f1bc3494238eefe5', // 他で使わないでちょ
      'method='        + 'flickr.photos.search',
      //'text='          + encodeURIComponent(QUERY[index]),
      'tags='          + encodeURIComponent(QUERY[index]),
      'per_page='      + 6,
      'sort='          + 'interestingness-desc', // relevance,interestingness-desc,date-taken-desc
      'format='        + 'json',
      'media='         + 'photo',
      'is_common='     + 'true',
      'content_type='  + '1',
     ...