Created
July 30, 2018 09:37
-
-
Save Omi0/75934f47b95f23c09508af38df1558da to your computer and use it in GitHub Desktop.
Task Result
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
/** | |
* There are 3 main concerns of this approach | |
* 1st. Input text trimming functions might goes wrong if some unforseen characters entered. Thus more information regarding trimming logic shall be given. | |
* 2nd. The length of the processed text and its processing time shall be checked | |
*/ | |
class WordCounter { | |
constructor(inputElement, outputElement) { | |
this.inputElement = inputElement; | |
this.outputElement = outputElement; | |
this.text = inputElement.innerText || inputElement.textContent; | |
this.words = []; // string[] | |
this.result = []; // {word: string, counter: number}[] | |
this.init(); | |
} | |
init() { | |
this.words = this.trimmedText().split(" "); | |
if (this.words.length) this.countWords(); | |
if (this.result.length) this.renderResult(); | |
} | |
/** | |
* Trimming junked characters from text | |
* @return string | |
*/ | |
trimmedText() { | |
let trimmed = this.text.replace(/[()\[\]\t\r\n\r.,"':]/g, ' '); | |
// Removing extra spaces resulted earlier | |
return trimmed.replace(/ +/g, ' '); | |
} | |
/** | |
* Counting words and populating result array | |
*/ | |
countWords() { | |
this.words.forEach((word, index) => { | |
let resultIndex = this.result.map(el => el.word).indexOf(word.toLowerCase()); | |
if (resultIndex === -1) { | |
// adding new value | |
this.result.push({ | |
word: word.toLowerCase(), | |
counter: 1 | |
}); | |
} else { | |
// incrementing counter | |
this.result[resultIndex].counter++; | |
} | |
}) | |
} | |
/** | |
* Processing result array and populating outputElement | |
*/ | |
renderResult() { | |
// defining output DOM element | |
let ol = document.createElement("ol"); | |
//sorting result array by counter descending | |
this.result.sort((a, b) => b.counter - a.counter).forEach(el => { | |
let li = document.createElement("li"); | |
let text = document.createTextNode(el.word + "\u00A0\u00A0(" + el.counter + ")"); | |
li.appendChild(text); | |
ol.appendChild(li); | |
}) | |
this.outputElement.appendChild(ol); | |
} | |
} | |
new WordCounter(document.getElementsByTagName("article")[0], document.getElementById("result")); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment