JSFiddle - React, Tailwind, and code Playground

by alansouzati

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<div ng-app="theApp">
    <div ng-controller="theCtrl" class="hmc">
        <h2>Help me choose</h2>
        <div ng-repeat="qq in qna" class="up">
            <div ng-show="qq.visi">
                <h3>{{qq.q}}</h3>
                <div ng-repeat="a in qq.as">
                    <div ng-show="a.vivisi">
                        <input type="radio" 
                            name="q{{$parent.$index}}" 
                            value='{{$parent.$index + 1}}{{(opt || ["A","B","C","D"])[$index]}}' 
                            ng-model="qq.selected" 
                            ng-change="updateKey()"
                        >
                            {{a.a}}
                        </input><br/>
                    </div>
                </div>
            </div>
        </div>
        <div ng-hide="yourChoice">
            <h3>Please choose</h3>
        </div>
        <div ng-show="yourChoice" class="choice">
            <h2>Your first choice must be: {{ yourChoice.v[0].sku }}</h2>
            <h2 ng-show="yourChoice.v[1]">Your second choice should be: {{ yourChoice.v[1].sku }}</h2>
            <h2 ng-show="yourChoice.v[2]">Your third choice may be: {{ yourChoice.v[2].sku }}</h2>
            <!--<div>
                <h4 ng-attr-title="{{yourChoice.v[0].sku}}">First choice</h4>
                <img alt="" ng-src="{{yourChoice.v[0].img}}"/><br/>
                <p>{{yourChoice.v[0].name}}</p>
                <p>{{yourChoice.v[0].price}}</p>
            </div>
            <div ng-show="yourChoice.v[1]">
                <h4 ng-attr-title="{{yourChoice.v[1].sku}}">Second choice</h4>
                <img alt="" ng-src="{{yourChoice.v[1].img}}"/><br/>
                <p>{{yourChoice.v[1].name}}</p>
                <p>{{yourChoice.v[1].price}}</p>
            </div>
            <div ng-show="yourChoice.v[2]">
                <h4 ng-attr-title="{{yourChoice.v[2].sku}}">third choice</h4>
 ...

CSS

</style>
<!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> 
<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script> 
<style>
.up {
    vertical-align: top;
    linear-gradient(70deg, black, white);
    background: linear-gradient(135deg, white, lightcyan);
}
.up {
    display: inline-block;
}
.up, .choice > div {
    padding: 10px;
}
.middle h3 {
    text-align: center;
}
.choice {
    text-align: center;
}
.choice div {
    display: inline-block;
    vertical-align: top;
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
.hmc {
    display: table;
}

JavaScript

var app = angular.module('theApp', []);
app.controller('theCtrl', function ($scope) {
    $scope.qna = [{
        "q": "Performance",
        "as": [{a: 'Low'}, {a: 'Medium'}, {a: 'High'}]
    }, {
        "q": "Form Factor",
        "as": [
            {a: "AIO", opt: "A"}, 
            {a: "Most space efficient", opt: "B"},
            {a: "Balance of space and upgradability", opt: "C"},
            {a: "Max Upgradability", opt: "D"},
        ]
    }, {
        "q": "Display Size",
        "as": [{a: '19.5"'}, {a: "21.5"}, {a: "23"}, {a: "27"}]
    }, {
        "q": "Orientation",
        "as": [{a: "Horizontal"}, {a: "Vertical"}]
    }];
    
    // names and prices were easier to add by making an array than inside the sele object
    var names = [
        ["F4J79UT","111","XYZ1"],
        ["F4L01UT","111","XYZ1"],
        ["F4K95UT","111","XYZ1"],
        ["F1K81UT","111","XYZ1"],
        ["F4L21UT","111","XYZ1"],
        ["E3U22UT","111","XYZ1"],
        ["E3T56UT","111","XYZ1"],
        ["F4K91UT","111","XYZ1"],
        ["F4K64UT","111","XYZ1"],
        ["F4L26UT","111","XYZ1"],
        ["F4K03UT","111","XYZ1"],
        ["F4K12UT","111","XYZ1"],
        ["F1L97UT","111","XYZ1"],
        ["F1L11UT","111","XYZ1"],
        ["F4J80UT","111","XYZ1"],
        ["F4K97UT","111","XYZ1"],
        ["F4K67UT","111","XYZ1"],
        ["F4K90UT","111","XYZ1"],
        ["F4K36UT","111","XYZ1"],
        ["E3U21UT","111","XYZ1"],
        ["F4J95UT","111","XYZ1"],
        ["F1K83UT","111","XYZ1"],
        ["F4L16UT","111","XYZ1"],
        ["F1L93UT","111","XYZ1"],
        ["F1L53UT","111","XYZ1"],
        ["F1L25UT","111","XYZ1"],
        ["F4K71UT","111","XYZ1"],
        ["F4L24UT","111","XYZ1"],
        ["F4K24UT","111","XYZ1"],
        ["E3T29UT","111","XYZ1"],
        ["F4K88UT","111","XYZ1"],
        ["F4K72UT","111","XYZ1"],
        ["F4J96UT","111","XYZ1"],
        ["F1L61UT","111","XYZ1"]
    ];
    
    $scope.sele = [
        {k: "1A2A3A", v:["F4J79UT","F4J80UT"]},
...