Skip to content

Instantly share code, notes, and snippets.

@drdmitry
Created April 20, 2019 09:58
Show Gist options
  • Select an option

  • Save drdmitry/597353970386520da2215614a0c86a14 to your computer and use it in GitHub Desktop.

Select an option

Save drdmitry/597353970386520da2215614a0c86a14 to your computer and use it in GitHub Desktop.
JavaScript Coding Challenge Result
<!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>
// Your code
const nodeStart = document.querySelector('article');
const nodeResult = document.getElementById('result');
const hash = {
// 'computer': 1,
};
const extractText = (text, hash) => {
const re = new RegExp(/\S+/g);
let reResult
while(re.exec(text)) {
// fill hash
};
};
const traverseDOM = (node, hash) => {
console.log(node);
const children = node.childNodes;
console.log(children);
const len = children.length;
console.log('len', len);
if (len === 0) {
console.log(node.innerText);
extractText(node.innerText, hash);
return;
}
for (let i = 0; i < len; i++) {
const nodeItem = children[i];
console.log(nodeItem);
traverseDOM(nodeItem, hash);
}
};
const sortByOccurences = (hash) => {
// const arr = Object.keys(hash).map().sort();
};
const showResults = (node, arr) => {
nodeList = document.createElement('ol');
arr.forEach(key => {
const number = hash[key];
const nodeElement = document.createElement('li');
nodeElement.innerText = `${key} (${number})`;
nodeList.appendChild(nodeElement);
});
node.appendChild(nodeList);
};
traverseDOM(nodeStart, hash);
const arr = sortByOccurences(hash);
showResults(nodeResult, arr);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment