Create a Trigonometry Toolbox using HTML CSS and JavaScript Last Updated : 24 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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 ApproachIn 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; } Output: Comment More infoAdvertise with us Next Article Create a Trigonometry Toolbox using HTML CSS and JavaScript lokesh2405 Follow Improve Article Tags : JavaScript Web Technologies Geeks Premier League JavaScript-Properties Geeks Premier League 2023 +1 More Similar Reads Create a Pomodoro Timer using HTML CSS and JavaScript In this article, we will see how to design Pomodoro Timer with the help of HTML CSS, and JavaScript. The Pomodoro Technique is a time management method that involves breaking your work into focused intervals, typically 25 minutes, followed by short breaks. After completing four cycles, take a longer 3 min read Create a Graph Plotter using HTML CSS and JavaScript In this article, we will create an interactive and user-friendly graph plotter using HTML, CSS, and JavaScript. This project allows users to enter mathematical equations and instantly see the corresponding graphs in a web browser, providing a user-friendly and interactive experience. The application 3 min read Create a User Polls Project using HTML CSS & JavaScript Creating a user polls project has various valuable purposes, including gathering feedback, engaging users, personalizing content, fostering community, conducting research, A/B testing, and improving the user experience. Clear objectives are crucial, and in this example, we focus on collecting data o 3 min read Create a Prime Number Finder using HTML CSS and JavaScript In this article, we will see how to create a Prime Number Finder using HTML, CSS, and JavaScript. The main objective of this project is to allow users to input a number and check if it is a prime number or not. Prime numbers are those, that can only be divided by 1 and themselves. We'll develop a ba 3 min read How to Create Stopwatch using HTML CSS and JavaScript ? In this article, we will learn How to create a Stopwatch using HTML CSS, and JavaScript. The StopWatch will have the Start, Stop, and Reset functionality.Prerequisites:HTML CSS JavaScriptApproach:Create one container in which all the elements are present.Inside this container add 2 divs that contain 3 min read How to Create a Portfolio Website using HTML CSS and JavaScript ? A portfolio website is a website that represents you online on the web pages. It contains different sections like Introduction to Yourself, About You, Your Services, Your Contact Details, and Your Portfolio. We are going to build all of the sections with an interactive and attractive web design that 15+ min read Create a Length Converter using HTML CSS and JavaScript In this article, we will learn how to create a length converter using HTML, CSS, and JavaScript. The Length Converter is an intuitive web-based application that eliminates the complexities associated with manual conversions. Its user-friendly interface allows users to input a numerical value and sel 6 min read Temperature Converter using HTML CSS and JavaScript In this article, we will see Temperature Conversion between Celsius, Fahrenheit & Kelvin using HTML CSS & JavaScript. The Temperature is generally measured in terms of unit degree., i.e. in degrees centigrade, in degrees, Fahrenheit & Kelvin. Celsius is a standard unit of temperature on 3 min read Create a Health Tracker using HTML CSS & JavaScript In this article, we will see how we can create a health tracker using HTML, CSS, and JavaScript.Here, we have provided the user with three inputs i.e. input water intake, exercise duration, and blood sugar levels. The user can input these daily and then the provided data is stored in the localStorag 5 min read How to create a revealing sidebar using HTML CSS and JavaScript? A revealing sidebar is a hidden UI element that becomes visible upon user interaction, such as clicking or swiping, providing navigation links. The content of the page will rotate and the navigation bar will reveal itself when the menu button is clicked. ApproachCreate an HTML file with headings and 3 min read Like