diff --git a/Calculators/Heat-Transfer-Calculator/README.md b/Calculators/Heat-Transfer-Calculator/README.md index 7730f88c8..ec5701bc8 100644 --- a/Calculators/Heat-Transfer-Calculator/README.md +++ b/Calculators/Heat-Transfer-Calculator/README.md @@ -3,7 +3,7 @@ ## 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 *(T1-T2)*t)/L +Working formula:- H = (K* A *(T1-T2)*t)/L ## Tech Stacks :- diff --git a/Calculators/Heat-Transfer-Calculator/physicshero.png b/Calculators/Heat-Transfer-Calculator/assets/background.png similarity index 100% rename from Calculators/Heat-Transfer-Calculator/physicshero.png rename to Calculators/Heat-Transfer-Calculator/assets/background.png diff --git a/Calculators/Heat-Transfer-Calculator/index.html b/Calculators/Heat-Transfer-Calculator/index.html index 28112a8f6..970b75ca5 100644 --- a/Calculators/Heat-Transfer-Calculator/index.html +++ b/Calculators/Heat-Transfer-Calculator/index.html @@ -1,82 +1,35 @@ - - + - Heat_Transfer_Calculator - - - + Heat Transfer Calculator + +
-
-

HEAT TRANSFER CALCULATOR

-
-
-

H= [K*A*(T1-T2)*t]/L

-
-
- - - - - - -
- -
-
- +
+

HEAT TRANSFER CALCULATOR

-
- +
+

H = [K*A*(T1-T2)*t]/L

+
+
+ + + + + + +
+
+
+ +
+
+ +
-
- - - + + \ No newline at end of file diff --git a/Calculators/Heat-Transfer-Calculator/script.js b/Calculators/Heat-Transfer-Calculator/script.js index 22593e092..30f8a3ca1 100644 --- a/Calculators/Heat-Transfer-Calculator/script.js +++ b/Calculators/Heat-Transfer-Calculator/script.js @@ -1,29 +1,29 @@ const btn = document.getElementById("btn"); btn.addEventListener("click", (e) => { - console.log("hi"); - e.preventDefault(); - calcHeat(); + 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; -} + 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; +} \ No newline at end of file diff --git a/Calculators/Heat-Transfer-Calculator/style.css b/Calculators/Heat-Transfer-Calculator/style.css index 127cc7cff..35630583b 100644 --- a/Calculators/Heat-Transfer-Calculator/style.css +++ b/Calculators/Heat-Transfer-Calculator/style.css @@ -1,90 +1,92 @@ +@import url("https://fonts.googleapis.com/css2?family=Doto:wght@100..900&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(physicshero.png); - color: white; - font-family: "Nunito", serif; - display: flex; - justify-content: center; - align-items: center; + 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); /* Transparent background */ - backdrop-filter: blur(7px); + 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); + 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); + 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; + 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; + 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; + 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; + text-decoration: underline; } .calcout { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: relative; - left: 120px; + 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; -} + 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; +} \ No newline at end of file