JSFiddle - React, Tailwind, and code Playground

by Ananth Arumugasamy

HTML

<html ng-app="myApp">
    <head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
        </head>
        <body>
<div class="content" ng-controller="RegisterCtrl">

<form class="form-horizontal">

  <ul class="nav nav-tabs">
    <li ng-repeat="step in steps" ng-class="{active: $index==getCurrentStepIndex()}">
      <a href="javascript:void(0)" ng-click="goToStep($index)">{{step}}</a>
    </li>
  </ul>
  <div ng-switch on="selection">

    <!-- First Step -->
    <div ng-switch-when="Step 1">
      <div class="row">
        <div class="span4">
          <a href="javascript:void(0);" class="circle">A</a>
        </div>
        
      </div>
    </div>

    <!-- Second Step -->
          
    <div ng-switch-when="Step 2">
        <div id="gradient"></div>
    </div>

    <!-- Third Step -->
    <div ng-switch-when="Step 3">
        <h3>Function for getting the excel code</h3>
        <a href="http://jsfiddle.net/ananthsangari/3mhkLook/3/" target="_blank">Check this fiddle</a>
        <input type="text" id="numberCode"/>
<button id="buttonCode" onclick="numberToCode()">Click</button>
<p id="paraCode"></p>
        </div>
      
      
      <!-- Fourth Step -->
      <div ng-switch-when="Step 4">
          <h3>Function for getting number conversion</h3>
        <a href="http://jsfiddle.net/ananthsangari/k1mqyka2/1/" target="_blank">Check this fiddle</a>
          <input type="text" id="numberLetter"/>
<button id="bLetter" onclick="numberToLetter()">Click</button>
<p id="paraLetter"></p>
    </div>
  </div>
  <div class="clearfix"></div>
  <ul...

CSS

.content{
    margin: 10px 0 0 10px;
}

.span4 a, .span4 a:hover {
	position: relative;
    color: rgba(0,0,0,1);
    text-decoration: none;
    background-color: rgba(147,220,105,1);
    font-family: 'Arial';
    font-weight: 700;
    font-size: 5em;
    display: block;
    line-height:100px;
    text-shadow: 0px 4px rgba(0,102,0,1);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 9px 0px rgba(0,102,0,1), 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px rgba(0,102,0,1), 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px rgba(0,102,0,1), 0px 9px 25px rgba(0,0,0,.7);
    
	width: 100px;
  height: 100px;
	text-align: center;
	
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
}

a:active {
    -webkit-box-shadow: 0px 3px 0px rgba(0,102,0,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px rgba(0,102,0,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(0,102,0,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    //top: 6px;
}

a.circle{
  border-radius: 50%;
  display: inline-block;
  margin: 25px; 
}

#gradient{
    width:349px;
                height:301px;
                background-color:#0f0f0f;
                filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#0f0f0f, endColorstr=#1fb530);
                background-image:-moz-linear-gradient(left, #0f0f0f 0%, #1fb530 25%, #b9c242 54%, #050a0d 100%);
                background-image:linear-gradient(left, #0f0f0f 0%, #1fb530 25%, #b9c242 54%, #050a0d 100%);
                background-image:-webkit-linear-gradient(left, #0f0f0f 0%, #1fb530 25%, #b9c242 54%, #050a0d 100%);
                background-image:-o-linear-gradient(left, #0f0f0f 0%, #1fb530 25%, #b9c242 54%, #050a0d 100%);
                background-image:-ms-linear-gradient(left, #0f0f0f 0%, #1fb530 25%,...

JavaScript

// Declare app level module which depends on filters, and services
var app = angular.module('myApp', ['ui.bootstrap']);


app.controller('RegisterCtrl', function($scope, $location) {

  $scope.steps = [
    'Step 1',
    'Step 2',
    'Step 3',
    'Step 4'
      ];
  $scope.selection = $scope.steps[0];

  $scope.getCurrentStepIndex = function(){
    // Get the index of the current step given selection
    return _.indexOf($scope.steps, $scope.selection);
  };

  // Go to a defined step index
  $scope.goToStep = function(index) {
    if ( !_.isUndefined($scope.steps[index]) )
    {
      $scope.selection = $scope.steps[index];
    }
  };

  $scope.hasNextStep = function(){
    var stepIndex = $scope.getCurrentStepIndex();
    var nextStep = stepIndex + 1;
    // Return true if there is a next step, false if not
    return !_.isUndefined($scope.steps[nextStep]);
  };

  $scope.hasPreviousStep = function(){
    var stepIndex = $scope.getCurrentStepIndex();
    var previousStep = stepIndex - 1;
    // Return true if there is a next step, false if not
    return !_.isUndefined($scope.steps[previousStep]);
  };

  $scope.incrementStep = function() {
    if ( $scope.hasNextStep() )
    {
      var stepIndex = $scope.getCurrentStepIndex();
      var nextStep = stepIndex + 1;
      $scope.selection = $scope.steps[nextStep];
    }
  };

  $scope.decrementStep = function() {
    if ( $scope.hasPreviousStep() )
    {
      var stepIndex = $scope.getCurrentStepIndex();
      var previousStep = stepIndex - 1;
      $scope.selection = $scope.steps[previousStep];
    }
  };
});





//Fourth

var th = ['','thousand','million', 'billion','trillion'];
var dg = ['zero','one','two','three','four', 'five','six','seven','eight','nine']; 
var tn = ['ten','eleven','twelve','thirteen', 'fourteen','fifteen','sixteen', 'seventeen','eighteen','nineteen'];
var tw = ['twenty','thirty','forty','fifty', 'sixty','seventy','eighty','ninety']; 

function q2(s)
{  
    s = s.toString(); 
    s =...