Word auto write & auto erase using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word auto write & auto erase</title>
</head>
<body>
<style>
#text{
color: green;
text-align: center;
margin-top: 100px;
}
</style>
<h1 id='text'></h1>
<script>
let text = document.getElementById("text");
let mainWord = [
"M","y",' ',"n","a","m","e",' ',"i","s",' ',"F","a","s",' ',"F","o","y","s","a","l",
];
let word = [];
function textAnimation() {
let i = 0;
let ok = false;
setInterval(() => {
if(ok){
word.pop();
text.innerHTML = word.join("");
if(word.length == 0){
ok = false
}
}else{
word.push(mainWord[i]);
text.innerHTML = word.join("");
if (i == mainWord.length-1) {
i = 0;
} else {
i++;
}
if (word.length-1 == mainWord.length-1) {
ok = true
}
}
}, 200);
}
textAnimation();