Create 5 box with json class specification.

by Phongphan Bunlom

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js"></script>
<main>

</main>

CSS

header, main, footer { padding-left: 0px; }
.box { width: 100px; height: 100px; }
.red-bg { background-color: #f00; }
.yellow-bg { background-color: #ff0; }
.white-text { color: #fff; }
.black-text { color: #000; }

JavaScript

var db = {
    "class" : [
        {
            "appearance": ["red-bg", "white-text"]
        },
        {
            "appearance": ["yellow-bg", "black-text"]
        },
        {
            "appearance": ["red-bg"]
        },
        {
            "appearance": ["yellow-bg"]
        },
        {
            "appearance": [""]
        }
    ]
}
$.each(db.class, function (key, data) {
        console.log(data);
        $('main').append('<div class="box">text</div>');
        for (i=0; i<data.appearance.length; i++) {
            $('.box:last-child').addClass(data.appearance[i]);
        }
});