JSFiddle - React, Tailwind, and code Playground

by Kev

HTML

<div id="container">
    <input id="start" type="text" name="input_text" size="100" maxlength="43" placeholder="Click & type to create your horror story." autofocus />
    <p id="end"></p>
</div>

CSS

#start {
    color:blue;
    border:none;
    outline:none;
}
#end {
    color:red;
}
#two {
    color:green;
    display:block;
}
#three {
    color:orange;
    display:block;
}
#four {
    color:red;
    display:none;
}
label {
    border:none;
}
#container {
    margin-top:140px
}
.container_anim_1 {
    position:relative;
    -webkit-animation:line1 10s 1;
    -webkit-animation-timing-function:linear;
    -webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes line1 {
    0% {}
    20% { margin-top:140px; }
    40% { margin-top:120px; }
    60% { margin-top:100px; }
    80% { margin-top:80px; }
    100% { margin-top:60px; }
}

JavaScript

var input;
var container = document.getElementById("container");
var start = document.getElementById("start");

//var input = 'This is a test line of 40 characters long';
//var output = 'All work and no play makes Jack a dull boy.';
//var end = document.getElementById("end");
//input = document.getElementById("start").value;

$('#start').on('keypress', function (e) {
    if (e.keyCode == 8) {
        e.preventDefault();
    }
  
    if (e.keyCode == 13) {
        document.getElementById('start').blur();
        document.getElementById('start').disabled = true;
        $('#container').addClass('container_anim_1');
        lineOne();
        $('#one').typewriter();

        return false;
    }
    
});



function lineOne() {
    input = document.getElementById("start").value;
    input_array = input.split("");
    input_array[5] = 'o';
    input_array[23] = 'e';
    input_array[13] = 'n';
    input_array[36] = 'l';
    input_array[24] = 'k';
    input_array[17] = 'l';
    input_array[20] = "";
    input_array[8] = " ";
input_array[15] = " ";

    input_string = input_array.join("");    //Convert array back to string

    var para1 = document.createElement("p");
    var line1 = document.createTextNode(input_string);
    para1.id = "one";
    para1.appendChild(line1);
    container.appendChild(para1);

    setTimeout(function () {
        lineTwo();
        $('#two').typewriter();
    }, 2000);
}



function lineTwo() {
    input_array_2 = input_string.split("");
    input_array_2[28] = 'a';
    input_array_2[7] = 'k';
    input_array_2[22] = 'a';
    input_array_2[35] = 'u';
    input_array_2[4] = 'w';
    input_array_2[26] = " ";
    input_array_2[6] = 'r';
input_array_2[33] = " ";
    input_string_2 = input_array_2.join("");

    var para2 = document.createElement("p");

    var line2 = document.createTextNode(input_string_2);
    para2.id = "two";
    para2.appendChild(line2);
    container.appendChild(para2);



    setTimeout(function () {
       ...