3. WRITE A JAVASCRIPT CODE THAT DISPLAYS TEXT “TEXT-GROWING” WITH INCREASING FONT SIZE IN THE INTERVAL OF 100MS IN RED COLOR, WHEN THE FONT SIZE REACHES 50PT IT DISPLAYS “TEXT-SHRINKING” IN BLUE COLOR. THEN THE FONT SIZE DECREASES TO 5PT.
SOLUTION 1
prog3.html
<!DOCTYPE html>
<html>
<body>
<div id="h"></div>
<script>
var v = 0, f = 1,t="TEXT-GROWING",color;
function a()
{
if(f==1)
v+=5,color="red";
else
v-=5,color="blue";
document.getElementById("h").innerHTML = "<h1 style=\"font-size: "+v+"px ; margin: 0px; color : "+color+"\"><b> "+t+"</b></h1>";
if(v==50)
f = 0, t="TEXT-SHRINKING";
if(v==5)
f = 1, t="TEXT-GROWING";
c();
}
function c()
{
setTimeout(a,300);
}
c();
</script>
</body>
</html>
OUTPUT :( click on image to zoom )
SOLUTION 2
prog3.html
<!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>
OUTPUT :( click on image to zoom )
SOLUTION 1
prog3.html
<!DOCTYPE html>
<html>
<body>
<div id="h"></div>
<script>
var v = 0, f = 1,t="TEXT-GROWING",color;
function a()
{
if(f==1)
v+=5,color="red";
else
v-=5,color="blue";
document.getElementById("h").innerHTML = "<h1 style=\"font-size: "+v+"px ; margin: 0px; color : "+color+"\"><b> "+t+"</b></h1>";
if(v==50)
f = 0, t="TEXT-SHRINKING";
if(v==5)
f = 1, t="TEXT-GROWING";
c();
}
function c()
{
setTimeout(a,300);
}
c();
</script>
</body>
</html>
OUTPUT :( click on image to zoom )
SOLUTION 2
prog3.html
<!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>
OUTPUT :( click on image to zoom )
Well said! With trade show booth rental Las Vegas providers, you get access to premium booths without storage or maintenance concerns—definitely worth considering. Trade show exhibit and booth builder company
ReplyDelete