Skip to content

Commit

Permalink
Merge pull request #1 from Rakesh9100/main
Browse files Browse the repository at this point in the history 
Improved UI of Modulation Calculator
  • Loading branch information
@saurabhhsinghh
saurabhhsinghh authored Dec 15, 2024
2 parents 31ab1a4 + 2d0fcef commit 0584942
Show file tree
Hide file tree
Showing 21 changed files with 1,080 additions and 80 deletions.
21 changes: 21 additions & 0 deletions Calculators/Factor-Calculator/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# <p align="center">Factor Calculator</p>

## Description :-

The Factor Calculator is a simple and interactive web application designed to calculate all the factors of a given number. With a clean and user-friendly interface, it allows users to quickly input a number and view its factors in a visually appealing format.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Features :-

- The application dynamically calculates the factors of the input number and displays the results instantly without requiring page reloads.
- Displays meaningful error messages for invalid or missing inputs.
- Aesthetic layout styled with CSS to provide a visually engaging experience.

## Screenshots :-

![image](https://github.com/user-attachments/assets/1795f05f-c5b3-429c-b819-ec3938da711c)
22 changes: 22 additions & 0 deletions Calculators/Factor-Calculator/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Factor Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- Title of the application -->
<h1>Factor Calculator</h1>
<!-- Input field for the user to enter a number -->
<input type="number" id="number" placeholder="Enter a number" />
<!-- Button to trigger the factor calculation -->
<button onclick="calculateFactors()">Calculate Factors</button>
<!-- Div to display the calculation results -->
<div class="result" id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
25 changes: 25 additions & 0 deletions Calculators/Factor-Calculator/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
function calculateFactors() {
// Retrieve the input value and parse it as an integer
const number = parseInt(document.getElementById('number').value);
// Get a reference to the result display div
const resultDiv = document.getElementById('result');

// Validate the input: check if it's a number and greater than 0
if (isNaN(number) || number <= 0) {
resultDiv.innerHTML = 'Please enter a positive number.';
resultDiv.style.display = 'block';
return;
}

let factors = [];
// Loop through numbers from 1 to the input number
for (let i = 1; i <= number; i++) {
if (number % i === 0) {
factors.push(i);
}
}

// Display the list of factors in the result div
resultDiv.innerHTML = `Factors of ${number}: <strong>${factors.join(', ')}</strong>`;
resultDiv.style.display = 'block';
}
165 changes: 165 additions & 0 deletions Calculators/Factor-Calculator/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(120deg, #1e3c72, #2a5298, #6dd5ed);
background-size: 200% 200%;
animation: backgroundShift 12s ease-in-out infinite;
color: white;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}

.container {
height: 400px;
width: 400px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.4);
border-radius: 10px;
overflow: hidden;
background-color: #1c1b29;
text-align: center;
position: relative;
display: flex; /* Added */
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
flex-direction: column; /* Stack elements vertically */
}

.container::before {
content: "";
background-image: conic-gradient(
#ff6b6b, #ffcc70, #1dd1a1, #54a0ff, #ff6b6b
);
height: 150%;
width: 150%;
position: absolute;
left: -25%;
top: -25%;
animation: rotate 3s infinite linear;
}

.container::after {
content: '';
height: 94%;
width: 94%;
position: absolute;
background-color: #1c1b29;
border-radius: 10px;
top: 3%;
left: 3%;
color: #ffffff;
display: grid;
place-items: center;
font-size: 20px;
letter-spacing: 6px;
box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
}

h1 {
background: radial-gradient(circle, rgb(0, 149, 255),white);
background-clip: text;
margin-bottom: 20px;
position: relative;
z-index: 1;
font-size: 35px;
color: transparent;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
animation: gemini 15s linear infinite;
background-size: 200% 200%;
}

input {
width: 85%;
padding: 10px;
border: none;
border-radius: 10px;
margin-top: 15px;
margin-bottom: 15px;
outline: none;
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s;
}

