AngularJS Practice

Practice project for AngularJS

by Soya Natsuki

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<body>
  <div ng-app="selColor" ng-controller="colorCtrl">
    <input style="background-color: {{color}}" ng-model="color" value="{{color}}">
    <button ng-click="changeColor()">&lt;-&gt;</button>
    <input style="background-color: {{color2}}" ng-model="color2" value="{{color2}}">
  </div><br>
  <p> Enter the color name you want to set. </p>

  <script>
    var app = angular.module('selColor', []);
      app.controller('colorCtrl', function($scope){
        $scope.color = "pink";
        $scope.color2 = "lightblue";
        $scope.changeColor = function() {
        	var tmp;
          tmp = $scope.color;
          $scope.color = $scope.color2;
          $scope.color2 = tmp;
        }
      });
  </script>
</body>

CSS

body {
  text-align: center;  
  padding: 20px;
}
input {
  width: 30%;
  height: 230px;
  color: #fff;
  font-size: 45px;
  text-align: center;
}
button {
  margin: 20px;
  width: 50px;
  height: 50px;
}