wrburgess/app-boilerplate.html

## app-boilerplate.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery App Template</title>

  <!-- Added link to the jQuery Library -->
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>

  <!-- Added a link to Bootstrap-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>
<body>

  <script type="text/javascript">

    $(document).ready(function() {

      // =========
      // APP STATE
      // =========

      // Setup our application state object
      var appState = {
        something: '',
        phase: 'start' // possible values: started, something, ended
      }

      // =========
      // EVENT MANAGEMENT
      // =========

      // Add an on click listener to all elements that have the class 'something'
      $('.something').on('click', function() {
        var buttonValue = this.value;
        handleSomething(buttonValue);
      });

      // =========
      // APP LOGIC
      // =========

      // Use a function to initialize our calculator.
      function initializeApp() {
        // reset the appState values
        appState.something = ''
        appState.phase = 'start'

        // clear the display
        refreshDisplay();
      }

      // Do something
      function handleSomething() {
        if (appState.phase === 'something') return; // if calculated, do nothing

        // update appState phase
        appState.phase = 'something';

        // update the screen
        refreshDisplay();
      }

      // =========
      // APP DISPLAY
      // =========

      // Function that pushes appState to the display
      function refreshDisplay() {
        console.log(appState);
      }

      // =========
      // INITIALIZE APP
      // =========

      initializeApp();

    });  // closing $(document).ready()

  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>jQuery App Template</title>

	<!-- Added link to the jQuery Library -->
	<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

	<!-- Added a link to Bootstrap-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	</head>
	<body>

	<script type="text/javascript">

	$(document).ready(function() {

	// =========
	// APP STATE
	// =========

	// Setup our application state object
	var appState = {
	something: '',
	phase: 'start' // possible values: started, something, ended
	}

	// =========
	// EVENT MANAGEMENT
	// =========

	// Add an on click listener to all elements that have the class 'something'
	$('.something').on('click', function() {
	var buttonValue = this.value;
	handleSomething(buttonValue);
	});

	// =========
	// APP LOGIC
	// =========

	// Use a function to initialize our calculator.
	function initializeApp() {
	// reset the appState values
	appState.something = ''
	appState.phase = 'start'

	// clear the display
	refreshDisplay();
	}

	// Do something
	function handleSomething() {
	if (appState.phase === 'something') return; // if calculated, do nothing

	// update appState phase
	appState.phase = 'something';

	// update the screen
	refreshDisplay();
	}

	// =========
	// APP DISPLAY
	// =========

	// Function that pushes appState to the display
	function refreshDisplay() {
	console.log(appState);
	}

	// =========
	// INITIALIZE APP
	// =========

	initializeApp();

	}); // closing $(document).ready()

	</script>
	</body>
	</html>