Cacher is the code snippet organizer for pro developers

h1{
    font-size: 5vh;
    color: salmon;
    text-align: center;
    text-decoration: underline;
    font-weight: 300;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-top: 0;
    padding-top: 0;
}
body{
    background-color: lightyellow;
}
footer{
    font-size: 2vh;
    color: darkblue;
    text-align: right;
    text-decoration: cadetblue;
    font-weight: 300;
    font-family: Arial, Helvetica, sans-serif;
}
#juego{
    display: flex;
    flex-flow: column;
}
section{    
    flex: 1;
    height: calc(80vh - 7vh);
    width: 50vw;
    border: 2px gray solid;
    border-radius: 5%;
    background-color: darkgrey;
    margin-left: auto;
    margin-right: auto;
}
p{
    font-size: 2vh;
    color: darkblue;
    text-align: center;
    font-weight: 300;
    font-family: Verdana, Geneva, Tahoma, sans-serif;   
}
textarea{
    align-self: center; 
    justify-content: center;
    width: 40vw;
    resize: none;
    display: block;
    font-size: 5vh;
    font-family: fantasy;
    align-content: center;
    text-align: center;
}
#textojuego{
    background-color: aquamarine;
}
#bar{
    margin: 20px;
    width: 40vw;
    height: 4vh;
    background-color: aquamarine;
    border: solid transparent 1px;
    align-self: center;
}
#timeBar {
    width: 40vw;
    height: 4vh;
    background-color: indigo;
    align-self: center;
}
#botones{
    display: flex;
    flex-flow: row;
    height: 10vh;
    justify-content: center;
}
.button {
    border-radius: 4px;
    background-color: #f4511e;
    border: none;
    color: #FFFFFF;
    font-size: 18px;
    padding: 10px;
    width: 10vw;
    transition: all 0.1s;
    cursor: pointer;
    margin: 5px;
} 
.button div {
    cursor: pointer;
    position: relative;
    transition: 0.5s;
}
.button div:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}
.button:hover div {
    padding-right: 25px;
}
.button:hover div:after {
    opacity: 1;
    right: 0;
}
#table{
    display: flex;
    flex-flow: column;
}
table{
    border: 2px solid #f8b9a5;
    border-collapse: collapse;
    border-radius: 10%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    width: 20vw;
    align-self: center;
    font-size: 3vh;
}
.aciertos{
    color: green; 
}
.errores{
    color:red;
}

let textoJuego = document.getElementById("textoJuego");
let textoUsuarioHTML = document.getElementById("textoUsuario");
let botonInicioHTML = document.getElementById("botonInicio")
let botonPausaHTML = document.getElementById("botonPausa")
let botonReiniciarHTML = document.getElementById("botonReiniciar")
let timeBarHTML = document.getElementById("timeBar");
let aciertosHTML = document.getElementById("aciertos");
let erroresHTML = document.getElementById("errores");

botonInicioHTML.addEventListener("click", inicio);
botonPausaHTML.addEventListener("click", pausa);
botonReiniciarHTML.addEventListener("click", reiniciar);
textoUsuarioHTML.addEventListener("keypress", enter);

function inicio() {
    let words = ["Dani","Carlos","Horacio","Punti"];
    let randomText = words[Math.floor(Math.random()*words.length)];
    textoJuego.innerHTML = randomText;
    cancelTicket = setInterval(intervalo,0.1);
    textoUsuarioHTML.focus();
}

let cancelTicket;
let progress=1
let x=1

function intervalo() {
    if (progress<=0){
        progress=1
        x=x+0.1
        clearTimeout(cancelTicket);
        inicio();
    }
    timeBarHTML.style.width = Math.floor(progress*100) + "%";;
    progress=progress-0.001*x;  
}

function pausa (){
    clearTimeout(cancelTicket);
}

function reiniciar (){
    clearTimeout(cancelTicket);
    x=1;
    progress=1;
    inicio();
    aciertosHTML.innerHTML = 0;
    erroresHTML.innerHTML = 0;
}

function enter (e){
    const code = (e.keyCode ? e.keyCode : e.which);
    if (code !== 13) {
        return;
    }       
    if (textoUsuarioHTML.value.trim() === textoJuego.value) {
        aciertos();
    }
    else{
        errores();
    }
    progress=1;
    x=x+0.1;
    clearTimeout(cancelTicket);
    timeBarHTML.style.width = Math.floor(progress*100) + "%";;
    progress=progress-0.001*x;
    textoUsuarioHTML.value = '';
    inicio();
}

let eventosPositivos = 1;

function aciertos (){
    aciertosHTML.innerHTML = eventosPositivos++;
}

let eventosNegativos = 1;

function errores (){
    erroresHTML.innerHTML = eventosNegativos++;
}

<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        Letra o Languetazo
    </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
    <h1>Letra o Languetazo</h1>
</header>
<section>
<div id="juego">
    <p>Ingresa la palabra que aparece a continuación antes que la barra de tiempo se complete! <br> <b>¡Cuidado con las mayúsculas!, termina tu palabra con un Enter!</b></p>
    <br>
    <textarea id="textoJuego" rows="1" cols="50" readonly></textarea>
    <br> 
    <div id="bar">
        <div id="timeBar"></div>
    </div>
    <br>
    <textarea id="textoUsuario" rows="1" cols="50" placeholder="Escribe tu respuesta aquí" required></textarea>
    <br>
</div>
<div id="botones">
    <button type="button" id="botonInicio" class="button"><div>Inicio!</div></button>
    <button type="button"id="botonPausa" class="button"><div>Pausa</div></button>
    <button type="button" id="botonReiniciar" class="button"><div>Reiniciar</div></button>
</div>
<br>
<div id="table">
<table>
    <tr>
      <th class="aciertos">Aciertos</th>
      <th class="errores">Errores</th>
    </tr>
    <tr>
      <td>
          <div class="aciertos" id="aciertos">0</div>
      </td>
      <td>
          <div class="errores" id="errores">0</div>
      </td>
    </tr>
</table>
</div>
</section>
<footer>
<br>
Juego y página desarrollados por <a href="https://github.com/Danisauri" target="_blank">Daniela Vidal</a>
</footer>
<script src="script.js"></script>
</body>    
</html>