HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Typing exercise app

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
exercisetypingapp

Problem

I've been writing a program to improve my Javascript skills.
It's a very simple app for typing practicing.



`var excercise = "The Battle of Westerplatte was the first battle in the Invasion of Poland and marked the start of the Second World War in Europe. Beginning on September 1, 1939, German naval forces and soldiers assaulted the Polish Military Transit Depot (Wojskowa Skladnica Tranzytowa, WST) on the peninsula of Westerplatte, in the harbour of the Free City of Danzig. The depot was manned by fewer than 200 soldiers, but held out for seven days in the face of a heavy attack that included dive bomber attacks.";

var excerciseTextP = document.getElementById('excercisetext');
var textarea = document.getElementById('textarea');
var time = 0;
var isTimeRunning = false;
var intervalId = null;

function appendExcerciseText() {

var text = document.createTextNode(excercise);
excerciseTextP.appendChild(text);
}

/**
* Create html textarea with same size as paragraph with excercise text
*/
function setWidthAndHeightToTexarea() {

var width = excerciseTextP.clientWidth;
var height = excerciseTextP.clientHeight;
textarea.style.width = width + 'px';
textarea.style.height = height + 10 + 'px';
}

function setFocus() {

textarea.focus();
}

function checkWriting(event) {

if (!isTimeRunning) {
isTimeRunning = true;
stopWatch();
}

if (event.target.value.length == excercise.length - 1) {
clearInterval(intervalId); // stop stopwatch
//console.log(time);
wpmSpeed();
}

var lastChar = event.target.value.length;
var typing = String.fromCharCode(event.keyCode);

if (excercise[lastChar] !== typing) {

event.preventDefault(); // cancel event
showCorrectCharacter(excercise[lastChar]);
replaceExcercise();
appendErrorCount();
} else {
showCorrectCharacter('');
}
}

/**
* Replace onscreen excercise
* @return {[type]} [description]
*/
function replaceExcercise() {

var lastChar = event.target.value.length;

Solution

I don't like function setFocus() - set focus to what? I have to look at the code of the function... oh, now I know - you meant setFocusToTextArea! OK. But... is this function necessary? IMHO not - you can simply call textarea.focus().

textarea is bad name for text area. What if you will add in the future some new text areas? Give it the name which clearly says "it is the text area in which the user is typing".

Function names appendErrorCount and errorCount does not say anything that the first one is doing logic and the second updating view.
(showTime is doing something similar to appendErrorCount but their names differ a lot).

Name secondToMinutes suggests that the function just calculate minutes. But is is doing much more! It formats a string with the time value. I would call it formatTimeString or something - why? Consider that you decided to include also hours. It is very easy to extend function implementation to return string in format hh:mm:ss. But the name then will be invalid. And changing name in every reference to function is very boring job.

Context

StackExchange Code Review Q#105035, answer score: 2

Revisions (0)

No revisions yet.