diff --git a/Calculators/Sine-Formula-Calculator/README.md b/Calculators/Sine-Formula-Calculator/README.md new file mode 100644 index 000000000..664f12ee7 --- /dev/null +++ b/Calculators/Sine-Formula-Calculator/README.md @@ -0,0 +1,26 @@ +#

Sine Formula Calculator

+ +## 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 :- + diff --git a/Calculators/Sine-Formula-Calculator/index.html b/Calculators/Sine-Formula-Calculator/index.html new file mode 100644 index 000000000..d7d490321 --- /dev/null +++ b/Calculators/Sine-Formula-Calculator/index.html @@ -0,0 +1,41 @@ + + + + + + + + Sine Formula Calculator + + + +
+

Sine Formula Calculator

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

+
+ + + + + diff --git a/Calculators/Sine-Formula-Calculator/script.js b/Calculators/Sine-Formula-Calculator/script.js new file mode 100644 index 000000000..26e3fd08c --- /dev/null +++ b/Calculators/Sine-Formula-Calculator/script.js @@ -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)}`; +} \ No newline at end of file diff --git a/Calculators/Sine-Formula-Calculator/style.css b/Calculators/Sine-Formula-Calculator/style.css new file mode 100644 index 000000000..0d0fe1617 --- /dev/null +++ b/Calculators/Sine-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 8c1d97bda..c6d975961 100644 --- a/index.html +++ b/index.html @@ -4427,6 +4427,20 @@

Calculates the simple interest.

+
+
+

Sine Formula Calculator

+

Calculates the angle of the triangle using sine formula.

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

Sleep Calculator