input:focus {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

button {
padding: 10px 15px;
border: none;
border-radius: 10px;
margin-top: 20px;
margin-bottom: 10px;
background: linear-gradient(45deg, #ff6f61, #f6416c);
color: white;
font-weight: bold;
cursor: pointer;
transition: transform 0.3s ease, background 0.3s;
position: relative;
z-index: 1;
font-size: 17px;
}

button:hover {
background: linear-gradient(45deg, #f6416c, #ff6f61);
transform: scale(1.1);
}

.result {
margin-top: 30px;
margin-left: 20px;
margin-right: 20px;
padding: 10px;
background: rgba(16, 0, 0, 0.2);
border-radius: 10px;
display: none;
position: relative;
z-index: 1;
color: #ffffff;
font-size: 18px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

@keyframes rotate {
100% {
transform: rotate(-360deg);
}
}

@keyframes backgroundShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

@keyframes gemini {
0%{
background-position: 0% 0%;
}
50%{
background-position: 100% 100%;
}
100%{
background-position: 0% 0%;
}

}
6 changes: 3 additions & 3 deletions Calculators/GST-Calculator/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ function calculateGST() {
finalPriceInr = totalAmount - gstAmountInr;
}

var inrToUsdRate = 0.014; // 1 INR to USD
var gstToUsdRate = 0.74; // 1 GST unit (currency) to USD
var inrToUsdRate = 0.012; // 1 INR to USD


var gstAmountUsd = gstAmountInr * gstToUsdRate;
var gstAmountUsd = gstAmountInr * inrToUsdRate;
var finalPriceUsd = finalPriceInr * inrToUsdRate;

var resultElement = document.getElementById("result");
Expand Down
28 changes: 28 additions & 0 deletions Calculators/Scientific-Calculator/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# <p align="center">Scientific Calculator</p>

## Description :-

A fully functional scientific calculator that supports:

- Trigonometric functions such as sin, cos, tan
- Inverse trigonometric functions like arcsin, arccos, arctan
- Logarithmic functions (log, log10)
- Square roots, cube roots, and other mathematical operations
- A sleek dark-themed UI with enhanced usability and accessibility

This version also includes:

- Error handling for invalid input (e.g., "asin(0.5)" or "log(10)").
- Support for edge cases (e.g., logarithms with values <= 0).
- A clear, user-friendly layout with all buttons styled appropriately, enhancing the overall experience.
- Includes a "Clear" button for resetting the input, a "Delete" button for removing the last character, and an "Equals" button in an orange color to indicate its importance.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

![image](https://github.com/user-attachments/assets/0fae5a34-a2eb-47ac-a922-c7d9ec4beebf)
89 changes: 89 additions & 0 deletions Calculators/Scientific-Calculator/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!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>Scientific Calculator</title>
</head>
<body>
<div class="container">
<!-- User Manual on the Left -->
<div class="manual">
<h2>How to Use</h2>
<ul>
<li><b>Numbers:</b> Click number buttons (0-9) to enter numbers.</li>
<li><b>Operations:</b> Use the operators for basic arithmetic (+, -, *, /).</li>
<li><b>Trigonometric Functions:</b> Click a number for trigonometric calculations followed by "sin", "cos", or "tan".</li>
<li><b>Inverse Trigonometric Functions:</b> Click a number for trigonometric calculations followed by "asin", "acos", or "atan" for inverse trigonometric calculations.</li>
<li><b>Logarithmic Functions:</b> Use "log" for base-10 log and "ln" for the natural log.</li>
<li><b>Square Root (√):</b> Click the "√" button for square roots.</li>
<li><b>Cube Root (∛):</b> Click the "∛" button for cube roots.</li>
<li><b>Power (x²):</b> Click "x²" for squaring a number.</li>
<li><b>Clear:</b> Click "C" to clear the display, or "DEL" to delete the last entered character.</li>
<li><b>Equals:</b> Click "=" to evaluate the expression.</li>
</ul>
</div>

<!-- Calculator Section -->
<div class="calculator-box">
<div class="calculator">
<div class="display">
<input type="text" id="output" disabled />
</div>
<div class="buttons">
<!-- Row 1 -->
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('/')">/</button>

<!-- Row 2 -->
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')">*</button>

<!-- Row 3 -->
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('-')">-</button>

<!-- Row 4 -->
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="clearDisplay()">CLEAR</button>
<button onclick="appendToDisplay('+')">+</button>

<!-- Row 5 - Trigonometric Functions -->
<button onclick="calculateTrig('sin')">sin</button>
<button onclick="calculateTrig('cos')">cos</button>
<button onclick="calculateTrig('tan')">tan</button>

<!-- Row 6 - Inverse Trigonometric Functions -->
<button onclick="calculateInverse('asin')">asin</button>
<button onclick="calculateInverse('acos')">acos</button>
<button onclick="calculateInverse('atan')">atan</button>

<!-- Row 7 - Logarithmic Functions -->
<button onclick="calculateLog()">log</button>
<button onclick="calculateLn()">ln</button>

<!-- Row 8 - Miscellaneous -->
<button onclick="calculateSqrt()">√</button>
<button onclick="calculateCbrt()">∛</button>
<button onclick="calculatePower()">x²</button>
<button onclick="calculateExponential()">e^x</button>

<!-- Row 9 - Equal and Delete -->
<button onclick="deleteLast()">DEL</button>
<button onclick="calculateResult()">=</button>
</div>
</div>
</div>
</div>

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

0 comments on commit 0584942

Please sign in to comment.