forked from Rakesh9100/CalcDiverse
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added Lorentz Force Calculator (Rakesh9100#1573)
- Loading branch information
1 parent
c0af660
commit 0446267
Showing
5 changed files
with
208 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">Lorentz Force Calculator</p> | ||
|
|
||
| ## Description :- | ||
|
|
||
| The Lorentz Force Calculator computes the force exerted on a charged particle moving through a magnetic field, allowing users to input magnetic field strength, charge, velocity, and angle. It provides a user-friendly interface with unit customization options and responsive design for seamless use on various devices. | ||
|
|
||
| ## Tech Stacks :- | ||
|
|
||
| - HTML | ||
| - CSS | ||
| - JavaScript | ||
|
|
||
| ## ScreenShots :- | ||
|
|
||
|  |
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,49 @@ | ||
| <!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>Lorentz Force Calculator</title> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <h1>Lorentz Force Calculator</h1> | ||
| <div class="form-group"> | ||
| <label for="magneticField">Magnetic Field</label> | ||
| <input type="number" id="magneticField" placeholder="Value"> | ||
| <select id="magneticFieldUnit"> | ||
| <option value="1">T</option> | ||
| <option value="0.001">mT</option> | ||
| </select> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="charge">Charge</label> | ||
| <input type="number" id="charge" placeholder="Value"> | ||
| <select id="chargeUnit"> | ||
| <option value="1">C</option> | ||
| <option value="1e-6">µC</option> | ||
| </select> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="velocity">Velocity</label> | ||
| <input type="number" id="velocity" placeholder="Value"> | ||
| <select id="velocityUnit"> | ||
| <option value="1">m/s</option> | ||
| <option value="0.001">km/s</option> | ||
| </select> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="angle">Angle</label> | ||
| <input type="number" id="angle" value="90" placeholder="Degrees"> | ||
| <select id="angleUnit"> | ||
| <option value="deg">deg</option> | ||
| <option value="rad">rad</option> | ||
| </select> | ||
| </div> | ||
| <button class="btn" onclick="calculateForce()">Calculate Force</button> | ||
| <div class="result" id="result"></div> | ||
| </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,23 @@ | ||
| function calculateForce() { | ||
| const B = | ||
| parseFloat(document.getElementById("magneticField").value) * | ||
| parseFloat(document.getElementById("magneticFieldUnit").value); | ||
| const q = | ||
| parseFloat(document.getElementById("charge").value) * | ||
| parseFloat(document.getElementById("chargeUnit").value); | ||
| const v = | ||
| parseFloat(document.getElementById("velocity").value) * | ||
| parseFloat(document.getElementById("velocityUnit").value); | ||
| const angle = parseFloat(document.getElementById("angle").value); | ||
| const angleUnit = document.getElementById("angleUnit").value; | ||
|
|
||
| const angleRad = angleUnit === "deg" ? angle * (Math.PI / 180) : angle; | ||
|
|
||
| if (isNaN(B) || isNaN(q) || isNaN(v) || isNaN(angle)) { | ||
| alert("Please fill in all fields with valid numbers."); | ||
| return; | ||
| } | ||
|
|
||
| const force = B * q * v * Math.sin(angleRad); | ||
| document.getElementById("result").textContent = `Force: ${force.toFixed(5)} N`; | ||
| } |
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,107 @@ | ||
| body { | ||
| font-family: 'Arial', sans-serif; | ||
| background: linear-gradient(135deg, #ff9a9e, #fad0c4); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| margin: 0; | ||
| padding: 10px; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .container { | ||
| background: #fff; | ||
| padding: 20px; | ||
| border-radius: 10px; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| width: 100%; | ||
| max-width: 400px; | ||
| animation: fadeIn 1s ease-in-out; | ||
| } | ||
|
|
||
| .container h1 { | ||
| text-align: center; | ||
| color: #ff6b6b; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .form-group { | ||
| margin-bottom: 15px; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .form-group label { | ||
| flex: 1; | ||
| color: #333; | ||
| } | ||
|
|
||
| .form-group input { | ||
| flex: 2; | ||
| padding: 10px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 5px; | ||
| font-size: 16px; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .form-group select { | ||
| margin-left: 10px; | ||
| padding: 10px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 5px; | ||
| font-size: 16px; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .btn { | ||
| width: 100%; | ||
| padding: 10px; | ||
| background: #ff6b6b; | ||
| color: #fff; | ||
| border: none; | ||
| border-radius: 5px; | ||
| font-size: 16px; | ||
| cursor: pointer; | ||
| transition: background 0.3s ease; | ||
| } | ||
|
|
||
| .btn:hover { | ||
| background: #ee5253; | ||
| } | ||
|
|
||
| .result { | ||
| margin-top: 20px; | ||
| text-align: center; | ||
| font-size: 18px; | ||
| color: #ff6b6b; | ||
| } | ||
|
|
||
| @keyframes fadeIn { | ||
| from { | ||
| opacity: 0; | ||
| } | ||
|
|
||
| to { | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 600px) { | ||
| .form-group { | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| } | ||
|
|
||
| .form-group label, | ||
| .form-group input, | ||
| .form-group select { | ||
| width: 100%; | ||
| margin: 5px 0; | ||
| } | ||
|
|
||
| .form-group select { | ||
| margin-left: 0; | ||
| } | ||
| } |
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