See Attached Java Write a complete webpage with HTML and JavaScript that impleme
ID: 3698486 • Letter: S
Question
See Attached Java
Write a complete webpage with HTML and JavaScript that implements an animation using dynamic HTML DOM programming. At beginning, this page contains a 4 by 4 table with solid border. We assume inside every cell, i.e. element, there is a element. You can write any text inside thi:s element, as long as the text in different cells is different. There should be a "Step" button and a "Reset" button at the bottom of this page. After the first click on the "Step" button, the element inside the top left cell should be replaced by an image element, i.e.Explanation / Answer
<!-- example.html-->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th><p class="pclass" id="1">Firstname</p><img src="example.jpg" class="imageclass" id="17"/></th>
<th><p class="pclass" id="2">Lastname<p><img src="example.jpg" class="imageclass" id="18"/></th>
<th><p class="pclass" id="3">Age<p><img src="example.jpg" class="imageclass" id="19"/></th>
<th><p class="pclass" id="4">City<p><img src="example.jpg" class="imageclass" id="20"/></th>
</tr>
<tr>
<th><p class="pclass" id="5">Ashok</p><img src="example.jpg" class="imageclass" id="21"/></th>
<th><p class="pclass" id="6">Kumar<p><img src="example.jpg" class="imageclass" id="22"/></th>
<th><p class="pclass" id="7">10<p><img src="example.jpg" class="imageclass" id="23"/></th>
<th><p class="pclass" id="8">Hyd<p><img src="example.jpg" class="imageclass" id="24"/></th>
</tr>
<tr>
<th><p class="pclass" id="9">Rebba</p><img src="example.jpg" class="imageclass" id="25"/></th>
<th><p class="pclass" id="10">Ashok<p><img src="example.jpg" class="imageclass" id="26"/></th>
<th><p class="pclass" id="11">20<p><img src="example.jpg" class="imageclass" id="27"/></th>
<th><p class="pclass" id="12">Eluru<p><img src="example.jpg" class="imageclass" id="28"/></th>
</tr>
<tr>
<th><p class="pclass" id="13">Kumar</p><img src="example.jpg" class="imageclass" id="29"/></th>
<th><p class="pclass" id="14">Rebba<p><img src="example.jpg" class="imageclass" id="30"/></th>
<th><p class="pclass" id="15">30<p><img src="example.jpg" class="imageclass" id="31"/></th>
<th><p class="pclass" id="16">Nuz<p><img src="example.jpg" class="imageclass" id="32"/></th>
</tr>
</table>
<br>
<center>
<button type="button" id="step" value="1">Step</button>
<button type="button" id="reset">Reset</button>
</center>
<script>
$(".imageclass").hide();
//myfunction for step description
function myFunction() {
//intially paragraphs shown and images are in hidden
$(".pclass").show();
$(".imageclass").hide();
var x =$("#step").val();
var pnum=parseInt(x);
var imgnum=pnum+16;
var imgn=imgnum.toString();
//alert(pnum); //alert(imgn);
$('#' + pnum).hide();
$('#' + imgn).show();
//script rotate perimeter wise
if(pnum==1 || pnum==2 || pnum==3)
{
pnum=pnum+1;
}
else if(pnum==4)
{
pnum=8;
}
else if(pnum==8)
{
pnum=12;
}
else if(pnum==12)
{
pnum=16;
}
else if(pnum==16 || pnum==15 || pnum==14)
{
pnum=pnum-1;
}
else if(pnum==13 || pnum==9 ){ pnum=pnum-4; }
else if(pnum==5){pnum=1;}
else {}
//assign new button value
$("#step").attr('value', pnum);
}
//reset fumction
function myRsetFunction() {
$("#step").attr('value', '1');
$(".imageclass").hide();
$(".pclass").show();
}
</script>
</body>
</html>