necesito que cuando se presione agregar se cree un div debajo con exactamente el mismo texto que el escrito dentro del text area, con los saltos de linea incluido.
imagen de la pagina y su mal funcionamiento
<body>
<div id="colorInterfas">
<p>FONDO</p>
<input type="color" name="color" id="colorFondo">
<input type="color" name="color" id="colorLetra">
<p>LETRA</p>
</div>
<textarea id="input" cols="30" rows="10"></textarea>
<button id="button">agregar</button>
</div>
<ul id="container">
</ul>
</body>
let text = document.querySelector('#input');
let button = document.querySelector('#button');
let container = document.querySelector('#container');
let colorPickerFondo = document.querySelector('#colorFondo');
let colorPickerLetra = document.querySelector('#colorLetra');
colorPickerFondo.addEventListener('change', () => {
text.style.background = colorPickerFondo.value
})
colorPickerLetra.addEventListener('change', () => {
text.style.color = colorPickerLetra.value
})
if (text.style.background === '') {
text.style.background = colorPickerFondo.value;
}
if (text.style.color === '') {
text.style.color = colorPickerLetra.value;
}
button.addEventListener('click', () => {
if (text.value.trim().length !== 0) {
let CONTENT = document.createElement('il');
CONTENT.classList.add('content');
CONTENT.textContent = text.value;
CONTENT.setAttribute('style', ` background: ${text.style.background} ; color: ${text.style.color}; width: 180px; height: 180px;`);
container.appendChild(CONTENT);
}
});
Con este codigo el texto es copiado, pero todo junto, sin los saltos de linea.
este codigo es para hacer una pagina que cree anotaciones tipo “post-it” de diferentes colores
me faltaria hacer eso y despues lograr que se acomode de la manera correcta
porque ahora mismo se quedan todos pegados xd
Muchas gracias.