JSFiddle - React, Tailwind, and code Playground

Proyecto Ejemplos

by Yolanda Robles

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div ng-app>
     <h2>Ejemplificator</h2>

    <br/>
    <div ng-controller="EjemplosCtrl">
        <div class="container-fluid Categoria" ng-repeat="category in ejemplos">
            <!--pintamos el contenido de la categoría --> <span class="">{{category.nombre}}</span>

            <div class="row contenidoCategoria">
                <div class="col-xs-3" ng-repeat="ejemplo in category.elementos">
                    <!--pintamos el contenido del ejemplo -->
                    <div class="box {{randomColor()}}">
                        <div class="">{{ejemplo.nombre}}</div> <a href="{{ejemplo.url}}" target="_blank">Link</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.Categoria {
    margin-bottom:10px;
    font-weight:bold;
    font-size: 14pt;
    padding:5px;
}
.contenidoCategoria {
    margin-bottom:10px;
}
.box {
    border:2px solid #000;
    padding:5px;
    font-weight:normal;
    min-height:80px;
    font-size:11pt;
    cursor:pointer;
}
.color0 {
    background-color: #409da5;
}
.color1 {
    background-color: #da8515;
}
.color2 {
    background-color: #4849a6;
}
.color3 {
    background-color: #cd432d;
}
.color4 {
    background-color: #228b22;
}
.color5 {
    background-color: #f0f204;
}
a {
    color:white;
    text-decoration:underline;
}

JavaScript

function clsEjemplo(nombre, desc, url) {
    this.nombre = nombre;
    this.descripcion = desc;
    this.url = url;
    this.color = '';
}

function clsCategoriaEjemplo(nombre, descripcion) {
    this.nombre = nombre;
    this.descripcion = descripcion;
    this.elementos = [];
}

// Controlador Angular
function EjemplosCtrl($scope) {

    $scope.ejemplos = [];

    var categoriaPlantillas = new clsCategoriaEjemplo("Plantillas",
        "Plantillas Básicas");

    // Añadimos cada uno de los ejemplos por categoría
    var ejemplo1 = new clsEjemplo('xx', '', 'www.google.es');
    //ejemplo1.color = randomColor();
    categoriaPlantillas.elementos.push(ejemplo1);

    var ejemplo2 = new clsEjemplo('xx', '', 'www.jsfiddle.net');
    categoriaPlantillas.elementos.push(ejemplo2);

    // Añadimos la categoría al array de ejemplos
    $scope.ejemplos.push(categoriaPlantillas);

    var categoriaBasicosJavascript = new clsCategoriaEjemplo("Javascript Básicos",
        "Básicos de Javascript: mínimo, máximo..");

    var ejemplo3 = new clsEjemplo('xx', '', 'www.jsfiddle.net');
    categoriaBasicosJavascript.elementos.push(ejemplo3);

    // Añadimos la categoría al array de ejemplos
    $scope.ejemplos.push(categoriaBasicosJavascript);

    $scope.randomColor = function () {

        // Declaramos el array con colores
        var colores = ['#409da5',
            '#da8515',
            '#4849a6',
            '#cd432d',
            '#228b22',
            '#f0f204'];

        // Generamos un número aleatorio entre 0 y 5
        var rand = Math.floor((Math.random() * 5));
        return "color" + rand;
    };

}