balaji1359 · July 18, 2019 09:37
diff --git a/ReadME.md b/ReadME.md
diff --git a/result.html b/result.html
 <!doctype html>
 <html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>
    <body>
        <article>
            <h1>Computer Graphics</h1>
            <p>
                Computer graphics are graphics created using computers and the representation of image data
                by a computer specifically with help from specialized graphic hardware and software.

                The interaction and understanding of computers and interpretation of data has been made
                easier because of computer graphics. Computer graphic development has had a significant
                impact on many types of media and have revolutionized animation, movies and the video
                game industry.
            </p>

            <h1>Overview</h1>
            <p>
                The term computer graphics has been used in a broad sense to describe "almost everything on
                computers that is not text or sound".[1] Typically, the term computer graphics refers to
                several different things:
            </p>

            <ul>
                <li>the representation and manipulation of image data by a computer</li>
                <li>the various technologies used to create and manipulate images</li>
                <li>
                    the sub-field of computer science which studies methods for digitally synthesizing and
                    manipulating visual content, see study of computer graphics
                </li>
            </ul>

            <p>
                Computer graphics is widespread today. Computer imagery is found on television, in newspapers,
                for example in weather reports, or for example in all kinds of medical investigation and surgical
                procedures. A well-constructed <a href="http://en.wikipedia.org/wiki/Chart">graph</a> can present
                complex statistics in a form that is easier to understand and interpret. In the media "such graphs
                are used to illustrate papers, reports, thesis", and other presentation material.[2]

                Many powerful tools have been developed to visualize data. Computer generated imagery can be
                categorized into several different types: two dimensional (2D), three dimensional (3D), and animated
                graphics. As technology has improved, 3D computer graphics have become more common, but 2D computer
                graphics are still widely used. Computer graphics has emerged as a sub-field of computer science
                which studies methods for digitally synthesizing and manipulating visual content. Over the past
                decade, other specialized fields have been developed like information visualization, and scientific
                visualization more concerned with "the visualization of three dimensional phenomena (architectural,
                meteorological, medical, biological, etc.), where the emphasis is on realistic renderings of volumes,
                surfaces, illumination sources, and so forth, perhaps with a dynamic (time) component".[3]
            </p>
        </article>

        <section id="result"></section>

        <script>
            function splitByWords (text) {
              // split string by spaces (including spaces, tabs, and newlines)
              var txt = replaceAll(text, /[^a-zA-Z ]/g, " ");
              var wordsArray = txt.split(/\s+/);
              // console.log(wordsArray)
              return wordsArray;
            }

            function replaceAll(str, find, replace) {
              return str.replace(find, replace);
            }

            function createWordMap (wordsArray) {
            // create map for word counts
              var wordsMap = {};
              wordsArray.forEach(function (key) {
                if (wordsMap.hasOwnProperty(key)) {
                  wordsMap[key]++;
                } else {
                  wordsMap[key] = 1;
                }
              });
              return wordsMap;
            }

            function sortByCount (wordsMap) {
            // sort by count in descending order
              var finalWordsArray = [];
              finalWordsArray = Object.keys(wordsMap).map(function (key) {
                return {
                  name: key,
                  total: wordsMap[key]
                };
              });
              finalWordsArray.sort(function (a, b) {
                return b.total - a.total;
              });
              return finalWordsArray;
            }
            // inner html text from article tag
            var element = document.getElementsByTagName('article');
            var text = element.innerText || element.textContent;
            element.innerHTML = text;
            // split and lowercase
            var wordsArray = splitByWords(element[0]['textContent'].toLowerCase());
            // word count
            var wordsMap = createWordMap(wordsArray);
            // sort by count
            var finalWordsArray = sortByCount(wordsMap);
            // DOM maupulation
            var ol = document.createElement('ol');
            document.getElementById('result').appendChild(ol);
            // loop all words and its count into li tag
            finalWordsArray.forEach(function(word){
              var li = document.createElement('li');
              ol.appendChild(li);
              var res = word.name.concat(" ", "(", word.total, ")");
              li.innerHTML += res;
             });
        </script>

    </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Test</title>
	</head>
	<body>
	<article>
	<h1>Computer Graphics</h1>
	<p>
	Computer graphics are graphics created using computers and the representation of image data
	by a computer specifically with help from specialized graphic hardware and software.

	The interaction and understanding of computers and interpretation of data has been made
	easier because of computer graphics. Computer graphic development has had a significant
	impact on many types of media and have revolutionized animation, movies and the video
	game industry.
	</p>

	<h1>Overview</h1>
	<p>
	The term computer graphics has been used in a broad sense to describe "almost everything on
	computers that is not text or sound".[1] Typically, the term computer graphics refers to
	several different things:
	</p>

	<ul>
	<li>the representation and manipulation of image data by a computer</li>
	<li>the various technologies used to create and manipulate images</li>
	<li>
	the sub-field of computer science which studies methods for digitally synthesizing and
	manipulating visual content, see study of computer graphics
	</li>
	</ul>

	<p>
	Computer graphics is widespread today. Computer imagery is found on television, in newspapers,
	for example in weather reports, or for example in all kinds of medical investigation and surgical
	procedures. A well-constructed <a href="http://en.wikipedia.org/wiki/Chart">graph</a> can present
	complex statistics in a form that is easier to understand and interpret. In the media "such graphs
	are used to illustrate papers, reports, thesis", and other presentation material.[2]

	Many powerful tools have been developed to visualize data. Computer generated imagery can be
	categorized into several different types: two dimensional (2D), three dimensional (3D), and animated
	graphics. As technology has improved, 3D computer graphics have become more common, but 2D computer
	graphics are still widely used. Computer graphics has emerged as a sub-field of computer science
	which studies methods for digitally synthesizing and manipulating visual content. Over the past
	decade, other specialized fields have been developed like information visualization, and scientific
	visualization more concerned with "the visualization of three dimensional phenomena (architectural,
	meteorological, medical, biological, etc.), where the emphasis is on realistic renderings of volumes,
	surfaces, illumination sources, and so forth, perhaps with a dynamic (time) component".[3]
	</p>
	</article>

	<section id="result"></section>

	<script>
	function splitByWords (text) {
	// split string by spaces (including spaces, tabs, and newlines)
	var txt = replaceAll(text, /[^a-zA-Z ]/g, " ");
	var wordsArray = txt.split(/\s+/);
	// console.log(wordsArray)
	return wordsArray;
	}

	function replaceAll(str, find, replace) {
	return str.replace(find, replace);
	}

	function createWordMap (wordsArray) {
	// create map for word counts
	var wordsMap = {};
	wordsArray.forEach(function (key) {
	if (wordsMap.hasOwnProperty(key)) {
	wordsMap[key]++;
	} else {
	wordsMap[key] = 1;
	}
	});
	return wordsMap;
	}

	function sortByCount (wordsMap) {
	// sort by count in descending order
	var finalWordsArray = [];
	finalWordsArray = Object.keys(wordsMap).map(function (key) {
	return {
	name: key,
	total: wordsMap[key]
	};
	});
	finalWordsArray.sort(function (a, b) {
	return b.total - a.total;
	});
	return finalWordsArray;
	}
	// inner html text from article tag
	var element = document.getElementsByTagName('article');
	var text = element.innerText \|\| element.textContent;
	element.innerHTML = text;
	// split and lowercase
	var wordsArray = splitByWords(element[0]['textContent'].toLowerCase());
	// word count
	var wordsMap = createWordMap(wordsArray);
	// sort by count
	var finalWordsArray = sortByCount(wordsMap);
	// DOM maupulation
	var ol = document.createElement('ol');
	document.getElementById('result').appendChild(ol);
	// loop all words and its count into li tag
	finalWordsArray.forEach(function(word){
	var li = document.createElement('li');
	ol.appendChild(li);
	var res = word.name.concat(" ", "(", word.total, ")");
	li.innerHTML += res;
	});
	</script>

	</body>
	</html>