JSFiddle - React, Tailwind, and code Playground

by meatHucker

HTML

<div class="bear-wrapper">
    <div class="bear-container">
        <div class="bear-controls">
            <a id="bear-left" class="left">left</a>
            <a id="bear-right" class="right">right</a>
            <a id="bear-middle" class="btm">btm</a>
            <div class="speach">
                <div id="speach-text" class="text"> Hello </div>
            </div>
        </div>
        <img src="/library/images/600-bear.png" alt="" class="">
    </div>
</div>

JavaScript

function initBearBrain(){
    var model = new BearModel();
    var controller = new BearController(model);
    var view = new BearView(controller);
}

function BearModel(){
    var self = this;
    var heading = "Hello";
    var language = "Ola";
    var bearMiddle = '';
    var bearMode = [
            {term:'hello', active: false},
            {term:'colors', active: false},
            {term:'numbers', active: false}, 
            {term:'days', active: true}, 
            {term:'seasons', active: false},
            {term:'months', active: false}, 
            {term:'time', active: false}, 
            {term:'space', active: false}, 
            {term:'people', active: false},
            {term:'senses', active: false}
        ];

    //collection of observers 
    this.observers = [];
    //add to the collection of observers
    this.registerObserver = function(observer){
        self.observers.push(observer);
    }
    //Iterate over observers, calling their update method
    this.notifyAll = function(){
        self.observers.forEach(function(observer){
            observer.update(self);
        })
    }
    //Pass this, as its the object we want to affect. Heading is the   
    //name of the property we want it to be attached to. Than we 
    //define the accessor and assignment functions
    Object.defineProperty(this, "heading",{
        get: function() { return heading; },
        set: function(value) {
            heading = value;
            //call notifyAll in the assignment function     
            this.notifyAll();
        }
    });
    Object.defineProperty(this, "language",{
        get: function() { return language; },
        set: function(value) {
            language = value;
            //call notifyAll in the assignment function     
            this.notifyAll();
        }
    });

    Object.defineProperty(this, "bearMode",{
        get: function() { return bearMode; },
        set: function(value) {
            console.log('set Bear...