Skip to content

Commit

Permalink
Added Sine-Formula-Calculator
Browse files Browse the repository at this point in the history
  • Loading branch information
sharmi4590 committed Aug 9, 2024
1 parent b58521b commit 63ef4d3
Show file tree
Hide file tree
Showing 5 changed files with 299 additions and 0 deletions.
26 changes: 26 additions & 0 deletions Calculators/Sine-Formula-Calculator/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# <p align="center">Sine Formula Calculator</p>

## Description :-

Cosine Formula Calculator is a web application that calculates the angle of triangle using sine formula given a triangle ABC with sides a , b, c:
## Use the Law of Cosines to Calculate (sin A)

Cos A=(b^2+c^2-a^2)/2bc.
Sin A=sqrt(1-(cosA*cosA))
## Use the Law of Cosines to Calculate (sin B)

Cos B=(a^2+c^2-b^2)/2ac.
Sin B=sqrt(1-(cosB*cosB))
## Use the Law of Cosines to Calculate (sin C)

Cos A=(b^2+a^2-c^2)/2ba.
Sin C=sqrt(1-(cosC*cosC))

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

41 changes: 41 additions & 0 deletions Calculators/Sine-Formula-Calculator/index.html
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>Sine Formula Calculator</title>
</head>

<body>
<header>
<h1>Sine 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="SinA">SinA</option>
<option value="SinB">SinB</option>
<option value="SinC">SinC</option>
</select>

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

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

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

</html>
61 changes: 61 additions & 0 deletions Calculators/Sine-Formula-Calculator/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
function calculate() {
// Get input values
const firstSide = parseFloat(document.getElementById('firstSide').value);
const secondSide = parseFloat(document.getElementById('secondSide').value);
const thirdSide = parseInt(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 the valid numbers for all fields.";
return;

}
// Perform the selected calculation
let result;
if (calculationType === 'SinA') {
// Calculate the angle A
result = calculateSinA(firstSide, secondSide, thirdSide);
} else if (calculationType === 'SinB') {
// Calculate the angle B
result = calculateSinB(firstSide, secondSide, thirdSide);
} else if (calculationType === 'SinC') {
// Calculate the angle C
result = calculateSinC(firstSide, secondSide, thirdSide);
}

// Display the result
const resultElement = document.getElementById('result');
resultElement.textContent = result;
}

function calculateSinA(firstSide, secondSide, thirdSide) {
// Calculate the angle A
const a = firstSide;
const b = secondSide;
const c = thirdSide;
const cosA=(((b * b) + (c * c) - (a * a)) / (2 * b * c));
return `The value of sinA is: ${Math.sqrt(1 - cosA * cosA)}`;
}

function calculateSinB(firstSide, secondSide, thirdSide) {
// Calculate the angle B
const a = firstSide;
const b = secondSide;
const c = thirdSide;
const cosB=(((a * a) + (c * c) - (b * b)) / (2 * a * c))
return `The value of SinB is: ${Math.sqrt(1 - cosB * cosB)}`;
}


function calculateSinC(firstSide, secondSide, thirdSide) {
// Calculate the angle C
const a = firstSide;
const b = secondSide;
const c = thirdSide;
const cosC=(((b * b) + (a * a) - (c * c)) / (2 * b * a))
return `The value of SinC is: ${Math.sqrt(1 - cosC * cosC)}`;
}
157 changes: 157 additions & 0 deletions Calculators/Sine-Formula-Calculator/style.css
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;
}
}
14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4427,6 +4427,20 @@ <h3>Calculates the simple interest.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Sine Formula Calculator</h2>
<h3>Calculates the angle of the triangle using sine formula.</h3>
<div class="card-footer">
<a href="./Calculators/Sine-Formula-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Sine-Formula-Calculator" 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>Sleep Calculator</h2>
Expand Down

0 comments on commit 63ef4d3

Please sign in to comment.