NickFoden/app.js

## app.js

$(document).ready(function(){

  $('.form').submit(function(event){
  	event.preventDefault();
    var user_text = $('.form :input').val();
    wordCount(user_text);
    uniqueWordCount(user_text);
    averageWordLength(user_text);
    $('.text-report').removeClass('hidden');
  });


  function wordCount(text){
    var words = text.trim().split(" ");
  	var count = words.length;
    console.log(count);
  	$('.js-word-count').text(count);
  }

  function uniqueWordCount(text){
    var unique =[];
    var words = text.trim().split(" ");
    for (i = 0; i < words.length; i++){
      if (unique.indexOf(words[i]) === -1) {
        unique.push(words[i]);
      }
    }
  	var uniqueCount = unique.length ;
  	$('.js-unique-word-count').text(uniqueCount);
  }

  function averageWordLength(text){
    var words = text.trim().split(" ");
    var totalWords = words.length;
    var str = words.join("").length;

  	var averageWord = str/totalWords ;
  	$('.js-average-word-length').text(averageWord);
  }

});


## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Text analyzer</title>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="container">
        <main>
            <h1>Text analzyer</h1>
            <p>Paste in text below, submit, and get some basic stats back.</p>
            <form class="form">
                <div>
                    <label for="user-text">Text to analyze</label>
                    <textarea cols="60" rows="20" id="user-text" name="user-text" placeholder="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." required></textarea>
                </div>
                <div>
                    <button type="submit">Analyze it!</button>
                </div>
            </form>

            <dl class="hidden text-report">
                <dt>Word count</dt>
                <dd><span class="js-word-count"></span></dd>

                <dt>Unique word count</dt>
                <dd><span class ="js-unique-word-count"></span></dd>

                <dt>Average word length</dt>
                <dd><span class ="js-average-word-length"></span></dd>
            </dl>
        </main>
    </div>

    <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

## main.css
* {
  box-sizing: border-box
}

body {
  font-family: 'Roboto', sans-serif;
}

.container {
  padding: 30px;
}

main {
  max-width: 960px;
  margin: 0 auto;
}

label {
  display: block;
}

.hidden {
  display: none;
}

.text-report dt:after {
  content: ": ";
}

.js-word-count {
;
	}

.js-unique-word-count {
	;
	}

.js-average-word-length {
;
	}

	$(document).ready(function(){

	$('.form').submit(function(event){
	event.preventDefault();
	var user_text = $('.form :input').val();
	wordCount(user_text);
	uniqueWordCount(user_text);
	averageWordLength(user_text);
	$('.text-report').removeClass('hidden');
	});


	function wordCount(text){
	var words = text.trim().split(" ");
	var count = words.length;
	console.log(count);
	$('.js-word-count').text(count);
	}

	function uniqueWordCount(text){
	var unique =[];
	var words = text.trim().split(" ");
	for (i = 0; i < words.length; i++){
	if (unique.indexOf(words[i]) === -1) {
	unique.push(words[i]);
	}
	}
	var uniqueCount = unique.length ;
	$('.js-unique-word-count').text(uniqueCount);
	}

	function averageWordLength(text){
	var words = text.trim().split(" ");
	var totalWords = words.length;
	var str = words.join("").length;

	var averageWord = str/totalWords ;
	$('.js-average-word-length').text(averageWord);
	}

	});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Text analyzer</title>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
	<link rel="stylesheet" type="text/css" href="main.css">
	</head>
	<body>
	<div class="container">
	<main>
	<h1>Text analzyer</h1>
	<p>Paste in text below, submit, and get some basic stats back.</p>
	<form class="form">
	<div>
	<label for="user-text">Text to analyze</label>
	<textarea cols="60" rows="20" id="user-text" name="user-text" placeholder="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." required></textarea>
	</div>
	<div>
	<button type="submit">Analyze it!</button>
	</div>
	</form>

	<dl class="hidden text-report">
	<dt>Word count</dt>
	<dd><span class="js-word-count"></span></dd>

	<dt>Unique word count</dt>
	<dd><span class ="js-unique-word-count"></span></dd>

	<dt>Average word length</dt>
	<dd><span class ="js-average-word-length"></span></dd>
	</dl>
	</main>
	</div>

	<script
	src="https://code.jquery.com/jquery-3.1.1.min.js"
	integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
	crossorigin="anonymous"></script>
	<script type="text/javascript" src="app.js"></script>
	</body>
	</html>
	* {
	box-sizing: border-box
	}

	body {
	font-family: 'Roboto', sans-serif;
	}

	.container {
	padding: 30px;
	}

	main {
	max-width: 960px;
	margin: 0 auto;
	}

	label {
	display: block;
	}

	.hidden {
	display: none;
	}

	.text-report dt:after {
	content: ": ";
	}

	.js-word-count {
	;
	}

	.js-unique-word-count {
	;
	}

	.js-average-word-length {
	;
	}