Create a Trigonometry Toolbox using HTML CSS and JavaScript

Last Updated : 24 Jul, 2024

This article will demonstrate how we can create a Trigonometry Toolbox using HTML, CSS, and JavaScript. Here, we have to give an angle in degrees as input in the input box and it calculates the corresponding value of the given angle. The application is user-friendly users can easily find the trigonometric values. There is validation if the user doesn't enter any value and clicks on the calculate button then the message would appear as Please enter a valid angle.

Preview

Approach

In JavaScript, the function calulateTrigFun() is defined in which firstly the document.getElementById('angleInput').value returns a string value which is converted to a numeric value using parseFloat, if the first character cannot be converted to a numeric value then it returns NaN.
If NaN is returned, then display the message "Please enter a valid angle".
Then convert the input angle which is in degrees to radians using the formula angleInput * (Math. PI / 180).
Now, calculate the values of sine, cosine, and tangent by using corresponding JavaScript Math.sin(), Math.cos(), and Math.tan() methods.
Calculate the values of cosecant, secant, and cotangent by using the formulas 1/sine, 1/cosine, and 1/tangent respectively.
Display the values of trigonometric ratios of the input angle.

Example: The example calculates the values of trigonometric ratios of a given angle using HTML, CSS, and JavaScript.

HTML

<!--index.html file-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <title>Trigonometry Toolbox</title>
    <link rel="stylesheet" 
          href="styles.css" />
</head>

<body>
    <div class="calculator">
        <div class="calc_head">
            <h1>Trigonometry Toolbox</h1>
        </div>

        <label for="angleInput">
              Enter an angle (in degrees):
        </label>
        <input type="number" 
               id="angleInput" 
               min="0" 
               step="any" />

        <button onclick="calculateTrigFun()">
            Calculate
        </button>
        <pre id="output"></pre>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

/* style.css file */

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.calc_head {
    text-align: center;
    color: rgb(137, 213, 93);
    margin-bottom: 50px;
}

.calculator {
    text-align: center;
    padding: 80px;
    border: 1px solid #7ac1e2;
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-bottom: 5px;
}

input {
    padding: 5px;
    margin-bottom: 10px;
}

button {
    padding: 10px 20px;
    font-weight: bold;
    border: 1px solid rgb(44, 231, 128);
}

#output {
    font-size: 1vw;
    margin-top: 50px;
    font-weight: bold;
    text-align: center;
}

JavaScript

//Script.js file

function calculateTrigFun() {
    const angleInput = parseFloat(
        document.getElementById("angleInput").value);

    // ParseFloat() returns first number of the parsed value.
    // If first character cannot convert then NaN is returned.
    if (isNaN(angleInput)) {
        document.getElementById("output").innerText =
            "Please enter a valid angle.";
        return;
    }

    // Convert angleInput(degrees into Radians)
    const angleInRadians = angleInput * (Math.PI / 180);

    // Calculate sine value
    const sine = Math.sin(angleInRadians); 

    // Calculate cosine value
    const cosine = Math.cos(angleInRadians); 

    // Calculate tangent value
    const tangent = Math.tan(angleInRadians); 

    // The toFixed(4) method is roundoff the 
    // value up to 4 decimal places
    const outputText = `Sine: ${sine.toFixed(4)}, 
    Cosine: ${cosine.toFixed(4)}, 
    Tangent: ${tangent.toFixed(4)}, 
    Cosecant: ${(1 / sine).toFixed(4)}, 
    Secant: ${(1 / cosine).toFixed(4)},
    Cotangent: ${(1 / tangent).toFixed(4)}`;

    // Dispaly the output
    document.getElementById("output").innerText = outputText;
}