Ten Simple JavaScript Exercises

by justi

HTML

<div class="wrapper">
    
    <h1>Ten Simple JavaScript Exercises </h1>
    
    <div>1.
        <p><input id="input1a" value="99"></p>
        <p><input id="input1b" value="3"></p>
        <p><button id="submit1">Find max</button> <button class="clear" data-number="1">Clear console</button></p>
        <div id="console1"></div>
    </div>
    
    <div>2.
        <p><input id="input2a" value="99"></p>
        <p><input id="input2b" value="3"></p>
        <p><input id="input2c" value="199"></p>
        <p><button id="submit2">Find max</button> <button class="clear" data-number="2">Clear console</button></p>
        <div id="console2"></div>
    </div>
    
    <div>3.
        <p><input id="input3" value="a"></p>
        <p><button id="submit3">Is it a vowel?</button> <button class="clear" data-number="3">Clear console</button></p>
        <div id="console3"></div>
    </div>
    
    <div>4.
        <p><input id="input4" value="this is fun"></p>
        <p><button id="submit4">Translate</button> <button class="clear" data-number="4">Clear console</button></p>
        <div id="console4"></div>
    </div>
    
    <div>5.
        <p><input id="input5a" value="1"></p>
        <p><input id="input5b" value="2"></p>
        <p><input id="input5c" value="3"></p>
        <p><input id="input5d" value="4"></p>
        <p><button id="submit5a">Sum</button> <button id="submit5b">Multiply</button> <button class="clear" data-number="5">Clear console</button></p>
        <div id="console5"></div>
    </div>
    
    <div>6.
        <p><input id="input6" value="jag testar"></p>
        <p><button id="submit6">Reverse</button> <button class="clear" data-number="6">Clear console</button></p>
        <div id="console6"></div>
    </div>

    <div>7.
        <p><input id="input7" value="Have a Merry Christmas and a Happy New Year"></p>
        <p><button id="submit7">Translate</button> <button class="clear" data-number="7">Clear console</button></p>
        <div...

SCSS

body {
    font-family: sans-serif;
}

.wrapper {
    background: linen;
    padding: 2em;
    
    & > div {
      background: rgba(0,0,0,0.1);
      margin-bottom: 2em;
      padding: 2em;
    }
}

[id^="console"] {
    background: #fff;
    font-family: monospace;
    padding: 1em;
    word-break: break-word;
}

input {
    width: 100%;
}

JavaScript

/* 

Ten Simple JavaScript Exercises 
http://www.ling.gu.se/~lager/kurser/webtechnology/lab4.html

*/


/* 
1. Define a function max() that takes two numbers as arguments and returns the largest of them. Use the if-then-else construct available in Javascript.
*/
function max(a, b) {
    if (parseInt(a,  10) > parseInt(b, 10)) {
        return a;
    } else {
        return b;
    }
}


/* 
2. Define a function maxOfThree() that takes three numbers as arguments and returns the largest of them.
*/
function maxOfThree(a, b, c) {
    var one = parseInt(a, 10),
        two = parseInt(b, 10),
        three = parseInt(c, 10);
    
    if (one > two && one > three) {
        return a;
    } else if (two > three) {
        return b;
    } else {
        return c;
    }
}


/* 
3. Write a function that takes a character (i.e. a string of length 1) and returns true if it is a vowel, false otherwise.
*/
function isVowel(char) {
    if (char.length === 1) {
        return 'aeiouAEIOU'.indexOf(char) !== -1;
    }
    return false;
}


/* 
4. Write a function translate() that will translate a text into "rövarspråket". That is, double every consonant and place an occurrence of "o" in between. For example, translate("this is fun") should return the string "tothohisos isos fofunon"
*/
function translate(str) {
    var i, j,
        strLength = str.length,
        consonants = 'bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ',
        newStr = '',
        char;

    for (i = 0; i < strLength; i++) {
        char = str.charAt(i);
        newStr += char;
        for (j = 0; j < 42; j++) {
            if (char === consonants[j]) {
                newStr += 'o' + char;
                break;
            }
        }
    }

    return newStr;

}


/* 
5. Define a function sum() and a function multiply() that sums and multiplies (respectively) all the numbers in an array of numbers. For example, sum([1,2,3,4]) should return 10, and multiply([1,2,3,4]) should return 24.
*/
function sum(arr) {
 ...