JSFiddle - React, Tailwind, and code Playground

by Yang Tyler

HTML

<script src="https://code.angularjs.org/1.2.26/angular.js"></script>
<div ng-app="MyApp">
    <div ng-controller="MainController">
        <button ng-click="changeLocalStorage()">changeLocalStorage</button>
        <div>{{style}}</div>
        <span ng-class="{'text-danger': style.nfDhuhr}">Test nfDhuhr </span>
        <span ng-class="{'text-mute': style.nfFajr}">Test nfFajr </span>
    </div>
</div>

CSS

.text-danger{
    color: #f00;
}
.text-mute{
    color: #ccc;
}

JavaScript

var myApp = angular.module("MyApp", []);
//create a simple localStorageService
myApp.service("localStorageService", function(){
    this.setItem = function(key, value){
        return localStorage.setItem(key, JSON.stringify(value));
    };
    this.getItem = function(key){
        return JSON.parse(localStorage.getItem(key));
    };
});
myApp.controller("MainController", function($scope, localStorageService){
    var nfFajr = false, nfDhuhr = true, nfAsr= false;
    $scope.changeLocalStorage = function(){
        nfFajr = !nfFajr;
        nfDhuhr = !nfDhuhr;
        nfAsr = !nfAsr;
        
        localStorageService.setItem("style", {"nfFajr": nfFajr, "nfDhuhr": nfDhuhr, "nfAsr": nfAsr});        
        console.log(localStorageService.getItem("style"));
    };
    $scope.changeLocalStorage();
    //watch localstorageGetItem function.
    $scope.$watch(function(){
            return localStorageService.getItem("style");
        }, function(newStyle, oldStyle){
            console.log(newStyle);
            $scope.style = newStyle;
        }, true);
});