Calculator with Trig Functions

Trigonometric Calculator body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; color: #333; line-height: 1.6; margin: 0; padding: 20px; } .trig-calc-container { max-width: 800px; margin: 30px auto; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); overflow: hidden; } .trig-calc-header { background-color: #004a99; color: white; padding: 25px; text-align: center; font-size: 2em; margin-bottom: 20px; } .trig-calc-content { padding: 30px; } .input-group { margin-bottom: 20px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .input-group label { font-weight: bold; color: #004a99; min-width: 150px; /* Consistent width for labels */ } .input-group input[type="number"], .input-group select { padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1em; flex: 1; /* Allows inputs to grow */ min-width: 180px; /* Minimum width for inputs */ } .input-group button { background-color: #004a99; color: white; border: none; padding: 12px 25px; border-radius: 5px; font-size: 1.1em; cursor: pointer; transition: background-color 0.3s ease; margin-top: 10px; /* Add some space above button */ } .input-group button:hover { background-color: #003366; } .result-group { margin-top: 30px; padding: 20px; background-color: #e9ecef; border-left: 5px solid #28a745; border-radius: 5px; } .result-group h3 { margin-top: 0; color: #28a745; } #calculationResult { font-size: 1.8em; font-weight: bold; color: #28a745; word-break: break-all; /* Ensures long results wrap */ } .explanation { margin-top: 40px; padding: 30px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .explanation h2 { color: #004a99; border-bottom: 2px solid #004a99; padding-bottom: 10px; margin-bottom: 20px; } .explanation h3 { color: #004a99; margin-top: 25px; margin-bottom: 15px; } .explanation p, .explanation ul { margin-bottom: 15px; } .explanation code { background-color: #e9ecef; padding: 2px 6px; border-radius: 3px; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; } /* Responsive adjustments */ @media (max-width: 768px) { .input-group { flex-direction: column; align-items: stretch; } .input-group label { min-width: auto; margin-bottom: 5px; } .input-group input[type="number"], .input-group select { min-width: auto; width: 100%; } .trig-calc-header { font-size: 1.7em; padding: 20px; } .trig-calc-content { padding: 20px; } #calculationResult { font-size: 1.5em; } }
Trigonometric Calculator
Degrees Radians
Sine (sin) Cosine (cos) Tangent (tan) Cosecant (csc) Secant (sec) Cotangent (cot)

Result:

Understanding Trigonometric Functions

Trigonometry is a fundamental branch of mathematics that studies the relationships between the angles and sides of triangles. At its core, it uses trigonometric functions (also known as circular functions) to describe these relationships. The primary trigonometric functions are sine (sin), cosine (cos), and tangent (tan).

The Core Functions: Sine, Cosine, Tangent

In a right-angled triangle, for a given acute angle (let's call it θ):

  • Sine (sin θ) is the ratio of the length of the side opposite the angle to the length of the hypotenuse (Opposite / Hypotenuse).
  • Cosine (cos θ) is the ratio of the length of the adjacent side to the angle to the length of the hypotenuse (Adjacent / Hypotenuse).
  • Tangent (tan θ) is the ratio of the length of the opposite side to the angle to the length of the adjacent side (Opposite / Adjacent). It can also be expressed as sin θ / cos θ.

Reciprocal Functions: Cosecant, Secant, Cotangent

The other three primary trigonometric functions are reciprocals of the first three:

  • Cosecant (csc θ) is the reciprocal of sine: 1 / sin θ (Hypotenuse / Opposite).
  • Secant (sec θ) is the reciprocal of cosine: 1 / cos θ (Hypotenuse / Adjacent).
  • Cotangent (cot θ) is the reciprocal of tangent: 1 / tan θ (Adjacent / Opposite). It can also be expressed as cos θ / sin θ.

Units of Measurement: Degrees vs. Radians

Trigonometric functions can operate on angles measured in either degrees or radians. A full circle is 360 degrees or 2π radians. It's crucial to specify the correct unit for accurate calculations.

  • Degrees (°): A common unit where a full circle is divided into 360 parts.
  • Radians (rad): The standard unit of angular measure in many areas of mathematics and physics. A full circle is 2π radians. 1 radian is approximately 57.3 degrees.

How This Calculator Works

This calculator takes an angle value, its unit (degrees or radians), and a selected trigonometric function to compute the result. It utilizes the built-in JavaScript Math object to perform these calculations.

For example, if you input 30 for the angle value, select "Degrees" for the unit, and choose "Sine", the calculator will compute sin(30°), which is 0.5.

If you input π/6 (approximately 0.5236) for the angle value, select "Radians" for the unit, and choose "Sine", the calculator will also compute sin(π/6 radians), which is 0.5.

Use Cases for Trigonometric Functions

Trigonometric functions have widespread applications:

  • Physics and Engineering: Analyzing wave phenomena (sound, light, electricity), oscillations, projectile motion, and AC circuits.
  • Navigation and Surveying: Calculating distances and angles, determining positions.
  • Computer Graphics and Game Development: Rotating objects, defining curves and movements.
  • Astronomy: Calculating distances to celestial bodies, understanding orbits.
  • Architecture and Construction: Designing structures with specific angles and slopes.
  • Signal Processing: Analyzing and manipulating signals like audio and radio waves.
function calculateTrig() { var angleValue = parseFloat(document.getElementById("angleValue").value); var angleUnit = document.getElementById("angleUnit").value; var trigFunction = document.getElementById("trigFunction").value; var resultDisplay = document.getElementById("calculationResult"); if (isNaN(angleValue)) { resultDisplay.textContent = "Error: Please enter a valid number for the angle."; return; } var angleInRadians; // Convert angle to radians if it's in degrees if (angleUnit === "degrees") { angleInRadians = angleValue * (Math.PI / 180); } else { angleInRadians = angleValue; } var result; // Perform calculation based on selected function switch (trigFunction) { case "sin": result = Math.sin(angleInRadians); break; case "cos": result = Math.cos(angleInRadians); break; case "tan": // Handle vertical asymptotes for tangent (e.g., 90 degrees, 270 degrees) if (Math.abs(Math.cos(angleInRadians)) < 1e-10) { // Check if cosine is very close to zero result = "Undefined (approaches infinity)"; } else { result = Math.tan(angleInRadians); } break; case "csc": var sinValue = Math.sin(angleInRadians); // Handle division by zero for cosecant (when sin is 0, e.g., 0, 180 degrees) if (Math.abs(sinValue) < 1e-10) { // Check if sine is very close to zero result = "Undefined (approaches infinity)"; } else { result = 1 / sinValue; } break; case "sec": var cosValue = Math.cos(angleInRadians); // Handle division by zero for secant (when cos is 0, e.g., 90, 270 degrees) if (Math.abs(cosValue) < 1e-10) { // Check if cosine is very close to zero result = "Undefined (approaches infinity)"; } else { result = 1 / cosValue; } break; case "cot": var sinValueCot = Math.sin(angleInRadians); var cosValueCot = Math.cos(angleInRadians); // Handle division by zero for cotangent (when sin is 0) if (Math.abs(sinValueCot) < 1e-10) { // Check if sine is very close to zero result = "Undefined (approaches infinity)"; } else { result = cosValueCot / sinValueCot; } break; default: result = "Invalid function selected"; } // Display result, formatting for very small numbers close to zero if (typeof result === 'number' && Math.abs(result) < 1e-10) { resultDisplay.textContent = "0"; } else if (typeof result === 'number') { resultDisplay.textContent = result.toFixed(10); // Display with reasonable precision } else { resultDisplay.textContent = result; // Display "Undefined" messages } }

Leave a Comment