Simple Text Editor
Home
Snippets
Simple Text Editor
HTML
CSS
JS
<div id="window"> <div id="buttons"> <a href="#" id="minimize"></a> <a href="#" id="resize"></a> <a href="#" id="close"></a> </div> <div id="title">Text Editor</div> <textarea id="textarea"></textarea> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
body { height: 100vh; margin: 0; background: #456; display: flex; align-items: center; justify-content: center; } #window { width: 350px; background: #d9d9d9; border-radius: 3px; padding: 12px 0; font-family: Verdana, sans-serif; color: #333; } #buttons { float: right; margin-right: 12px; } #buttons a { width: 16px; height: 16px; border-radius: 50%; display: inline-block; } #minimize { background: #3c6; } #resize { background: #cc3; } #close { background: #c33; } #title { margin-left: 12px; } textarea { width: 96%; height: 140px; margin-top: 10px; border: 0; padding: 2%; font-family: Verdana, sans-serif; }
var textarea = $('textarea'), speed = 80, text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'; function writeText(text) { textarea.text( textarea.text() + text[$('#textarea').text().length] ); if (textarea.text().length == text.length) { clearInterval(timeout); } } var timeout = setInterval('writeText(text)', speed);
Ad #1
Ad #2
Scroll to Top