Rakesh9100 · Rakesh9100 · Feb 11, 2024 · Feb 7, 2024 · Feb 7, 2024 · Feb 7, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/Calculators/.DS_Store b/Calculators/.DS_Store
diff --git a/Calculators/Stress-Strain-Calculator/README.md b/Calculators/Stress-Strain-Calculator/README.md
@@ -0,0 +1,17 @@
+# <p align="center">Stress Strain Calculator</p>
+
+## Description :-
+The Stress and Strain Calculator is a web-based tool designed to assist users in computing stress and strain values based on input parameters related to a material's mechanical behavior. 
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+<img width="739" alt="image" src="https://github.com/Imbiber/CalcDiverse/assets/118832071/2faed881-883c-4e3f-ad84-5e720028896b">
+
+
+
+
diff --git a/Calculators/Stress-Strain-Calculator/index.css b/Calculators/Stress-Strain-Calculator/index.css
@@ -0,0 +1,49 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f0f0f0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.container {
+    background-color: #ffffff;
+    padding: 40px;
+    border-radius: 40px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    width: 600px; /* Adjusted container width */
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 30px; /* Increased gap between form elements */
+}
+
+label {
+    font-weight: bold;
+}
+
+button {
+    padding: 12px;
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+#results {
+    margin-top: 30px; 
+}
+
+.hidden {
+    display: none;
+}
diff --git a/Calculators/Stress-Strain-Calculator/index.html b/Calculators/Stress-Strain-Calculator/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stress and Strain Calculator</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Stress and Strain Calculator</h1>
+        <form id="calculatorForm">
+            <label for="force">Applied Force (N):</label>
+            <input type="number" id="force" required>
+
+            <label for="area">Cross-sectional Area (m<sup>2</sup>):</label>
+            <input type="number" id="area" required>
+
+            <label for="originalLength">Original Length (m):</label>
+            <input type="number" id="originalLength" required>
+
+            <label for="deformedLength">Deformed Length (m):</label>
+            <input type="number" id="deformedLength" required>
+
+            <button type="button" onclick="calculate()">Calculate</button>
+        </form>
+
+        <div id="results" class="hidden">
+            <h2>Results:</h2>
+            <p id="stressResult"></p>
+            <p id="strainResult"></p>
+        </div>
+    </div>
+
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/Calculators/Stress-Strain-Calculator/index.js b/Calculators/Stress-Strain-Calculator/index.js
@@ -0,0 +1,18 @@
+function calculate() {
+    // Get user input
+    const force = parseFloat(document.getElementById('force').value);
+    const area = parseFloat(document.getElementById('area').value);
+    const originalLength = parseFloat(document.getElementById('originalLength').value);
+    const deformedLength = parseFloat(document.getElementById('deformedLength').value);
+
+    // Calculate stress and strain
+    const stress = force / area;
+    const strain = (deformedLength - originalLength) / originalLength;
+
+    // Display results
+    document.getElementById('stressResult').textContent = `Stress: ${stress.toFixed(2)} N/m^2 (Pa)`;
+    document.getElementById('strainResult').textContent = `Strain: ${strain.toFixed(2)}`;
+
+    // Show results container
+    document.getElementById('results').classList.remove('hidden');
+}