Assignment-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 “TEXTSHRINKING” in BLUE color. Then the
font size decreases to 5pt.
Program3.html
<!DOCTYPE HTML>
<html>
<head>
<title>Text Shrink</title>
<style>
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
var var1 = setInterval(inTimer, 500);
var fs = 5; //font size
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); //paused var2 = setInterval(deTimer, 500);
var2 = setInterval(deTimer, 500);
}
}
function deTimer() //fs = 50px
{
fs -= 5;
ids.innerHTML = 'TEXT SHRINKING';
ids.setAttribute('style', "font-size: " + fs + "px; color: blue");
if (fs == 5) {
clearInterval(var2); //paused var1 = setInterval(inTimer, 500);
}
}
</script>
</body>
</html>
1
Output:
Text Growing
Text Shrinking
Challenge3.html
2
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="challenge3.css">
<title>Photo Rating</title>
</head>
<body style="background-color: rgb(233, 216, 123);">
<header class="topnav">
<a class="active" href="#home">Home</a>
<a href="#Places">Places</a>
<a href="#Galery">Gallery</a>
<a href="#About Us">About Us</a>
<a href="#Search">Search</a>
</header>
<div class ="page-container">
<div class="container">
<h1>Malpe Beach , Udupi</h1>
<table style="width: 80%;">
<tr>
<td>
<figure>
<img src="pic1.jpg" alt="Malpe Beach" style="width:100%">
<figcaption>Malpe Beach</figcaption>
</figure>
</td>
<td>
<p id="demo"></p>
<script src="challenge3.js"></script>
</td>
</tr>
</table>
<h4>by <a href="#Naveen Dasapalli">Naveen Dasapalli</a></h4>
<article class="article">
<p>Malpe is a natural port in the Udupi District in Karnataka, India. Loca
ted at the mouth of the Malpe River about six kilometers to the west of Udupi, it is an im
portant port and a major fishing harbor on the
Karnataka coast. The town of Malpe is associated largely with settleme
nts of the Mogaveera fisherman community. Malpe is a hub of Mogaveera, Billava and Muslim
population.</p>
</article>
<section>
<p>Year: 2019
3
<br />
Date: 6th October
</p>
</section>
</div>
<div class="rating">
<div>
<p><strong>Awwwweee!</strong><br>Fiona
<img src="Star-Orange.png">
<img src="Star-Orange.png">
<img src="Star-Orange.png">
<img src="Star-Orange.png">
<img src="Star-Orange.png">
</p>
<p><small>Good one hey! 👍</small></p>
</div>
<hr>
<div>
<p><strong>Amazing</strong><br>Roy
<img src="Star-Orange.png">
<img src="Star-Orange.png">
<img src="Star-Orange.png">
<img src="Star-Orange.png">
<img src="Star-White.png">
</p>
<p><small>I love it ! ❤</small></p>
</div>
<hr>
<div>
<p><strong>Fantastic</strong><br>Bob
<img src="Star-Orange.png">
<img src="Star-Orange.png">
<img src="Star-Orange.png">
<img src="Star-White.png">
<img src="Star-White.png">
</p>
<p><small>Very nice place in karnataka 😍</small></p>
</div>
<hr>
<div>
<p><strong>WOW!</strong><br>Jony
<img src="Star-Orange.png">
<img src="Star-Orange.png">
<img src="Star-Orange.png">
<img src="Star-Orange.png">
<img src="Star-White.png">
</p>
<p><small>This was my dream place 🥰😘</small></p>
</div>
<hr>
4
</div>
</div>
<footer class="footer">
<a class="active" href="#home">Home</a>
<a href="#Places">Places</a>
<a href="#Galery">Gallery</a>
<a href="#About Us">About Us</a>
<a href="#Search">Search</a>
<br>
<br>
<p>Copyright © 2020 My Costal stay</p>
</footer>
</body>
</html>
Challenge3.css
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.page-container{
margin: 5px;
}
.demo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.topnav {
margin-left: 0pt;
overflow: hidden;
background-color: rgb(13, 156, 167);
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 16px 18px;
text-decoration: none;
font-size: 17px;
}
5
.topnav a:hover {
background-color: rgb(83, 209, 218);
color: black;
}
.topnav a.active {
background-color: #000000;
color: white;
}
figure {
border: thin #c0c0c0 solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 440px;
margin-left: 30pt;
}
img {
max-width: 440px;
max-height: 300px;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 3px;
text-align: center;
}
.container p {
position: relative;
}
.rating img {
align-items: center;
vertical-align: bottom;
width: 30px;
height: 30px;
}
footer{
position: relative;
background-color: black;
bottom: 0;
overflow: hidden;
}
.footer a{
float: left;
color: #f2f2f2;
6
text-align: center;
padding: 16px 18px;
text-decoration: none;
font-size: 17px;
}
.footer a.active {
background-color: rgb(184, 196, 197);
color: black;
}
.footer a:hover{
background-color: rgb(184, 196, 197);
color: rgb(0, 0, 0);
}
.footer p{
color: cornsilk;
margin-left: 5px;
}
Challenge3.js
var var1 = setInterval(inTimer, 500);
var fs = 5; //font size
var ids = document.getElementById("demo");
function inTimer() {
ids.innerHTML = 'Ocean Thearpy';
ids.setAttribute('style', "font-size: " + fs + "px; color: red");
fs += 5;
if (fs >= 50) {
clearInterval(var1); //paused var2 = setInterval(deTimer, 500);
var2 = setInterval(deTimer, 500);
}
}
function deTimer() //fs = 50px
{
fs -= 5;
ids.innerHTML = 'Ocean Thearpy';
ids.setAttribute('style', "font-size: " + fs + "px; color: blue");
if (fs == 5) {
clearInterval(var2); //paused var1 = setInterval(inTimer, 500);
}
}
Output:
7
Growing
Text
Shrinkin
g Text
8
9
