JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<ol>
    <li>Al clickear sobre las opciones deberia cambiar el color segun el estado.</li>
    <li>agregar una clase que muestre o oculte el status.</li>
</ol>
<div id="my-app" ng-app="myWarnings" ng-controller="MainCtrl">
    <div id="status" ng-show="data.warningVisible">
        <div class="status-rec" ng-class="data.currentWarning">
            <p>{{data.currentWarning}}</p>
        </div>
    </div>
    <form action="">
        <label ng-repeat="warning in data.warnings">
            <span>{{warning}}</span>
            <input type="radio" name="status" value="{{warning}}" ng-model="data.currentWarning" ng-checked="$index === 0" ng-click="logOriginal()">
        </label>
    </form>
    <form action="">
        <input type="checkbox" name="status" ng-model="data.warningVisible">
        <label>Visible</label>
    </form>

</div>

CSS

form {
    text-align: center;
    display: block;
    width: 100%;
    padding: 10px;
}

input,
label {
    display: inline-block;
}

label {
    margin-right: 1em;
    padding: 0 5px;
}

#status {
    text-align: center;
}

.status-rec {
    border: 1px solid #aaa;
    display: inline-block;
    width: 80px;
    height: 80px;
    padding: 10px;
    border-radius: 20px;
    background: white;
    margin: 20px;
}

.status-rec p {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    padding: 20px 0;
}

.status-rec.alert {
    background: red;
    color: #fff;
}

.status-rec.warning {
    background: orange;
    color: #fff;
}

.status-rec.ok {
    background: green;
    color: #fff;
}

JavaScript

var data = function() {
        var orig = {
            warnings: ["general", "alert", "warning", "ok"],
            warningVisible: true
        },
        self = this;
        for( property in orig ) {
            self[property] = orig[property];
        };
        console.log(self);
    },
	originalConfig = new data(),
	newConfig = new data(),
    app = angular.module('myWarnings', []);
app.controller('MainCtrl', function($scope) {
    $scope.data = newConfig;
    $scope.data.currentWarning = $scope.data.warnings[0];
    $scope.data1 = originalConfig;
    $scope.logOriginal = function(){
    	console.log($scope.data1);
    }
});