JSFiddle - React, Tailwind, and code Playground

by nathanlogan

HTML

<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<body>
    <script type="text/jsx">
        // 1) make a react control which accepts a nine letter string and renders a tic tac toe board.  the nine letter string is composed solely of space, capital X, and capital O.
        
        var TTTComponent = React.createClass({
            render: function(){
                return (
                    <table>
                        <tr>
                            <td>{this.props.arr[0]}</td>
                            <td>{this.props.arr[1]}</td>
                            <td>{this.props.arr[2]}</td>
                        </tr>
                        <tr>
                            <td>{this.props.arr[3]}</td>
                            <td>{this.props.arr[4]}</td>
                            <td>{this.props.arr[5]}</td>
                        </tr>
                        <tr>
                            <td>{this.props.arr[6]}</td>
                            <td>{this.props.arr[7]}</td>
                            <td>{this.props.arr[8]}</td>
                        </tr>
                    </table>
                );
            }
        });
        
        React.render( <TTTComponent arr={['x','o',' ','x','o',' ','x','o',' ']} />, document.body );
    
    
        
        
        
        // 2) *after* #1 is done, make a simple class that implements the brain of a tic tac toe program.  it should be something you can play in the debugger console by calling var TTT = new TicTacToe();
        
        var TicTacToe = function() {
            this.player = "X";
            this.board = [' ',' ',' ',' ',' ',' ',' ',' ',' '];
            this.gameFinished = false;
        
            this.runGame = function() {
                var i = 0;
                var currentMove = '';        
        
                while (!this.gameFinished) {
                    currentMove =...

CSS

td {width:30px; height:30px; border:1px solid #ccc; color:navy; text-align:center; v-align:center; font-family: Arial, sans-serif; text-transform:uppercase;}