From 49bb4ea3aa63415b14fb7fc04396aa019d5bcac9 Mon Sep 17 00:00:00 2001 From: isid555 Date: Thu, 15 Aug 2024 23:08:53 +0530 Subject: [PATCH] Adding Tangent Calculator --- .../Tangent-Formula-Calculator/README.md | 0 .../Tangent-Formula-Calculator/index.html | 41 +++++ .../Tangent-Formula-Calculator/script.js | 60 +++++++ .../Tangent-Formula-Calculator/style.css | 157 ++++++++++++++++++ index.html | 17 ++ 5 files changed, 275 insertions(+) create mode 100644 Calculators/Tangent-Formula-Calculator/README.md create mode 100644 Calculators/Tangent-Formula-Calculator/index.html create mode 100644 Calculators/Tangent-Formula-Calculator/script.js create mode 100644 Calculators/Tangent-Formula-Calculator/style.css diff --git a/Calculators/Tangent-Formula-Calculator/README.md b/Calculators/Tangent-Formula-Calculator/README.md new file mode 100644 index 000000000..e69de29bb diff --git a/Calculators/Tangent-Formula-Calculator/index.html b/Calculators/Tangent-Formula-Calculator/index.html new file mode 100644 index 000000000..738282339 --- /dev/null +++ b/Calculators/Tangent-Formula-Calculator/index.html @@ -0,0 +1,41 @@ + + + + + + + + Tangent Formula Calculator + + + +
+

Tangent Formula Calculator

+
+ +
+ + + + + + + + + + + + + + +

