Skip to content

Commit e93d887

Browse files
Sulagna-Dutta-RoySulagna-Dutta-Roy
authored
Merge pull request #2298 from Ishitamukherjee2004/master
Frequency Calculator is added
2 parents fdc00be + b3663f8 commit e93d887

File tree

4 files changed

+154
-0
lines changed

4 files changed

+154
-0
lines changed

‎Frequency Calcullator/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Frequency Calculator</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Frequency Calculator</h1>
12+
<div class="calculator">
13+
<div class="input-group">
14+
<label for="period">Period (T) in seconds:</label>
15+
<input type="number" id="period" placeholder="Enter period">
16+
<button onclick="calculateFrequencyByPeriod()">Calculate</button>
17+
</div>
18+
<div class="input-group">
19+
<label for="wavelength">Wavelength (λ) in meters:</label>
20+
<input type="number" id="wavelength" placeholder="Enter wavelength">
21+
</div>
22+
<div class="input-group">
23+
<label for="waveSpeed">Wave Speed (v) in m/s:</label>
24+
<input type="number" id="waveSpeed" placeholder="Enter wave speed">
25+
<button onclick="calculateFrequencyByWavelength()">Calculate</button>
26+
</div>
27+
<div class="input-group">
28+
<label for="angularFrequency">Angular Frequency (ω) in rad/s:</label>
29+
<input type="number" id="angularFrequency" placeholder="Enter angular frequency">
30+
<button onclick="calculateFrequencyByAngularFrequency()">Calculate</button>
31+
</div>
32+
<div class="output-group">
33+
<h2>Frequency (f): <span id="frequencyOutput">--</span> Hz</h2>
34+
</div>
35+
</div>
36+
</div>
37+
<script src="script.js"></script>
38+
</body>
39+
</html>

‎Frequency Calcullator/manifest.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"manifest_version": 3,
3+
"name": "Frequency Calculator",
4+
"version": "1.0",
5+
"action": {
6+
"default_popup": "index.html"
7+
},
8+
"permissions": []
9+
}

‎Frequency Calcullator/script.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
function calculateFrequencyByPeriod() {
2+
const period = document.getElementById('period').value;
3+
if (period > 0) {
4+
const frequency = 1 / period;
5+
document.getElementById('frequencyOutput').textContent = frequency.toFixed(2);
6+
} else {
7+
alert("Please enter a valid period.");
8+
}
9+
}
10+
11+
function calculateFrequencyByWavelength() {
12+
const wavelength = document.getElementById('wavelength').value;
13+
const waveSpeed = document.getElementById('waveSpeed').value;
14+
if (wavelength > 0 && waveSpeed > 0) {
15+
const frequency = waveSpeed / wavelength;
16+
document.getElementById('frequencyOutput').textContent = frequency.toFixed(2);
17+
} else {
18+
alert("Please enter valid values for wavelength and wave speed.");
19+
}
20+
}
21+
22+
function calculateFrequencyByAngularFrequency() {
23+
const angularFrequency = document.getElementById('angularFrequency').value;
24+
if (angularFrequency > 0) {
25+
const frequency = angularFrequency / (2 * Math.PI);
26+
document.getElementById('frequencyOutput').textContent = frequency.toFixed(2);
27+
} else {
28+
alert("Please enter a valid angular frequency.");
29+
}
30+
}

‎Frequency Calcullator/style.css

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
body {
2+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3+
background-color: #f0f0f0;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
.container {
9+
max-width: 800px;
10+
margin: 20px auto;
11+
background-color: #fff;
12+
padding: 20px;
13+
border-radius: 8px;
14+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
15+
}
16+
17+
h1 {
18+
text-align: center;
19+
color: #007BFF;
20+
}
21+
22+
.calculator {
23+
background-color: #f8f9fa;
24+
padding: 20px;
25+
border-radius: 8px;
26+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
27+
}
28+
29+
.input-group {
30+
margin-bottom: 15px;
31+
}
32+
33+
.input-group label {
34+
display: block;
35+
margin-bottom: 8px;
36+
color: #555;
37+
}
38+
39+
.input-group input[type="number"] {
40+
width: calc(100% - 80px);
41+
padding: 8px;
42+
border: 1px solid #ddd;
43+
border-radius: 4px;
44+
font-size: 16px;
45+
}
46+
47+
.input-group button {
48+
padding: 8px 12px;
49+
margin-top: 20px;
50+
background-color: #007BFF;
51+
color: #fff;
52+
border: none;
53+
cursor: pointer;
54+
border-radius: 4px;
55+
font-size: 16px;
56+
transition: background-color 0.3s ease;
57+
}
58+
59+
.input-group button:hover {
60+
background-color: #0056b3;
61+
}
62+
63+
.output-group {
64+
margin-top: 20px;
65+
}
66+
67+
.output-group h2 {
68+
font-size: 1.5rem;
69+
color: #333;
70+
}
71+
72+
.output-group #frequencyOutput {
73+
font-weight: bold;
74+
font-size: 1.8rem;
75+
color: #007BFF;
76+
}

0 commit comments

Comments
 (0)