<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h2>Microsoft Word Document Count Words! Using JavaScript?</h2>
    <input type="file" accept=".doc,.txt,.docx" onchange="calculateWords()" id="textDoc"/>
    <div>
      <h1 id="fileInformation">File word Count after choose</h1>
    </div>
  </body>

</html>
// Code goes here

function calculateWords() {


    if (window.File && window.FileReader && window.FileList && window.Blob) {

        console.log("words");
        var doc = document.getElementById("textDoc");
        var f = doc.files[0];
        //var f = event.target.files[0];

        //do your stuff!

        if (!f) {
            alert("Failed to load file");
            //validate file types yet to come
        } else if (false) {
            alert(f.type + " is not a valid text file.");
        } else {
            
            var r = new FileReader();//create file reader object
            r.readAsText(f);//read file as text

            //attach function to execute when loading file finishes. 
            r.onload = function (e) {
                var contents = e.target.result;
                var res = contents.split(" ");
                console.log(res.length);
                var fileInformation = "word Count = "+res.length;
            var info = document.getElementById("fileInformation");
            info.innerHTML = fileInformation;

            }
        }


    } else {
        alert('The File APIs are not fully supported by your browser.');
    }

}
/* Styles go here */