View Full Version : Need help with virtual keyboard assignment

03-20-2012, 09:21 AM
I'm studying a little javascript at the moment to learn the basics, but the course book we've got isnt good at all. Thats why I could use help with one assignment in the course, if someone would be so kind and help me understand how to do this assignment. If you can help me with it and comment in an easy to understand way I would be extremely grateful.

I understand basically how to do it, but I dont understand how to write the code.

Thank you!


The assignment is about creating a virtual keyboard in javascript. The HTML-page and the CSS-file are already done and it contains all the tags and connections to javascript that are needed to solve the assignment.

On the HTML-page are all the buttons with calls to javascript. The buttons A-Z, . (dot) , (comma) and SPACE all calls the same function, addLetter, but with different values. The button A calls the function named 'a'.
The ENTER button calls the function addParagraph. There is also a link named Count Letters, when that is clicked the function countLetters is called. The answer on that function should be showed in a alert window, alert().

On the HTML-page there is a section with the tag <div> which has an ID. The ID is the ”output”. This ID can be used for finding this specific nod in the DOM tree. To this nod there should be added new paragraphs.

There shouldnt be made any changes to the HTML-file.

In the javascript-file there are now only the beginning of the two functions that are called when the buttons are clicked. In each function there is a call to alert(), that should be removed.

Create 2 variables outside the functions. The variables should keep track of the paragrapgh where letters are added, and if the paragrapgh is odd or even.
In the function appParagraph() a new paragraph-nod should be created. To this nod a new taxt-nod should be linked. The first variable in 1) should keep track of this textnod. The paragraph-nod should be added as last childnod to the nod with ID 'output'. Every new paragraph-nod should get an attribute ”class”, which value for every 2nd is ”even” and for every other is ”odd”.To keep track of when the value should be which you use the second variable created in 1).
In the function addLetter() there are two things that should be done. First, if the variable in 1) not keep track of a textnod, the function addParagraph() should be called.
Then, the arguments value (the letter) should be added to the end of text in the nod which the variable keeps track of.
In the function countLetters the number of letters should be counted and returned. Letters is only a-z and not dot, comma or SPACE.

HTML and CSS-files cannot be altered in any way. Only write the javascript code in the javascript-file. It shouldnt give any warnings/errors, should be well structured and commented.

The files are index.html, style.css and javascript.js


The HTML-file (index.html)

<!DOCTYPE html>

<title>Virtual keyboard</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
<meta charset="utf-8" />
<section id="typeWriter">
<!-- Divtag where new paragraphs are created -->
<div id="output">
Your created paragrapghs can look like this:
<p class="even">the first paragraf</p>
<p class="odd">the second paragraf</p>
<p class="even">the third paragraf</p>

<!-- The keyboard, containing buttons with connection to javascript -->
<div id="keyboard">
<button onclick="addLetter('q')">Q</button>
<button onclick="addLetter('w')">W</button>
<button onclick="addLetter('e')">E</button>
<button onclick="addLetter('r')">R</button>
<button onclick="addLetter('t')">T</button>
<button onclick="addLetter('y')">Y</button>
<button onclick="addLetter('u')">U</button>
<button onclick="addLetter('i')">I</button>
<button onclick="addLetter('o')">O</button>
<button onclick="addLetter('p')">P</button>
<button onclick="addLetter('a')">A</button>
<button onclick="addLetter('s')">S</button>
<button onclick="addLetter('d')">D</button>
<button onclick="addLetter('f')">F</button>
<button onclick="addLetter('g')">G</button>
<button onclick="addLetter('h')">H</button>
<button onclick="addLetter('j')">J</button>
<button onclick="addLetter('k')">K</button>
<button onclick="addLetter('l')">L</button>
<button onclick="addParagraph()" class="doubleWidth">Enter</button>
<button onclick="addLetter('z')">Z</button>
<button onclick="addLetter('x')">X</button>
<button onclick="addLetter('c')">C</button>
<button onclick="addLetter('v')">V</button>
<button onclick="addLetter('b')">B</button>
<button onclick="addLetter('n')">N</button>
<button onclick="addLetter('m')">M</button>
<button onclick="addLetter(',')">,</button>
<button onclick="addLetter('.')">.</button>
<button onclick="addLetter(' ')" class="doubleWidth">Space</button>
<div id="additionalFunctionality">
<a href="#" onclick="alert('The latest paragraph contains '+countLetters()+' letters'); return false;">Count Letters</a>


The CSS-file (style.css)

#typeWriter {
width: 42em;

#keyboard {
width: 34em;
margin: 0 auto 0 auto;
#keyboard button {
width: 3em;
height: 3em;

#keyboard button.doubleWidth {
width: 6em;

#output {
height: 20em;
overflow: auto;
border: 1px solid gray;
#output p {
margin: 0;
padding: 0.2ex;
#output p.even {
background-color: #DCDCDC;

#output p.odd {
background-color: #9A9A9A;

#additionalFunctionality p a {
color: blue;


The Javascript-file (script.js)

* Here you should create a variable that can keep
* track of the textnod to the paragraph youre writing to

* You should also have a varķable that keeps track of
* how many paragraphs you have, so you can mark them
* with classes even/odd

* This function is called when clicking one
* of the buttons with a letter, dot, comma or space
* Functionparameters:
* c - Variable which contains a character
function addLetter(c){
//This should be removed
alert("Pressed letter: '"+c+"'");

* Here you should check if your global textnod variable has a value,
* if its null then you call addParagraph

* Here you should put the character c to the saved textnod

* This function is called when clicking Enter button
function addParagraph() {
//This should be removed
alert("Add new paragraph");

* Here you create a new paragraph with belonging textnod.
* You should save the textnod to your global textnodvariable.

* Then add the paragraph to DOM-tree to the div-tag that has the id "output"

* You must also mark the paragraph with the class even/odd depending
* on what the previous paragraph was marked as (if its the first paragraph
*then it doesnt matter which of odd and even is choosed.


* This function is called when clicking the link "Count Letters".
function countLetters() {
var count=0;

* Here you count the number of letters (a-z) that are
* in the present paragraph (ie. in your global textnod).
* You should save the number of letters to the variable 'count'.

* Then finish with returning the count variable.
return count;


If anyone wants me to send the files I can PM them or mail them.

Best regards and thank you!!!

03-20-2012, 09:03 PM
We won't do homework assignments for you here. But we can help point you in the right direction. What specific part is difficult for you? Your instructor has given you very clear and detailed instructions, so I suggest just taking it one step at a time and then putting it all together in the end.

03-21-2012, 11:44 AM
Thank you for taking time to reply.
And yes, of course I understand that you wont do my homework. I'm not expecting that someone do that. Its just easier for me to learn if someone shows how to do it instead of reading in a crappy course book. I want to learn and understand this assignment.
Some pointers in the the right direction will be enough, any help is appreciated.

Let's say I defined the 2 variables, txtnod for keeping track of the textnod and paragrph for checking how many paragraphs.
The things I don't understand is how to check the textnod if its null and if so go to addParagraph

Would this be correct in the context?

var txtnod;
var paragrph;
function addLetter(c) {
if (txtnod==null) {

Also how to get the value from clicking the letters on the keyboard and adding it to a textnod.

Also if you have any suggestion for a good javascript book for beginners..?