Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Spring Force Calculator #1504

Closed
wants to merge 4 commits into from
Closed

Added Spring Force Calculator #1504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f74dd88
Added Spring Force Calculator
kauxp Jun 29, 2024
a2a1883
Resolving conflicts
kauxp Jun 29, 2024
e7ea59a
Added calculator to index
kauxp Jun 29, 2024
cee294d
Merge branch 'main' into kauxpSpringForce
kauxp Jun 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions Calculators/Spring-Force-Calculator/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# <p align="center">Spring Force Calculator</p>

## Description :-
Spring force calculator(Hooke's law calculator ) helps you determine the force in any spring that is stretched or compressed.


## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

71 changes: 71 additions & 0 deletions Calculators/Spring-Force-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!--
box-final-klength
box-displacement-result
box-spring-constant
box-force-result
-->

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spring Force Calculator</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</head>

<body>
<div class="screen">
<div class="values">
<div class="nav">
<div class="pageTitle">
Spring Force Calculator
</div>
</div>
<div class="sil input-group mb-3" style="width: 80%; height: 6vh;">
<span class="input-group-text" id="basic-addon1">Spring Initial Length</span>
<input type="number" class="form-control" id="box-initial-length"
placeholder="initial length of the spring" aria-label="" aria-describedby="basic-addon1">
</div>

<div class="sil input-group mb-3" style="width: 80%; height: 6vh;">
<span class="input-group-text" id="basic-addon1">Spring Final Length</span>
<input type="number" class="form-control" id="box-final-length" placeholder="final length of the spring"
aria-label="" aria-describedby="basic-addon1">
</div>

<div class="sil input-group mb-3" style="width: 80%; height: 6vh;">
<span class="input-group-text" id="basic-addon1">Spring Constant (k)</span>
<input type="number" class="form-control" id="box-spring-constant"
placeholder="value of spring constant (k)" aria-label="" aria-describedby="basic-addon1">
</div>
</div>
<div class="answer">
<div class="top">
<div class="value" id="box-displacement-result">
0
</div>
<div class="subtitle">
Spring Displacement
</div>
</div>
<div class="bottom">
<div class="value" id="box-force-result">
0
</div>
<div class="subtitle">
Spring Force
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
33 changes: 33 additions & 0 deletions Calculators/Spring-Force-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
var displacement = 0;

function verifyLength() {



}

function calculateDisplacement() {

var initial = document.getElementById("box-initial-length").value;
if (initial < 0) {
document.getElementById("box-initial-length").value = 0;
alert("Length should not be negative");
}

var final = document.getElementById("box-final-length").value;
if (final < 0) {
document.getElementById("box-final-length").value = 0;
alert("Length should not be negative");
}

displacement = final - initial;
document.getElementById("box-displacement-result").textContent = displacement;

var springConst = document.getElementById("box-spring-constant").value;
var force = springConst * displacement;
document.getElementById("box-force-result").textContent = force;
}

document.getElementById("box-initial-length").addEventListener('input', calculateDisplacement);
document.getElementById("box-final-length").addEventListener('input', calculateDisplacement);
document.getElementById("box-spring-constant").addEventListener('input', calculateDisplacement);
99 changes: 99 additions & 0 deletions Calculators/Spring-Force-Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
@import url('https://fonts.googleapis.com/css2?family=Lexend:[email protected]&display=swap');


* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Lexend", sans-serif;
}

.screen {
width: 100%;
height: 100vh;
display: flex;
}


.calculator {
display: flex;
width: 100%;
height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgb(255, 255, 255);
}

.values {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
}

.answer {
width: 50%;
height: 100%;
}

.top {
width: 100%;
height: 30%;
gap: 2rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.bottom {
width: 100%;
height: 70%;
gap: 2rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.pageTitle {
font-size: 2rem;
font-weight: 700;
}

.value {
width: 100%;
height: 70%;
gap: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}

.subtitle {
width: 100%;
height: 30%;
display: flex;
justify-content: center;
align-items: center;

}

.top .subtitle {
font-size: 1.4rem;
font-weight: 600;
}

.top .value {
font-size: 4rem;
}

.bottom .subtitle {
font-size: 2rem;

}

.bottom .value {
font-size: 10rem;

}
Loading