Old school D3 from simpler times

All examples By author By category About

curran

Full window Github gist

Clock

A clock.

This is a copy of the clock WebComponent on the X-Tag Site, with slight modifications for style only. This demonstrates how you can make WebComponents with the X-Tag library.

See also:

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://x-tag.github.io/js/x-tag-components.js"></script>
  <style>
    .clock {
      font-size: 11em;
      font-family: monospace;
      position:fixed;
      text-align: center;
      top:150;
      left:40;
      
      color:white;
      text-shadow: 
        0px 0px 64px #000000,
        0px 0px 32px #000000,
        0px 0px 16px #000000,
        0px 0px 8px #000000,
        0px 0px 4px #000000,
        0px 0px 2px #000000;
    }
  </style>
</head>
<body>
  
  <x-clock class="clock"></x-clock>
  
  <script>
    xtag.register('x-clock', {
      lifecycle: {
        created: function(){
          this.start();
        }
      },
      methods: {
        start: function(){
          this.update();
          this.xtag.interval = setInterval(this.update.bind(this), 1000);
        },
        stop: function(){
          this.xtag.interval = clearInterval(this.xtag.interval);
        },
        update: function(){
          this.textContent = new Date().toLocaleTimeString();
        }
      },
      events: {
        tap: function(){
          if (this.xtag.interval) this.stop();
          else this.start();
        }
      }
    });
  </script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://x-tag.github.io/js/x-tag-components.js"></script>
  <style>
    .clock {
      font-size: 11em;
      font-family: monospace;
      position:fixed;
      text-align: center;
      top:150;
      left:40;
      
      color:white;
      text-shadow: 
        0px 0px 64px #000000,
        0px 0px 32px #000000,
        0px 0px 16px #000000,
        0px 0px 8px #000000,
        0px 0px 4px #000000,
        0px 0px 2px #000000;
    }
  </style>
</head>
<body>
  
  <x-clock class="clock"></x-clock>
  
  <script>
    xtag.register('x-clock', {
      lifecycle: {
        created: function(){
          this.start();
        }
      },
      methods: {
        start: function(){
          this.update();
          this.xtag.interval = setInterval(this.update.bind(this), 1000);
        },
        stop: function(){
          this.xtag.interval = clearInterval(this.xtag.interval);
        },
        update: function(){
          this.textContent = new Date().toLocaleTimeString();
        }
      },
      events: {
        tap: function(){
          if (this.xtag.interval) this.stop();
          else this.start();
        }
      }
    });
  </script>
</body>
​
    

Modified http://x-tag.github.io/js/x-tag-components.js to a secure url

https://x-tag.github.io/js/x-tag-components.js