<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src = "js/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>title</title>
</head>
<body>
<h1 align="center">Welcome to Learning Angular</h1>
<hr>
<!-- Angular way of adding numbers -->
<div class="container" ng-app="app" ng-controller="MainController as main" align="center">
<!-- MainController says the view to make both fnum and snum to 0 -->
<h3>Angular Way</h3>
<p>Enter First Number:</p><input type="number" ng-model="main.fnum">
<p>Enter Second Number:</p><input type="number" ng-model="main.snum" >
<p>Sum is: {{main.fnum + main.snum}}!</p>
<hr>
</div>
<!-- End of Angular Way -->
<!-- jQuery way of adding numbers -->
<div class="container" align="center">
<h3>jQuery way</h3>
<p>Enter First Number:</p><input type="number" id="fnumj">
<p>Enter Second Number:</p><input type="number" id="snumj">
<p>Sum is: <span id="sumj" placeholder = "0"></span>!</p>
<button id="calculate" value="Sum">Sum</button>
<small><p><i>Note: You need a button because jQuery is not responisve.</i></p></small>
<hr>
</div>
<!-- End of jQuery way -->
<footer>
<div align="right">
<small>Created by Dasun Pubudumal</small>
<br>
<small>03/09/2017</small>
</div>
</footer>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>