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/index.html b/Calculators/Heat-Transfer-Calculator/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Heat_Transfer_Calculator</title>
+    <link rel="stylesheet" href="style.css" />
+    <style>
+      @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");
+    </style>
+  </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/physicshero.png b/Calculators/Heat-Transfer-Calculator/physicshero.png
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,90 @@
+body {
+  background-image: url(physicshero.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); /* Transparent background */
+  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;
+}