Rakesh9100 · Rakesh9100 · Dec 9, 2024 · Dec 8, 2024 · Dec 8, 2024 · Dec 8, 2024
diff --git a/Calculators/Heat-Transfer-Calculator/README.md b/Calculators/Heat-Transfer-Calculator/README.md
@@ -0,0 +1,21 @@
+# <p align="center">Heat Transfer Calculator</p>
+
+## Description :-
+
+The Heat Transfer Calculator is designed to calculate the amount of heat transferred between one region of temperature T1 and another region of temperature T2, which are L distance apart. The cross sectional area through which heat transfer occurs is A and the thermal conductivity of the material is K.
+Working formula:- H = (K* A *(T<sub>1</sub>-T<sub>2</sub>)*t)/L
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Takes user input of thermal conductivity,length,cross-sectional area, temperatures of the two regions and time span of heat transfer in SI units.
+- Displays the calculated heat transferred (in joules).
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/292b4795-916c-44f6-921b-92134efb8a08)
diff --git a/Calculators/Heat-Transfer-Calculator/assets/background.png b/Calculators/Heat-Transfer-Calculator/assets/background.png
diff --git a/Calculators/Heat-Transfer-Calculator/index.html b/Calculators/Heat-Transfer-Calculator/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Heat Transfer Calculator</title>
+</head>
+<body>
+    <div class="main">
+        <div class="heading">
+            <h1>HEAT TRANSFER CALCULATOR</h1>
+        </div>
+        <div class="dispformula">
+            <p id="formula">H = [K*A*(T<sub>1</sub>-T<sub>2</sub>)*t]/L</p>
+        </div>
+        <div class="inputs">
+            <input type="text" name="conductivity" id="cond" class="box" placeholder="Enter K (in W/m-K)">
+            <input type="text" name="crossarea" id="area" class="box" placeholder="Enter area A (in m&sup2;)">
+            <input type="text" name="temp1" id="t1" class="box" placeholder="Enter T1 (in K or &deg; C)">
+            <input type="text" name="temp2" id="t2" class="box" placeholder="Enter T2 (in K or &deg; C)">
+            <input type="text" name="thickness" id="length" class="box" placeholder="Enter Length L (in m)">
+            <input type="text" name="time" id="time" class="box" placeholder="Enter Time t (in s)">
+        </div>
+        <div class="calcout">
+            <div class="button">
+                <button id="btn">CALCULATE!</button>
+            </div>
+            <div class="output">
+                <input type="text" name="dispans" id="ans" placeholder="Heat transferred (in J)">
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Heat-Transfer-Calculator/script.js b/Calculators/Heat-Transfer-Calculator/script.js
@@ -0,0 +1,29 @@
+const btn = document.getElementById("btn");
+
+btn.addEventListener("click", (e) => {
+    console.log("hi");
+    e.preventDefault();
+    calcHeat();
+});
+
+function calcHeat() {
+    const k = document.getElementById("cond").value;
+    const a = document.getElementById("area").value;
+    const temp1 = document.getElementById("t1").value;
+    const temp2 = document.getElementById("t2").value;
+    const t = document.getElementById("time").value;
+    const l = document.getElementById("length").value;
+    if (
+        k === "" ||
+        a === "" ||
+        temp1 === "" ||
+        temp2 === "" ||
+        t === "" ||
+        l === ""
+    ) {
+        alert("You must enter all fields");
+        return;
+    }
+    let h = (k * a * t * Math.abs(temp1 - temp2)) / l;
+    document.getElementById("ans").value = h;
+}
diff --git a/Calculators/Heat-Transfer-Calculator/style.css b/Calculators/Heat-Transfer-Calculator/style.css
@@ -0,0 +1,92 @@
+@import url("https://fonts.googleapis.com/css2?family=Doto:[email protected]&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+body {
+    background-image: url('assets/background.png');
+    color: white;
+    font-family: "Nunito", serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.main {
+    height: 470px;
+    width: 400px;
+    border-radius: 10px;
+    border: 1px solid rgb(138, 0, 230);
+    display: flex;
+    flex-wrap: wrap;
+    position: absolute;
+    top: 100px;
+    padding: 15px;
+    box-shadow: 0px 0px 15px 10px rgb(226, 206, 255),
+        inset 0px 0px 15px 10px rgb(26, 26, 26);
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(7px);
+}
+
+.heading {
+    text-align: center;
+    text-shadow: 0px 0px 20px rgb(162, 0, 255);
+}
+
+.dispformula {
+    text-align: center;
+    position: relative;
+    left: 125px;
+    top: -15px;
+    width: fit-content;
+    height: fit-content;
+    padding: 5px;
+    border: 1px solid;
+    border-radius: 15px;
+    box-shadow: inset 0px 0px 5px rgb(255, 255, 255);
+}
+
+.box {
+    border-radius: 5em;
+    padding: 5px;
+    background-color: rgb(30, 30, 30);
+    margin-left: 18px;
+    margin-bottom: 20px;
+    border: 1px solid rgb(251, 222, 255);
+    box-shadow: inset 0px 0px 3px rgb(255, 255, 255);
+    color: white;
+}
+
+input::placeholder {
+    color: white;
+}
+
+#btn {
+    padding: 20px;
+    border-radius: 5em;
+    cursor: pointer;
+    background-color: rgb(120, 57, 179);
+    color: white;
+    box-shadow: inset 0px 0px 5px rgb(255, 255, 255);
+    margin-bottom: 10px;
+}
+
+#btn:active {
+    text-decoration: underline;
+}
+
+.calcout {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    left: 120px;
+}
+
+#ans {
+    border-radius: 5em;
+    padding: 10px;
+    background: transparent;
+    border: 1px solid white;
+    box-shadow: 0px 0px 5px rgb(255, 255, 255);
+    color: white;
+    cursor: not-allowed;
+}
diff --git a/index.html b/index.html
@@ -2744,6 +2744,20 @@ <h3>Calculates the heat index based on the temperature and humidity values.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Heat Transfer Calculator</h2>
+                <h3>Calculates the heat transferred from one region to another based on several input parameters.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Heat-Transfer-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Heat-Transfer-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>Height Calculator</h2>