<html> <style> textarea{ word-wrap: break-word; white-space: pre-wrap; grid:1 position:fixed; z-index:1000; } body{ display: grid; grid-template-columns: repeat(2,10vw); grid-template-rows: repeat(2,10vw); gap: 10px; align-items: justify; margin: 5px; padding: 5px; } .output{ scroll-behavior: smooth; height: auto; width: auto; } </style> <body> <textarea></textarea> <pre class="output"></pre> <div class="container"> <button class="activate">activate</button> <button class="clear">clear</button> </div> </body> <script> let element = document.querySelector('textarea'); let destination = document.querySelector('.output'); let activate_btn = document.querySelector('.activate'); let clear_btn = document.querySelector('.clear'); let count=0; // event listener on activate butt...
