JavaScript code that displays text “TEXT-GROWING” with increasing font size

				
					<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
p 
{ 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
} 
</style> 
</head> 
<body> 
<p id="demo"></p> 
<script> 
var var1 = setInterval(inTimer, 1000); 
var fs = 5; var ids = document.getElementById("demo"); 
function inTimer() 
{ 
ids.innerHTML = 'TEXT GROWING'; ids.setAttribute('style', "font-size: " + fs + "px; color: red"); 
fs += 5; 
if(fs >= 50 )
{ 
clearInterval(var1); 
var2 = setInterval(deTimer, 1000); 
} 
} 
function deTimer() 
{ 
fs -= 5; 
ids.innerHTML = 'TEXT SHRINKING'; 
ids.setAttribute('style', "font-size: " + fs + "px; color: blue"); 
if(fs === 5 )
{ 
    clearInterval(var2); 
} 
} 
</script> 
</body> 
</html>

Leave a Reply