JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" name="autor" />
<input type="text" name="titulo">
<button type="button" disabled>Iniciar</button>
JavaScript
function objFactory(title, author) {
return {
titulo: title || '',
autor: author || '',
texto: [],
}
}
var autor = document.querySelector('input[name="autor"]');
var titulo = document.querySelector('input[name="titulo"]');
var iniciar = document.querySelector('button');
function verificarAutoria() {
iniciar.disabled = !autor.value.trim() || !titulo.value.trim();
}
autor.addEventListener('input', verificarAutoria);
titulo.addEventListener('input', verificarAutoria);
iniciar.addEventListener('click', function() {
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
var obj = objFactory(titulo.value, autor.value);
var linha = [];
obj.texto.push({
linha: linha,
desfazer: null,
});
textarea.addEventListener('keyup', function(e) {
if (e.keyCode == 13) { // Enter, mudar a linha
linha = [];
obj.texto.push({
linha: linha,
desfazer: null,
});
} else {
var caractere = String.fromCharCode(e.keyCode);
linha.push({
caractere: caractere,
data: new Date(),
});
}
console.log(JSON.stringify(obj))
});
});