Skip to content

Commit

Permalink
Adding Tangent Calculator
Browse files Browse the repository at this point in the history
  • Loading branch information
isid555 committed Aug 15, 2024
1 parent 0c605a9 commit 49bb4ea
Show file tree
Hide file tree
Showing 5 changed files with 275 additions and 0 deletions.
Empty file added Calculators/Tangent-Formula-Calculator/README.md
View file
Empty file.
41 changes: 41 additions & 0 deletions Calculators/Tangent-Formula-Calculator/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Tangent Formula Calculator</title>
</head>

<body>
<header>
<h1>Tangent Formula Calculator</h1>
</header>

<section id="calculator">
<label for="firstSide">First Side (a):</label>
<input type="number" id="firstSide" required placeholder="Enter (a)">

<label for="secondSide">Second Side (b):</label>
<input type="number" id="secondSide" required placeholder="Enter (b)">

<label for="thirdSide">Third Side (c):</label>
<input type="number" id="thirdSide" required placeholder="Enter (c)">

<label for="calculationType">Choose Angle:</label>
<select id="calculationType">
<option value="TanA">TanA</option>
<option value="TanB">TanB</option>
<option value="TanC">TanC</option>
</select>

<button onclick="calculate()">Calculate</button>

<p id="result"></p>
</section>

<script src="script.js"></script>
</body>

</html>
60 changes: 60 additions & 0 deletions Calculators/Tangent-Formula-Calculator/script.js
View file
Original file line number Diff line number Diff line change
@@ -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}`;
}
157 changes: 157 additions & 0 deletions Calculators/Tangent-Formula-Calculator/style.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
17 changes: 17 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ <h1>Search Calculator</h1><br>
</div>
</div>



<div class="box">
<div class="content">
<h2>2D Distance Calculator</h2>
Expand Down Expand Up @@ -5145,6 +5147,7 @@ <h3>Calculates the T-score to test for significant differences between the sampl
</div>
</div>
</div>

<div class="box">
<div class="content">
<h2>TNEA Cut Off Calculator</h2>
Expand All @@ -5159,6 +5162,20 @@ <h3>Calculates the Tamil Nadu Engineering Admissions cut-off marks based on vari
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Tangent Formula Calculator</h2>
<h3>Calculates the tangent angle of a triangle</h3>
<div class="card-footer">
<a href="./Calculators/Tangent-Formula-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/" title="Source Code" target="_blank">
<img src="./assets/images/github.png" alt="Source Code"></img>
</a>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Taxi Fare Calculator</h2>
Expand Down

1 comment on commit 49bb4ea

@isid555
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue: Adding Tangent Calculator

#1836

Description:

The requirement is to integrate a new feature into the existing project: a tan calculator. The tan calculator should allow users to input a value (angle) and calculate its tangent.

Screenshots

image

Kindly check and review this commit

Please sign in to comment.