typing using javascript html css
<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 button
activate_btn.addEventListener('click',()=>{
setInterval(()=>{
destination.textContent += element.value.charAt(count);
count += 1;
},10);
})
// clear button
clear_btn.addEventListener('click',()=>{
destination.textContent = "";
location.reload();
});
// scroll automatically
setInterval(()=>{
window.scrollTo(0,destination.scrollHeight);
<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 button
activate_btn.addEventListener('click',()=>{
setInterval(()=>{
destination.textContent += element.value.charAt(count);
count += 1;
},10);
})
// clear button
clear_btn.addEventListener('click',()=>{
destination.textContent = "";
location.reload();
});
// scroll automatically
setInterval(()=>{
window.scrollTo(0,destination.scrollHeight);
// window.scrollTo(0,document.body.scrollHeight);
// fixed elements
},100);
</script>
</html>
// fixed elements
},100);
</script>
</html>
Comments
Post a Comment