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 Friction Calculator #1759

Merged
merged 5 commits into from
Aug 3, 2024
Merged

Added Friction Calculator #1759

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b0a947d
Added Friction Calculator
Khushi-Pushkar Aug 1, 2024
db684b1
Delete Calculators/Friction-Calculator/assests directory
Rakesh9100 Aug 3, 2024
c0e0eb6
Update index.html
Rakesh9100 Aug 3, 2024
866c85a
Update README.md
Rakesh9100 Aug 3, 2024
a2f7c85
Update index.html
Rakesh9100 Aug 3, 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
16 changes: 16 additions & 0 deletions Calculators/Friction-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# <p align="center">Friction Calculator</p>

## Description :-

This calculator calculates the friction force between an object and the ground.<br>
It is based on a simple principle: Friction is proportional to the normal force acting between the object and the ground.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

![image](https://github.com/user-attachments/assets/a4967faf-d3ce-4f10-8662-342f4e54c712)
31 changes: 31 additions & 0 deletions Calculators/Friction-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!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>Friction Calculator</title>
</head>
<body>
<div class="container">
<div class="calculator">
<h1>Friction Force Calculator</h1>
<form id="friction-form">
<div class="form-group">
<label for="normal-force">Normal Force (N):</label>
<input type="number" id="normal-force" placeholder="Enter normal force" required>
</div>
<div class="form-group">
<label for="coefficient">Coefficient of Friction:</label>
<input type="number" id="coefficient" placeholder="Enter coefficient of friction" step="0.01" required>
</div>
<button type="submit">Calculate</button>
</form>
<div class="result" id="result">
<p>Friction Force: <span id="friction-force">0</span> N</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
9 changes: 9 additions & 0 deletions Calculators/Friction-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
document.getElementById('friction-form').addEventListener('submit', function(e) {
e.preventDefault();

let normalForce = parseFloat(document.getElementById('normal-force').value);
let coefficient = parseFloat(document.getElementById('coefficient').value);
let frictionForce = normalForce * coefficient;

document.getElementById('friction-force').textContent = frictionForce.toFixed(2);
});
131 changes: 131 additions & 0 deletions Calculators/Friction-Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
body, html {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
background: linear-gradient(135deg, #41f7ee, #f6b4c9);
}

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
}

.calculator {
background: linear-gradient(145deg, #ffffff, #f0f0f0);
padding: 30px;
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
text-align: center;
position: relative;
overflow: hidden;
transform: perspective(1px) translateZ(0);
}

.calculator:before {
content: '';
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
width: 300%;
height: 300%;
background: radial-gradient(circle, #e0f7fa 20%, transparent 20%);
background-size: 50% 50%;
transform: translate(-50%, -50%);
animation: bgRotate 10s linear infinite;
}

@keyframes bgRotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}

h1 {
margin-bottom: 20px;
font-size: 26px;
color: #333;
position: relative;
animation: fadeIn 1s ease-in-out;
}

h1:after {
content: '';
width: 80px;
height: 4px;
background: #2779eb;
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border-radius: 5px;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.form-group {
margin-bottom: 20px;
text-align: left;
position: relative;
}

label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #555;
}

input {
width: 100%;
padding: 15px;
border: none;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-size: 16px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
outline: none;
}

input:focus {
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

button {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #246bcf, #18c3cf);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 18px;
transition: background 0.3s ease, transform 0.2s ease;
margin-top: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button:hover {
background: linear-gradient(135deg, #2077ea, #22bee9);
transform: translateY(-3px);
}

.result {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
color: #333;
}

.result span {
color: #2f80f2;
}
14 changes: 14 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2101,6 +2101,20 @@ <h3>Calculator that helps to calculate the frequency.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Friction Calculator</h2>
<h3>Calculates the friction force between an object and the ground.</h3>
<div class="card-footer">
<a href="./Calculators/Friction-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Friction-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>Fuel Cost Calculator</h2>
Expand Down