Menu
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 solve it for me 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.
[B][COLOR=”DarkRed”]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.
1. 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.2. 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).3. 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.4. 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 (typewriters HTML), style.css and javascript.js (the javascript where the code should be written. The alert() functions in the javascript are only placeholders and should be removed.
The DOM-tree is essential in this assignment
o find a section with a certain ID.
document.getElementByID(id)
To create a new paragraph-nod.
document.createElement(name)
To create a new text-nod to a paragraph-nod.
document.createTextNode(text)
To add a text-nod to a paragraph-nod or to add a nod to the DOM-tree.
node.appendChild(node)
To add more text to a text-nod.
textnode.appendData(text)
To set an attributes value on a nod.
node.setAttribute(name,value)
The number of letters in a textstring is in the attribute length.
The HTML-file (index.html)
[code=html]
<!DOCTYPE html>
<html>
<head>
<title>Virtual keyboard</title>
<link rel=”stylesheet” href=”style.css” />
<script type=”text/javascript” src=”script.js”></script>
<meta charset=”utf-8″ />
</head>
<body>
<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>
–>
</div>
<!– The keyboard, containing buttons with connection to javascript –>
<div id=”keyboard”>
<div>
<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>
</div>
<div>
<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>
</div>
<div>
<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>
</div>
<div id=”additionalFunctionality”>
<p>
<a href=”#” onclick=”alert(‘The latest paragraph contains ‘+countLetters()+’ letters’); return false;”>Count Letters</a>
</p>
</div>
</section>
</body>
</html>
The CSS-file (style.css)
[code]
#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)
[code]
/*
* 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.
[COLOR=”DarkRed”][B]Best regards and thank you!!!