brianmarete/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <form>
                    <div class="form-group">
                        <label>First Number:</label>
                        <input type="number" class="form-control" id="first-number">
                    </div>

                    <div class="form-group">
                        <label>Second Number:</label>
                        <input type="number" class="form-control" id="second-number">
                    </div>
                    <input type="submit" class="btn btn-primary" value="Add">
                </form>
            </div>
            <div class="col-md-6">
                <h1 id="result"></h1>
            </div>
        </div>
    </div>

    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
</body>
</html>

## scripts.js
// FRONT-END LOGIC

$(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();

        var firstNumber = parseInt($('#first-number').val());
        var secondNumber = parseInt($('#second-number').val());

        var sum = add(firstNumber, secondNumber);

        $('#result').text(sum);
    })
});

// BUSINESS LOGIC

function add(firstNumber, secondNumber) {
    var result = firstNumber + secondNumber;

    return result;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<title>Document</title>
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-md-6">
	<form>
	<div class="form-group">
	<label>First Number:</label>
	<input type="number" class="form-control" id="first-number">
	</div>

	<div class="form-group">
	<label>Second Number:</label>
	<input type="number" class="form-control" id="second-number">
	</div>
	<input type="submit" class="btn btn-primary" value="Add">
	</form>
	</div>
	<div class="col-md-6">
	<h1 id="result"></h1>
	</div>
	</div>
	</div>

	<script
	src="https://code.jquery.com/jquery-3.3.1.min.js"
	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	crossorigin="anonymous"></script>
	<script src="js/scripts.js"></script>
	</body>
	</html>
	// FRONT-END LOGIC

	$(document).ready(function() {
	$('form').submit(function(event) {
	event.preventDefault();

	var firstNumber = parseInt($('#first-number').val());
	var secondNumber = parseInt($('#second-number').val());

	var sum = add(firstNumber, secondNumber);

	$('#result').text(sum);
	})
	});

	// BUSINESS LOGIC

	function add(firstNumber, secondNumber) {
	var result = firstNumber + secondNumber;

	return result;
	}