JSFiddle - React, Tailwind, and code Playground

by voigtan

HTML

<!DOCTYPE html>

<html>
    <head>
        <title>Uppgift 2 - Virtuell skrivmaskin</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <section id="typeWriter">
            <!-- Divtagg där nya paragrafer skapas -->
            <div id="output">
                <!--
                Dina skapade paragrafer kan se ut såhär:
                <p class="odd">the first paragraf</p>
                <p class="even">the second paragraf</p>
                <p class="odd">the third paragraf</p>
                -->
            </div>

            <!-- Tangentbordet, bestående av en mängd knappar med javascript-bindningar -->
            <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...

CSS

.odd {
    background: #fff;
}
.even {
    background: #eee;
}

JavaScript

"use strict";
(function() {
    var paraTextNod;

    window.addLetter = function(c) {
        if(!paraTextNod) {
            addParagraph();
        }
        var temp = document.createTextNode(c);
        paraTextNod.appendChild(temp);
    };

    window.addParagraph = function() {
        var diven = document.getElementById('output');
        paraTextNod = document.createElement('p');
        paraTextNod.className = (diven.getElementsByTagName('p').length % 2 === 0 ? 'odd' : 'even');
        diven.appendChild(paraTextNod);
    };

    window.countLetters = function() {
        return (paraTextNod ? paraTextNod.innerHTML.replace(/[,\.:]/img, '') : '').length;
    };
})();