diff --git a/Calculators/Heat-capacity-calculator/README.md b/Calculators/Heat-capacity-calculator/README.md new file mode 100644 index 000000000..9ca4eb969 --- /dev/null +++ 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) \ No newline at end of file diff --git a/Calculators/Heat-capacity-calculator/image-1.png b/Calculators/Heat-capacity-calculator/image-1.png new file mode 100644 index 000000000..142b0c580 Binary files /dev/null and b/Calculators/Heat-capacity-calculator/image-1.png differ diff --git a/Calculators/Heat-capacity-calculator/image.png b/Calculators/Heat-capacity-calculator/image.png new file mode 100644 index 000000000..1b578cf24 Binary files /dev/null and b/Calculators/Heat-capacity-calculator/image.png differ diff --git a/Calculators/Heat-capacity-calculator/index.html b/Calculators/Heat-capacity-calculator/index.html new file mode 100644 index 000000000..72456488c --- /dev/null +++ b/Calculators/Heat-capacity-calculator/index.html @@ -0,0 +1,46 @@ + + + + + + Specific Heat Capacity Calculator + + + +
+

Specific Heat Capacity Calculator

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ + + + diff --git a/Calculators/Heat-capacity-calculator/style.css b/Calculators/Heat-capacity-calculator/style.css new file mode 100644 index 000000000..60fc967c8 --- /dev/null +++ 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 index 959d049ba..3a894ca7d 100644 --- a/index.html +++ b/index.html @@ -241,6 +241,20 @@

Converts power values between AC and DC.

+
+
+

Heat capacity calculator

+

calculate the heat capacity of substances.

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

ASCII Value Calculator