JSFiddle - React, Tailwind, and code Playground

by Saloni Sharma

HTML

<!DOCTYPE html>
	<title>Homework1</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
	<script src="JS/main.js"></script>

<body ng-app="MyModule">
	<div ng-controller="MyController as ctrl">
		<!-- Create input radio button -->
		<input type="radio" 
			name="color" 
			ng-model="ctrl.color.name" 
			ng-value="ctrl.boxColor">Red
		
		<!-- <input type="radio" 
			name="color" 
			ng-model="ctrl.color.name" 
			ng-value="ctrl.bgColorPink">Pink
		
		<input type="radio" 
			name="color" 
			ng-model="ctrl.color.name" 
			ng-value="ctrl.bgColorOrange">Orange

		<input type="radio" 
			name="color" 
			ng-model="ctrl.color.name" 
			ng-value="ctrl.bgColorYellow">Yellow -->
      
<!-- 		ng-repeat="(key, value) in ctrl.boxColor" -->
		<div class="box" ng-class="ctrl.boxColor">
		Letterpress craft beer typewriter, bitters butcher ennui heirloom celiac. Four dollar toast pork belly 8-bit trust fund, raw denim letterpress shoreditch stumptown food truck locavore venmo typewriter blog. Post-ironic chambray lumbersexual, fashion axe hoodie kitsch swag yuccie organic. DIY hoodie lomo, austin post-ironic literally portland shoreditch pour-over neutra sriracha YOLO selvage thundercats messenger bag.
		</div>

		<!-- <div class="box" ng-class="">
		Tumblr hammock authentic, humblebrag pitchfork ramps listicle cliche distillery ethical 8-bit vice. 3 wolf moon whatever direct trade fanny pack franzen, swag polaroid austin letterpress. Street art health goth everyday carry heirloom hoodie echo park gluten-free irony, viral venmo brunch vegan pop-up. Man braid listicle food truck, fashion axe austin polaroid pop-up shoreditch post-ironic scenester jean shorts synth.
		</div> -->

	</div>
</body>

CSS

.box {
			width: 300px;
			height: 300px;
			background-color: grey;
			margin-top: 50px;
		  margin-left: 100px;
			padding: 25px;
			float: left;
			text-align: justify;
      font-size: 1.15em;
		}
		.red {
			background-color: red;
    }
		
		/* .pink {
		  background-color: pink;
		}
		    .orange {
		  background-color: orange;
		}
		    .yellow {
		      background-color: yellow;
		    }
		.white {
		  color: white;
		}
		.strong {
		  font-weight: bold;
		} */

JavaScript

// HOMEWORK - UI theme picker
var myMod = angular.module("MyModule", []);
myMod.controller("MyController", function() {
	var self = this;

// Create an object of colors to assign name
	self.color = {
		name: "red"
	},
	{
		name: "pink"
	},
	{
		name: "orange"
	},
	{
		name: "yellow"
	}

// Class change using an object 
	self.boxColor = {
		red: true,
		pink: true,
		orange: true,
		yellow: true
	}
});