Added Heat Capacity Calculator (#1794)

Rakesh9100 · Aug 10, 2024 · e001d7c · e001d7c
1 parent e568d5b
commit e001d7c
Show file tree

Hide file tree

Showing 6 changed files with 242 additions and 0 deletions.
diff --git a/Calculators/Heat-capacity-calculator/README.md b/Calculators/Heat-capacity-calculator/README.md
@@ -0,0 +1,62 @@
+# Specific Heat Capacity Calculator
+
+This project is a simple web-based calculator for determining the specific heat capacity of a substance. It calculates the specific heat capacity based on the provided heat energy, mass, and change in temperature.
+
+## Table of Contents
+- [Overview](#overview)
+- [Features](#features)
+- [Technologies Used](#technologies-used)
+- [Usage](#usage)
+- [Screenshots](#screenshots)
+
+## Overview
+
+The Specific Heat Capacity Calculator is a web application that helps users calculate the specific heat capacity of a material. The calculator takes three inputs:
+1. Heat Energy (Joules)
+2. Mass (kg)
+3. Change in Temperature (°C)
+
+It then calculates the specific heat capacity using the formula:
+
+${C = Q / (m ΔT)}$
+
+Where:
+- \( C \) is the specific heat capacity (J/kg°C)
+- \( Q \) is the heat energy (Joules)
+- \( m \) is the mass (kg)
+- \( ΔT \) is the change in temperature (°C)
+
+## Features
+
+- Responsive design for optimal viewing on various devices.
+- Easy-to-use interface with labeled input fields.
+- Error handling for invalid inputs.
+- Background image for an engaging visual experience.
+
+## Technologies Used
+
+- **HTML**: Structure and content of the web page.
+- **CSS**: Styling for the web page, including responsive design.
+- **JavaScript**: Functionality for calculating specific heat capacity and displaying results.
+
+
+
+## Usage
+
+- Enter the required values:
+- Heat Energy (in Joules)
+- Mass (in kg)
+- Change in Temperature (in °C)
+- Click on the **"Calculate Specific Heat Capacity"** button.
+
+- View the result:
+
+The specific heat capacity will be displayed below the button.
+
+
+
+
+## ScreenShots
+
+![alt text](image.png)
+![alt text](image-1.png)
diff --git a/Calculators/Heat-capacity-calculator/image-1.png b/Calculators/Heat-capacity-calculator/image-1.png
diff --git a/Calculators/Heat-capacity-calculator/image.png b/Calculators/Heat-capacity-calculator/image.png
diff --git a/Calculators/Heat-capacity-calculator/index.html b/Calculators/Heat-capacity-calculator/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Specific Heat Capacity Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Specific Heat Capacity Calculator</h1>
+        <form id="specificHeatCapacityForm">
+            <div class="form-group">
+                <label for="heatEnergy">Heat Energy (J):</label>
+                <input type="number" id="heatEnergy" name="heatEnergy" required>
+            </div>
+            <div class="form-group">
+                <label for="mass">Mass (kg):</label>
+                <input type="number" id="mass" name="mass" required>
+            </div>
+            <div class="form-group">
+                <label for="temperatureChange">Change in Temperature (°C):</label>
+                <input type="number" id="temperatureChange" name="temperatureChange" required>
+            </div>
+            <button type="button" onclick="calculateSpecificHeatCapacity()">Calculate Specific Heat Capacity</button>
+        </form>
+        <div id="result" class="result"></div>
+    </div>
+
+    <script>
+        function calculateSpecificHeatCapacity() {
+            const heatEnergy = parseFloat(document.getElementById('heatEnergy').value);
+            const mass = parseFloat(document.getElementById('mass').value);
+            const temperatureChange = parseFloat(document.getElementById('temperatureChange').value);
+            const specificHeatCapacity = heatEnergy / (mass * temperatureChange);
+
+            const resultElement = document.getElementById('result');
+            if (isNaN(specificHeatCapacity)) {
+                resultElement.innerText = 'Please enter valid values.';
+            } else {
+                resultElement.innerText = `Specific Heat Capacity: ${specificHeatCapacity.toFixed(2)} J/kg°C`;
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/Calculators/Heat-capacity-calculator/style.css b/Calculators/Heat-capacity-calculator/style.css
@@ -0,0 +1,120 @@
+/* styles.css */
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    font-family: Arial, sans-serif;
+    box-sizing: border-box;
+}
+
+body {
+    background-image: url('https://images.unsplash.com/photo-1633164227069-df58d5f183df?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    backdrop-filter: blur(3px);
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 20px;
+}
+
+.container {
+    background-color: rgba(0, 0, 0, 0.8);
+    padding: 25px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+    width: 100%;
+    max-width: 400px;
+    box-sizing: border-box;
+}
+
+h1 {
+    font-size: 24px;
+    margin-bottom: 20px;
+}
+
+.form-group {
+    margin-bottom: 15px;
+    text-align: left;
+}
+
+label {
+    display: block;
+    font-size: 14px;
+    margin-bottom: 5px;
+}
+
+input[type="number"] {
+    width: 100%;
+    padding: 10px;
+    font-size: 14px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+}
+
+button {
+    background-color: #ff4500;
+    color: #fff;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 4px;
+    font-size: 14px;
+    cursor: pointer;
+    margin-top: 10px;
+    width: 100%;
+}
+
+button:hover {
+    background-color: #ff0000;
+}
+
+.result {
+    margin-top: 20px;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+/* Media Queries for Responsive Design */
+@media (max-width: 768px) {
+    body {
+        padding: 15px;
+    }
+
+    .container {
+        max-width: 100%;
+        padding: 15px;
+    }
+
+    h1 {
+        font-size: 22px;
+    }
+
+    button {
+        font-size: 14px;
+        padding: 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    h1 {
+        font-size: 20px;
+    }
+
+    button {
+        font-size: 14px;
+        padding: 8px;
+    }
+
+    .form-group {
+        margin-bottom: 10px;
+    }
+
+    input[type="number"] {
+        padding: 8px;
+    }
+}
diff --git a/index.html b/index.html
@@ -241,6 +241,20 @@ <h3>Converts power values between AC and DC.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Heat capacity calculator</h2>
+                <h3>calculate the heat capacity of substances.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Heat-capacity-calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Heat-capacity-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>ASCII Value Calculator</h2>