JSFiddle - React, Tailwind, and code Playground

by Gary Pyne

HTML

<div ng-app="myApp" ng-controller="clickToggle">

  <div class="circle" ng-class="class" ng-click="changeClass()">1</div>

</div>

CSS

.circle {
  border: 1px solid black;
  background-color: white;
  box-sizing: border-box !important;
  border-radius: 200px !important;
  font: 30px 'Roboto';
  font-weight: 400;
  padding: 10px, 10px, 10px, 10px;
  color: black;
  text-align: center;
  width: 80px;
  height: 80px;
  display: inline-block;
  float: left;
  overflow: hidden;
  line-height: 80px;
}

.circleFilled {
  border: 1px solid black;
  background-color: blue;
  box-sizing: border-box !important;
  border-radius: 200px !important;
  font: 30px 'Roboto';
  font-weight: 400;
  padding: 10px, 10px, 10px, 10px;
  color: black;
  text-align: center;
  width: 80px;
  height: 80px;
  display: inline-block;
  float: left;
  overflow: hidden;
  line-height: 80px;
}

.circle:hover {
  font-weight: 400;
  background: #9fa8da;
  color: #f7f3eb;
  z-index: 9999;
}

JavaScript

var app = angular.module("myApp", []);

app.controller("clickToggle", function($scope) {

  $scope.class = "circle";

  $scope.changeClass = function() {
    if ($scope.class === "circle")
      $scope.class = "circleFilled";
    else
      $scope.class = "circle"
  };

});