- Code is available
- Table generator using javascript
<!DOCTYPE html>
<html>
<head>
<title>assignment</title>
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
<style type="text/css">
body{
background-color: #b6f0e9;
color: black;
}
table, tr, td{
border: 2px solid black;
background: #f0edb6;
}
button{
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<center>
<ul><h2>Generate Table</h2></ul>
<form>
<section class="input">
<table>
<tr>
<td><label>Enter Table No:.</label></td>
<td><input type="text" name="" id="no"></td>
</tr>
<tr>
<td><label>Enter Table Length</label></td>
<td><input type="text" name="" id="rng"></td>
</tr>
</table>
<button type="button" onclick="calculate()">Generate</button>
</section>
</form>
<section class="output">
<form>
<table>
<tr>
<td><label>Total Even values</label></td>
<td><input type="text" name="" id="even"></td>
</tr>
<tr>
<td><label>Total Odd Values/label></td>
<td><input type="text" name="" id="odd"></td>
</tr>
<tr>
<td colspan="2"><p id="tbl"></p></td>
</tr>
</table>
</form>
</section>
</center>
<script type="text/javascript">
//Table
function calculate()
{
var n = document.getElementById('no').value;
var r = document.getElementById('rng').value;
if(n < 0 || r < 0)
{
window.alert('Invalid Input');
}else
{
for( var i=1; i<=r; i++)
{
var result = n * i;
var ptag = document.getElementById('tbl');
ptag.innerHTML +=(n + ' ' + '*' + ' ' + i + ' '+ '='+ ' ' + result) + "<br>";
}
//Counting values of even and odd
var i,odd=0,even=0;
for(i=1;i<=r;i++)
{
if(i%2==0)
{
even++;
}
else
{
odd++;
}
}
document.getElementById('even').value = even;
document.getElementById('odd').value = odd;
}
}
</script>
</body>
<!-- <script type="text/javascript" src="script.js"></script> -->
</html>
No comments:
Post a Comment