[Typescript] Color Phase Example

AceInfinity · Apr 6, 2014

Here's a cool example in Typescript I wrote just a few minutes ago. This will allow you to rotate through the colors in the HSL cylinder and apply that to the background color style of the element of the appropriate id attribute.

Demo:

Source:

app.ts

Code:

[NO-PARSE]class ColorPhase {
   btn: HTMLElement;
   token: number;
   hue: number;

   constructor(element: HTMLElement) {
      this.btn = element;
      this.btn.style.backgroundColor = 'hsla(0, 50%, 45%, 1)';
      this.hue = 0;
   }

   morph() {
      this.hue = (this.hue + 1) % 360;
      return 'hsla(' + this.hue + ', 50%, 45%, 1)';
   }

   start() {
      this.token = setInterval(() => this.btn.style.backgroundColor = this.morph(), 50);
   }

   stop() {
      clearTimeout(this.token);
   }
}

window.onload = () => {
   var el = document.getElementById('color-phase');
   var action = new ColorPhase(el);
   action.start();
};[/NO-PARSE]

index.html

Code:

[NO-PARSE]<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>TypeScript - Color Phase</title>
   <link rel="stylesheet" href="app.css" type="text/css" />
   <script src="app.js"></script>
</head>
<body>
   <h1>Color Phase</h1>
   <div id='color-phase' class='color-phase'></div>
</body>
</html>[/NO-PARSE]

app.css

Code:

[NO-PARSE]body {
    font-family: 'Consolas';
}

.color-phase {
   width: 200px;
   height: 70px;
   text-align: center;
}[/NO-PARSE]

[Typescript] Color Phase Example

AceInfinity

Emeritus, Contributor