-
Notifications
You must be signed in to change notification settings - Fork 394
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2d0fcef
commit 8aad298
Showing
5 changed files
with
273 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>© 2024 Modulation Calculator. All rights reserved.</p> | ||
</footer> | ||
</div> | ||
<script src="script.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters