JSFiddle - React, Tailwind, and code Playground

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...

JavaScript

"use strict";
var paraTextNod;
var antalParag = 0;
/* 
 * Den här funktionen anropas då man trycker på en 
 * av knapparna med en bokstav, punkt, 
 * kommatecken eller mellanslag.
 *
 * Funktionsparametrar:
 * c - Variabel som innehåller ett tecken
 */
function addLetter(c){
    if(!paraTextNod) {
        addParagraph();
    }
    var temp = document.createTextNode(c); 
    paraTextNod.appendChild(temp);
}

/*
 * Den här funktionen anroas då man trycker
 * på Enter knappen
 */
function addParagraph() {
    var diven = document.getElementById("output");
    var newP = document.createElement("p");
    diven.appendChild(newP);
    antalParag+=1;
    newP.className = (antalParag%2 === 0 ? 'even' : 'odd');
    paraTextNod = newP;
}
/*
 * Den här funktionen anropas när man trycker på länken "Räkna bokstäver".
 */
function countLetters() {
    var count=0;
    var diven = document.getElementById("output");
    var paragrafer = diven.getElementsByTagName("p");
    //var sistaParag = paragrafer[paragrafer.length-1].textContent;
    var sistaParag = paragrafer[paragrafer.length-1].innerHTML;
    count = sistaParag.length;
    alert(sistaParag.length);    
    return count;
}