diff --git a/Calculators/Friction-Calculator/README.md b/Calculators/Friction-Calculator/README.md new file mode 100644 index 000000000..e222b12f9 --- /dev/null +++ b/Calculators/Friction-Calculator/README.md @@ -0,0 +1,16 @@ +#

Friction Calculator

+ +## Description :- + +This calculator calculates the friction force between an object and the ground.
+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) diff --git a/Calculators/Friction-Calculator/index.html b/Calculators/Friction-Calculator/index.html new file mode 100644 index 000000000..bb446816f --- /dev/null +++ b/Calculators/Friction-Calculator/index.html @@ -0,0 +1,31 @@ + + + + + + + Friction Calculator + + +
+
+

Friction Force Calculator

+
+
+ + +
+
+ + +
+ +
+
+

Friction Force: 0 N

+
+
+
+ + + diff --git a/Calculators/Friction-Calculator/script.js b/Calculators/Friction-Calculator/script.js new file mode 100644 index 000000000..2bf9453c3 --- /dev/null +++ b/Calculators/Friction-Calculator/script.js @@ -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); +}); \ No newline at end of file diff --git a/Calculators/Friction-Calculator/style.css b/Calculators/Friction-Calculator/style.css new file mode 100644 index 000000000..ea00a70d2 --- /dev/null +++ b/Calculators/Friction-Calculator/style.css @@ -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; +} diff --git a/index.html b/index.html index f81207ec7..aa2053912 100644 --- a/index.html +++ b/index.html @@ -2171,6 +2171,20 @@

Calculator that helps to calculate the frequency.

+
+
+

Friction Calculator

+

Calculates the friction force between an object and the ground.

+
+ + + + + Source Code + +
+
+

Fuel Cost Calculator