<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trigonometric Calculator</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}
body{
background:#0f172a;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.container{
width:400px;
background:#fff;
border-radius:15px;
padding:25px;
box-shadow:0 10px 30px rgba(0,0,0,.3);
}
h2{
text-align:center;
margin-bottom:20px;
color:#1e293b;
}
label{
font-weight:bold;
display:block;
margin-top:15px;
}
input,select{
width:100%;
padding:12px;
margin-top:8px;
border:1px solid #ccc;
border-radius:8px;
font-size:16px;
}
button{
width:100%;
padding:12px;
margin-top:18px;
border:none;
border-radius:8px;
font-size:17px;
cursor:pointer;
color:#fff;
}
.calculate{
background:#2563eb;
}
.calculate:hover{
background:#1d4ed8;
}
.clear{
background:#dc2626;
}
.clear:hover{
background:#b91c1c;
}
.result{
margin-top:20px;
padding:15px;
background:#f1f5f9;
border-radius:10px;
text-align:center;
font-size:20px;
font-weight:bold;
color:#0f172a;
}
</style>
</head>
<body>
<div class="container">
<h2>Trigonometric Calculator</h2>
<label>Angle</label>
<input type="number" id="angle" placeholder="Enter Angle">
<label>Select Function</label>
<select id="function">
<option value="sin">Sin</option>
<option value="cos">Cos</option>
<option value="tan">Tan</option>
<option value="cot">Cot</option>
<option value="sec">Sec</option>
<option value="cosec">Cosec</option>
</select>
<label>Mode</label>
<select id="mode">
<option value="deg">Degree</option>
<option value="rad">Radian</option>
</select>
<button class="calculate" onclick="calculateTrig()">Calculate</button>
<button class="clear" onclick="clearAll()">Clear</button>
<div class="result" id="result">
Result : 0
</div>
</div>
<script>
function calculateTrig(){
let angle=parseFloat(document.getElementById("angle").value);
if(isNaN(angle))
{
alert("Please enter an angle.");
return;
}
let mode=document.getElementById("mode").value;
let func=document.getElementById("function").value;
if(mode=="deg")
{
angle=angle*Math.PI/180;
}
let ans;
switch(func)
{
case "sin":
ans=Math.sin(angle);
break;
case "cos":
ans=Math.cos(angle);
break;
case "tan":
ans=Math.tan(angle);
break;
case "cot":
ans=1/Math.tan(angle);
break;
case "sec":
ans=1/Math.cos(angle);
break;
case "cosec":
ans=1/Math.sin(angle);
break;
}
document.getElementById("result").innerHTML="Result : "+ans.toFixed(10);
}
function clearAll(){
document.getElementById("angle").value="";
document.getElementById("result").innerHTML="Result : 0";
}
</script>
</body>
</html>
No comments:
Post a Comment