Skip to content

Commit

Permalink
Added Modulation Calculator (#1909)
Browse files Browse the repository at this point in the history
  • Loading branch information
saurabhhsinghh authored Dec 15, 2024
1 parent 2d0fcef commit 8aad298
Show file tree
Hide file tree
Showing 5 changed files with 273 additions and 0 deletions.
15 changes: 15 additions & 0 deletions Calculators/Modulation-Calculator/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# <p align="center">Modulation Calculator</p>

## Description :-

Calculates the modulation index for amplitude modulation and frequency modulation.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

![image](https://github.com/user-attachments/assets/b8ee206d-4b49-410e-ac7f-d2286152f03b)
44 changes: 44 additions & 0 deletions Calculators/Modulation-Calculator/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Modulation Calculator</title>
</head>
<body>
<div class="container">
<header class="header">
<h1>Modulation Calculator</h1>
<p>Calculate key parameters for Amplitude and Frequency Modulation</p>
</header>

<main class="card">
<div class="form-group">
<label for="modulationType">Select Modulation Type:</label>
<select id="modulationType" class="select-field">
<option value="am">Amplitude Modulation (AM)</option>
<option value="fm">Frequency Modulation (FM)</option>
</select>
</div>

<div id="inputFields" class="input-fields">
<!-- Dynamic fields will load here -->
</div>

<button id="calculateBtn" class="btn">Calculate</button>

<div id="result" class="result hidden">
<h2>Results</h2>
<div id="resultContent"></div>
</div>
</main>

<footer class="footer">
<p>&copy; 2024 Modulation Calculator. All rights reserved.</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
86 changes: 86 additions & 0 deletions Calculators/Modulation-Calculator/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
document.addEventListener("DOMContentLoaded", () => {
const modulationType = document.getElementById("modulationType");
const inputFields = document.getElementById("inputFields");
const calculateBtn = document.getElementById("calculateBtn");
const result = document.getElementById("result");
const resultContent = document.getElementById("resultContent");

modulationType.addEventListener("change", updateFields);
calculateBtn.addEventListener("click", calculateModulation);

function updateFields() {
const type = modulationType.value;
inputFields.innerHTML = "";

if (type === "am") {
inputFields.innerHTML = `
<div class="form-group">
<label for="carrierAmplitude">Carrier Amplitude (A<sub>c</sub>)</label>
<input type="number" id="carrierAmplitude" placeholder="Enter carrier amplitude">
</div>
<div class="form-group">
<label for="messageAmplitude">Message Amplitude (A<sub>m</sub>)</label>
<input type="number" id="messageAmplitude" placeholder="Enter message amplitude">
</div>
<div class="form-group">
<label for="carrierPower">Carrier Power (P<sub>c</sub>)</label>
<input type="number" id="carrierPower" placeholder="(Optional) Enter carrier power">
</div>
`;
} else if (type === "fm") {
inputFields.innerHTML = `
<div class="form-group">
<label for="frequencyDeviation">Frequency Deviation (\\u0394f)</label>
<input type="number" id="frequencyDeviation" placeholder="Enter frequency deviation">
</div>
<div class="form-group">
<label for="modulatingFrequency">Modulating Frequency (f<sub>m</sub>)</label>
<input type="number" id="modulatingFrequency" placeholder="Enter modulating frequency">
</div>
`;
}
}

function calculateModulation() {
const type = modulationType.value;
let output = "";

if (type === "am") {
const Ac = parseFloat(document.getElementById("carrierAmplitude").value);
const Am = parseFloat(document.getElementById("messageAmplitude").value);
const Pc = parseFloat(document.getElementById("carrierPower").value) || 0;

if (isNaN(Ac) || isNaN(Am)) {
alert("Please enter valid values for AM inputs.");
return;
}

const m = Am / Ac;
const Psb = Pc ? 0.5 * m ** 2 * Pc : "N/A (Carrier Power Required)";

output = `
<p><strong>Modulation Index (m):</strong> ${m.toFixed(2)}</p>
<p><strong>Sideband Power (P<sub>sb</sub>):</strong> ${Psb}</p>
`;
} else if (type === "fm") {
const deltaF = parseFloat(document.getElementById("frequencyDeviation").value);
const fm = parseFloat(document.getElementById("modulatingFrequency").value);

if (isNaN(deltaF) || isNaN(fm)) {
alert("Please enter valid values for FM inputs.");
return;
}

const beta = deltaF / fm;

output = `
<p><strong>Modulation Index (\\u03b2):</strong> ${beta.toFixed(2)}</p>
`;
}

result.style.display = "block";
resultContent.innerHTML = output;
}

updateFields();
});
114 changes: 114 additions & 0 deletions Calculators/Modulation-Calculator/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
background: linear-gradient(to right, #6a11cb, #2575fc);
color: #333;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.container {
width: 100%;
max-width: 600px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
}

.header {
text-align: center;
padding: 20px;
background: linear-gradient(to right, #2575fc, #6a11cb);
color: #fff;
}

.header h1 {
font-size: 2rem;
font-weight: 700;
margin: 0;
}

.header p {
font-size: 1rem;
margin: 10px 0 0;
}

.card {
padding: 20px;
}

.form-group {
margin-bottom: 20px;
}

label {
font-weight: 600;
display: block;
margin-bottom: 8px;
}

.select-field,
input {
width: 100%;
padding: 12px 15px;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
box-sizing: border-box;
transition: all 0.3s ease;
}

input:focus,
.select-field:focus {
border-color: #2575fc;
box-shadow: 0 0 8px rgba(37, 117, 252, 0.5);
outline: none;
}

.btn {
width: 100%;
padding: 12px;
font-size: 1rem;
font-weight: 600;
color: #fff;
background: linear-gradient(to right, #6a11cb, #2575fc);
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}

.btn:hover {
background: linear-gradient(to right, #2575fc, #6a11cb);
transform: translateY(-2px);
}

.result {
margin-top: 20px;
padding: 15px 20px;
background: #f7f7f7;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.result h2 {
font-size: 1.5rem;
color: #6a11cb;
margin-bottom: 10px;
}

.hidden {
display: none;
}

.footer {
text-align: center;
padding: 15px;
background: #f0f0f0;
font-size: 0.9rem;
color: #777;
}
14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3556,6 +3556,20 @@ <h3>Calculates the mobility of an electric field.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Modulation Calculator</h2>
<h3>Calculates the modulation index for amplitude modulation and frequency modulation.</h3>
<div class="card-footer">
<a href="./Calculators/Modulation-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Modulation-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>Molality Calculator</h2>
Expand Down

0 comments on commit 8aad298

Please sign in to comment.