+
+ + + + + diff --git a/Calculators/Tangent-Formula-Calculator/script.js b/Calculators/Tangent-Formula-Calculator/script.js new file mode 100644 index 000000000..5d380ef91 --- /dev/null +++ b/Calculators/Tangent-Formula-Calculator/script.js @@ -0,0 +1,60 @@ +function calculate() { + // Get input values + const firstSide = parseFloat(document.getElementById('firstSide').value); + const secondSide = parseFloat(document.getElementById('secondSide').value); + const thirdSide = parseFloat(document.getElementById('thirdSide').value); + const calculationType = document.getElementById('calculationType').value; + + const a = firstSide; + const b = secondSide; + const c = thirdSide; + + if (isNaN(a) || isNaN(b) || isNaN(c)) { + document.getElementById("result").innerText = "Please enter valid numbers for all fields."; + return; + } + + // Perform the selected calculation + let result; + if (calculationType === 'TanA') { + // Calculate the tangent of angle A + result = calculateTanA(firstSide, secondSide, thirdSide); + } else if (calculationType === 'TanB') { + // Calculate the tangent of angle B + result = calculateTanB(firstSide, secondSide, thirdSide); + } else if (calculationType === 'TanC') { + // Calculate the tangent of angle C + result = calculateTanC(firstSide, secondSide, thirdSide); + } + + // Display the result + const resultElement = document.getElementById('result'); + resultElement.textContent = result; +} + +function calculateTanA(firstSide, secondSide, thirdSide) { + const a = firstSide; + const b = secondSide; + const c = thirdSide; + const cosA = (((b * b) + (c * c) - (a * a)) / (2 * b * c)); + const sinA = Math.sqrt(1 - cosA * cosA); + return `The value of TanA is: ${sinA / cosA}`; +} + +function calculateTanB(firstSide, secondSide, thirdSide) { + const a = firstSide; + const b = secondSide; + const c = thirdSide; + const cosB = (((a * a) + (c * c) - (b * b)) / (2 * a * c)); + const sinB = Math.sqrt(1 - cosB * cosB); + return `The value of TanB is: ${sinB / cosB}`; +} + +function calculateTanC(firstSide, secondSide, thirdSide) { + const a = firstSide; + const b = secondSide; + const c = thirdSide; + const cosC = (((a * a) + (b * b) - (c * c)) / (2 * a * b)); + const sinC = Math.sqrt(1 - cosC * cosC); + return `The value of TanC is: ${sinC / cosC}`; +} diff --git a/Calculators/Tangent-Formula-Calculator/style.css b/Calculators/Tangent-Formula-Calculator/style.css new file mode 100644 index 000000000..0d0fe1617 --- /dev/null +++ b/Calculators/Tangent-Formula-Calculator/style.css @@ -0,0 +1,157 @@ +/* Global Styles */ +body { + font-family: 'Helvetica Neue', Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f0f4f8; /* Light background color */ + background-image: linear-gradient(135deg, rgb(240, 182, 205), #ffdd00, #00ff99, #00aaff, #a400ff); + background-size: 400% 400%; /* Ensure the gradient covers the full background */ + animation: gradient 15s ease infinite; /* Animation for gradient */ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +/* Header Styles */ +header { + padding: 0em; + font-weight: bold; + font-size: 1.8em; /* Medium size */ + color: #fff; /* White color for contrast */ + text-align: center; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Stronger shadow for visibility */ + margin-bottom: 30px; +} + +/* Calculator Container */ +#calculator { + max-width: 400px; + width: 90%; + margin: 20px auto; + padding: 20px; + border-radius: 15px; + background: rgba(255, 255, 255, 0.9); /* Slightly transparent white */ + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Darker shadow for depth */ + transition: transform 0.3s ease; +} + +/* Hover Effect on Calculator */ +#calculator:hover { + transform: scale(1.02); +} + +/* Label Styles */ +label { + font-weight: bold; + display: block; + margin-bottom: 8px; + color: #333333; +} + +/* Input and Select Styles */ +input, +select { + width: 100%; + padding: 12px; + margin-bottom: 16px; + box-sizing: border-box; + border-radius: 10px; + border: 1px solid #cccccc; + transition: border-color 0.3s, box-shadow 0.3s; +} + +/* Input Focus Effect */ +input:focus, +select:focus { + border-color: #6c63ff; + box-shadow: 0 0 5px rgba(108, 99, 255, 0.5); + outline: none; +} + +/* Button Styles */ +button { + width: 100%; + height: 50px; + font-size: 18px; + cursor: pointer; + background-color: #6c63ff; /* Button background color */ + color: #ffffff; + border: none; + border-radius: 10px; + transition: background-color 0.3s, transform 0.2s; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +/* Button Hover Effect */ +button:hover { + background-color: #5a52e0; /* Darker shade on hover */ + transform: translateY(-2px); +} + +/* Result Styles */ +#result { + margin-top: 16px; + font-weight: bold; + font-size: 1.5em; + color: #333333; + text-align: center; + opacity: 0; /* Initially hidden */ + animation: fadeIn 0.5s forwards; /* Animation */ +} + +/* Fade-in Animation */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Media Queries for Responsiveness */ +@media (max-width: 768px) { + header { + font-size: 1.6em; /* Adjust for medium screens */ + } + + #calculator { + max-width: 90%; + } + + button { + height: 45px; + font-size: 16px; + } +} + +@media (max-width: 480px) { + header { + font-size: 1.4em; /* Further adjust for small screens */ + } + + button { + height: 40px; + font-size: 14px; + } + + #result { + font-size: 1.2em; + } +} diff --git a/index.html b/index.html index ae6fdb43f..122176569 100644 --- a/index.html +++ b/index.html @@ -115,6 +115,8 @@

Search Calculator


+ +

2D Distance Calculator

@@ -5145,6 +5147,7 @@

Calculates the T-score to test for significant differences between the sampl

+

TNEA Cut Off Calculator

@@ -5159,6 +5162,20 @@

Calculates the Tamil Nadu Engineering Admissions cut-off marks based on vari

+
+
+

Tangent Formula Calculator

+

Calculates the tangent angle of a triangle

+
+ + + + + Source Code + +
+
+

Taxi Fare Calculator