Added Half-Life Calculator (#1912)

Rakesh9100 · Dec 16, 2024 · a744271 · a744271
1 parent 3588dbc
commit a744271
Show file tree

Hide file tree

Showing 5 changed files with 190 additions and 0 deletions.
diff --git a/Calculators/Half-Life-Calculator/README.md b/Calculators/Half-Life-Calculator/README.md
@@ -0,0 +1,34 @@
+# <p align="center">Half-Life Calculator</p>
+
+## Description :-
+
+The Half-Life Calculator is a simple yet visually appealing web application designed to calculate the half-life of a substance based on user inputs.
+The Half-Life Calculator is built with HTML, CSS, and JavaScript, offering users a seamless way to compute the half-life of substances using the formula:
+
+$$
+T_{1/2} = \frac{t \cdot \ln(2)}{\ln\left(\frac{N_0}{N}\right)}
+$$
+
+Where:
+- **T<sub>1/2</sub>** = Half-life of the substance
+- **t** = Elapsed time
+- **N<sub>0</sub>** = Initial amount of the substance
+- **N** = Remaining amount of the substance
+
+
+## Tech Stacks :-
+
+- HTML 
+- CSS 
+- JavaScript
+
+## Features :-
+
+- Simple and minimalistic design for effortless input and navigation.
+- Displays results rounded to two decimal places for clarity.
+- Smoothly transitioning gradient colors that create an engaging visual effect.
+- Validates inputs to ensure only positive numerical values are accepted.
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/755a3ccb-7b59-416f-8795-bd9b4eae67ac)
diff --git a/Calculators/Half-Life-Calculator/index.html b/Calculators/Half-Life-Calculator/index.html
@@ -0,0 +1,41 @@
+<!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>Half-Life Calculator</title>
+</head>
+<body>
+    <div class="calculator">
+         <!-- Title of the Application -->
+        <h1>Half-Life Calculator</h1>
+
+         <!-- Input Group for Initial Amount -->
+        <div class="input-group">
+            <label for="initial-amount">Initial Amount (N<sub>0</sub>):</label>
+            <input type="number" id="initial-amount" placeholder="Enter initial amount">
+        </div>
+
+         <!-- Input Group for Remaining Amount -->
+        <div class="input-group">
+            <label for="remaining-amount">Remaining Amount (N):</label>
+            <input type="number" id="remaining-amount" placeholder="Enter remaining amount">
+        </div>
+
+        <!-- Input Group for Elapsed Time -->
+        <div class="input-group">
+            <label for="time">Elapsed Time (t):</label>
+            <input type="number" id="time" placeholder="Enter elapsed time">
+        </div>
+
+        <!-- Button to Trigger the Half-Life Calculation -->
+        <button onclick="calculateHalfLife()">Calculate Half-Life</button>
+
+        <!-- Div to Display the Result -->
+        <div class="result" id="result"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Half-Life-Calculator/script.js b/Calculators/Half-Life-Calculator/script.js
@@ -0,0 +1,19 @@
+function calculateHalfLife() {
+    // Get user input values from the form fields
+    const initialAmount = parseFloat(document.getElementById('initial-amount').value);
+    const remainingAmount = parseFloat(document.getElementById('remaining-amount').value);
+    const time = parseFloat(document.getElementById('time').value);
+
+    // Check if all inputs are valid numbers
+    if (isNaN(initialAmount) || isNaN(remainingAmount) || isNaN(time) || initialAmount <= 0 || remainingAmount <= 0 || time <= 0) {
+        document.getElementById('result').textContent = "Please enter valid positive numbers.";
+        return;
+    }
+
+    // Calculate the half-life using the formula:
+    // T(1/2) = (t * ln(2)) / ln(N0 / N)
+    const halfLife = (time * Math.log(2)) / Math.log(initialAmount / remainingAmount);
+
+    // Display the calculated half-life with two decimal places
+    document.getElementById('result').textContent = `The half-life is approximately ${halfLife.toFixed(2)} units of time.`;
+}
diff --git a/Calculators/Half-Life-Calculator/style.css b/Calculators/Half-Life-Calculator/style.css
@@ -0,0 +1,82 @@
+body {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(270deg, hsl(269, 98%, 49%), #2575fc);
+    background-size: 800% 800%;
+    color: #fff;
+    animation: color-transition 6s infinite;
+}
+
+@keyframes color-transition {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+.calculator {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    padding: 20px 30px;
+    border-radius: 15px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    width: 300px;
+}
+
+
+.calculator h1 {
+    font-size: 32px;
+    margin-bottom: 27px;
+}
+
+.input-group {
+    margin-bottom: 25px;
+    margin-right: 18px;
+}
+
+.input-group label {
+    display: block;
+    font-size: 18px;
+    margin-bottom: 5px;
+}
+
+.input-group input {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+button {
+    background: #ff7eb3;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border: none;
+    color: #fff;
+    padding: 10px 15px;
+    font-size: 18px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+button:hover {
+    background: #ff4e8a;
+}
+
+.result {
+    margin-top: 25px;
+    font-size: 18px;
+}
diff --git a/index.html b/index.html
@@ -2675,6 +2675,20 @@ <h3>Calculates a Hailstone series by repeatedly dividing by 2 if even or multipl
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Half-Life Calculator</h2>
+                <h3>Calculates half-life of a substance based on user inputs.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Half-Life-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Half-Life-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>Happy Number Calculator</h2>