Create a simple calculator using form fields. Have two fields for number entry and one field for the result. Allow the user to be able to use plus, minus, multiply and divide.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JavaScript program to calculate addition,subtraction, multiplication and division of two numbers </title>
<style type="text/css">
body {margin: 30px;}
</style>
<script>
function addsBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = Number(num1)+Number(num2);
}
function subBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 - num2;
}
function multiplyBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 * num2;
}
function divideBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 / num2;
}
</script>
</head>
<body>
<form>
1st Number : <input type="text" id="firstNumber" /><br>
2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="addsBy()" Value="Addition" />
<input type="button" onClick="subBy()" Value="Subtraction" />
<input type="button" onClick="multiplyBy()" Value="Multiply" />
<input type="button" onClick="divideBy()" Value="Divide" />
</form>
<p>The Result is : <br>
<span id = "result"></span>
</p>
</body>
</html>
Write a script to create an array of 10 elements and display its contents
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>
<script>
var students = ["monish", "moseen","naresh","gowtham","yogesh","shyam","udhaya","vignesh"];
var i;
for(i=0;i<students.length;i++)
{
document.write(students[i]+"\n");
}
</script>
</body>
</html>
Create a document and add a link to it. When the user moves the mouse over the link, it should load the linked document on its own. (user is not required to click on the link)
<!DOCTYPE HTML>
<html>
<head>
<title>
How to create a link in JavaScript using mouseover
</title>
</head>
<body style = "text-align:center;">
college of arts and science chennai
<p onMouseOver="window.location.href='C://Users//arun_//Desktop//HTML//calcu.html';">text welcome</p>
</body>
</html>
Create a document which opens a new window without a toolbar, address bar or a status bar that unloads itself after one minute
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Alert</h2>
<script>
let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=0,height=0,left=-1000,top=-1000`;
// popup blocked
window.open('http://unomnotes.blogspot.com');
// popup allowed
button.onclick = () => {
window.open('http://unomnotes.blogspot.com','welcome');
params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=0,height=0,left=-1000,top=-1000`;
};
</script>
</body>
</html>
Design an HTML page that includes document structure tags, title, line break, multiple headings and link to e-mail address
<!DOCTYPE html>
<html>
<head>
<title>lab excercise for NME</title>
</head>
<body>
welcome to chennai.<br>chennai is the capital city of tamilnadu without chennai indian economy is zero<br>
<h1>welcome</h1>
<h2>welcome</h2>
<h3>welcome</h3>
<h4>welcome</h4>
<h5>welcome</h5>
<h6>welcome</h6>
<a href="http://mailid@gmail.com">send mail</a>
</body>
</html>
Create an HTML file which is the main page with an image and some text messages along with hyperlinks which is linked to various pages. The navigation should be such that the links take you to the appropriate page and then back to the main page.
<!DOCTYPE html>
<html>
<head>
<title>lab exercise for NME</title>
</head>
<body>
<img src="C://Users//arun_//Desktop//mem//arun.jpg"/>
welcome to chennai.<br><a href="http://www.google.com">chennai</a> is the capital city of <a href="www.tn.gov.in">tamilnadu</a> without chennai indian economy is zero<br>
<h1><a href="doctags.html">welcome</a></h1>
<a href="http://mailid@gmail.com">send mail</a>
</body>
</html>
Create a HTML page to demonstrate the usage of Frames. Choose the content of the page on your own.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="newwindow.html">
</FRAMESET>
<FRAME src="doctags.html">
<NOFRAMES>
<P>This frameset document contains:
<UL>
<LI><A href="mouseovereve.html">Some other neat contents</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
Design an application for pay slip through HTML forms.
<!doctype html>
<html lang="en">
<head>
<title>Pay Slip Generation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form name="employeeInfoForm" action="" onsubmit="return generatePayslip(this['name'].value, this['lastname'].value, this['salary'].value,this['superrate'].value);" method="post">
<fieldset>
<label for="name">First Name</label>
<input type="text" class="form-control" id="name">
<br />
<label for="lastname">Lastname</label>
<input type="text" id="lastname" class="form-control" name="lastname" placeholder="Enter your last name" />
<br />
<label for="salary">Annual salary</label>
<input type="text" id="salary" class="form-control" name="salary" placeholder="Enter your salary" />
<br />
<label for="superrate">Super rate</label>
<input type="text" id="superrate" class="form-control" name="superrate" placeholder="Enter your superrate" />
<br />
<button type="submit" class="btn btn-primary">Generate Payslip</button>
</fieldset>
</form>
<form name="payForm" action="" onsubmit="" method="post">
<input type="hidden" id="nameValue" name="name" />
<input type="hidden" id="lastnameValue" name="lastname" />
<input type="hidden" id="annualValue" name="annual" />
<input type="hidden" id="grossValue" name="gross" />
<input type="hidden" id="taxValue" name="tax" />
<input type="hidden" id="netValue" name="net"/>
<input type="hidden" id="superValue" name="super" />
<input type="hidden" id="payValue" name="pay"/>
<table class="table table-striped">
<tbody>
<tr>
<td>Pay Date</td>
<td>31 APRIL 2021</td>
</tr>
<tr>
<td>Pay Frequency</td>
<td>Monthly</td>
</tr>
<tr>
<td>Annual income</td>
<td id="annual" ></td>
</tr>
<tr>
<td>Gross income</td>
<td id="gross" ></td>
</tr>
<tr>
<td>Income Tax</td>
<td id="tax" ></td>
</tr>
<tr>
<td>Net income</td>
<td id="net" ></td>
</tr>
<tr>
<td>Super</td>
<td id="super" ></td>
</tr>
<tr>
<td>Pay</td>
<td id="pay"></td>
</tr>
</tbody>
</table>
<br>
<button type="submit" class="btn btn-primary">Pay</button>
</form>
<script>
function round(number){
if (number%1 >= 50)
return Math.ceil(number);
else
return Math.floor(number);
}
function calculateIncomeTax(salary){
if (salary<=18200) return 0;
if (salary>18200 && salary <=37000) return round(((salary-18200) * 0.19)/12);
if (salary>37000 && salary <=80000) return round((3572 + ((salary-37000)* 0.325))/12);
if (salary>80000 && salary <=180000) return round((17547 + ((salary-80000) * 0.37))/12);
if (salary>180000) return round((54547 + ((salary-180000) * 0.45))/12);
}
function generatePayslip(name, lastname, salary, superrate){
document.querySelector("#nameValue").value = name;
document.querySelector("#lastnameValue").value = lastname;
document.querySelector("#annual").textContent = Number(salary);
document.querySelector("#annualValue").value = Number(salary);
gross = round(Number(salary) / 12);
document.querySelector("#gross").textContent = gross;
document.querySelector("#grossValue").value = gross;
tax = calculateIncomeTax(Number(salary));
document.querySelector("#tax").textContent = tax;
document.querySelector("#taxValue").value = tax;
net = gross - tax;
document.querySelector("#net").textContent = net;
document.querySelector("#netValue").value = net;
superAmount = round(gross * superrate/100);
document.querySelector("#super").textContent = superAmount;
document.querySelector("#superValue").value = superAmount;
document.querySelector("#pay").textContent = net - superAmount;
document.querySelector("#payValue").value = net - superAmount;
return false;
}
</script>
</body>
No comments:
Post a Comment