Added Weather Calculator (#876)

Rakesh9100 · May 25, 2024 · 0463799 · 0463799
1 parent 28a3102
commit 0463799
Show file tree

Hide file tree

Showing 5 changed files with 196 additions and 0 deletions.
diff --git a/Calculators/Weather-Calculator/README.md b/Calculators/Weather-Calculator/README.md
@@ -0,0 +1,17 @@
+# <p align="center">Weather Calculator</p>
+
+## Description :-
+
+Calculates wind chill factor, dew point, and heat index, displays human thermal comfort, and converts temperature.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/143149376/7a9b9357-d3c2-4289-9ac7-5e6f9f2c9106)
+
+![image2](https://github.com/Rakesh9100/CalcDiverse/assets/143149376/891c9458-9758-4d0f-b848-0c182be5d1b5)
diff --git a/Calculators/Weather-Calculator/index.html b/Calculators/Weather-Calculator/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Weather Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1> Weather Calculator </h1>
+        <div>
+            <h2> Temperature </h2>
+            <input type="number" id="temperature" placeholder="Temperature (°C)">
+            <h3> Humidity </h3>
+            <input type="number" id="humidity" placeholder="Humidity (%)">
+            <h4> Wind Speed </h4>
+            <input type="number" id="windSpeed" placeholder="Wind Speed (m/s)">
+        </div>
+        <button id="calculate">Calculate</button>
+
+        <div class="resultsContainer">
+        <div id="results" class="results"></div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Weather-Calculator/script.js b/Calculators/Weather-Calculator/script.js
@@ -0,0 +1,57 @@
+document.getElementById('calculate').addEventListener('click', function() {
+    const temperature = parseFloat(document.getElementById('temperature').value);
+    const humidity = parseFloat(document.getElementById('humidity').value);
+    const windSpeed = parseFloat(document.getElementById('windSpeed').value);
+
+    const results = `
+        <p> Temperature Conversion: ${convertTemperature(temperature)} °F </p>
+        <p> Wind Chill: ${findWindChill(temperature, windSpeed)} °C </p>
+        <p> Dew Point: ${findDewPoint(temperature, humidity)} °C </p>
+        <p> Heat Index: ${findHeatIndex(temperature, humidity)} °C </p>
+        <p> Human Thermal Comfort: ${findHumanThermalComfort(temperature, humidity, windSpeed)} </p>
+    `;
+
+    document.getElementById('results').innerHTML = results;
+});
+
+function convertTemperature(celsius) {
+
+    return (celsius * 9/5) + 32;         
+}
+
+function findWindChill(temperature, windSpeed) {
+
+    if (temperature > 10 || windSpeed < 4.8) {
+        return "❌";
+    }
+    return (13.12 + 0.6215 * temperature - 11.37 * Math.pow(windSpeed, 0.16) + 0.3965 * temperature * Math.pow(windSpeed, 0.16)).toFixed(2);
+}
+
+function findDewPoint(temperature, humidity) {
+
+    const a = 17.27;
+    const b = 237.7;
+    const alpha = ((a * temperature) / (b + temperature)) + Math.log(humidity / 100);
+    const dewPoint = (b * alpha) / (a - alpha);
+    return dewPoint.toFixed(2);       
+}
+
+function findHeatIndex(temperature, humidity) {
+
+    const T = temperature;
+    const R = humidity;
+    const HI = -8.78469475556 + 1.61139411 * T + 2.33854883889 * R + -0.14611605 * T * R + -0.012308094 * Math.pow(T, 2) + -0.0164248277778 * Math.pow(R, 2) + 0.002211732 * Math.pow(T, 2) * R + 0.00072546 * T * Math.pow(R, 2) + -0.000003582 * Math.pow(T, 2) * Math.pow(R, 2);
+    return HI.toFixed(2);
+}
+
+function findHumanThermalComfort(temperature, humidity, windSpeed) {
+
+    const THI = temperature - ((0.55 - (0.55 * (humidity / 100))) * (temperature - 14.5));
+    if (THI < 15) {
+        return "Cold";
+    } else if (THI >= 15 && THI <= 25) {
+        return "Comfortable";
+    } else {
+        return "Hot";
+    }
+}
diff --git a/Calculators/Weather-Calculator/style.css b/Calculators/Weather-Calculator/style.css
@@ -0,0 +1,80 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background: radial-gradient(#a07eff,#ffffff) ;
+}
+
+.container {
+    text-align: center;
+    width: 30%;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+.container h1{
+    font-family:'Lucida Sans', Arial, sans-serif;
+    color:#4f1591;
+    font-size: 30px;
+}
+
+.container h2, h3, h4{
+    font-size: 15px;
+    text-align: left;
+    margin-left: 10px;
+}
+
+input[type="number"] {
+    display: block;
+    width: 90%;
+    text-align: center;
+    padding: 10px;
+    margin: 10px 5px;
+    border: 1px solid #ccc;
+    border-radius: 50px;
+}
+
+input[type="number"]:hover {
+    background-color: rgb(255, 230, 221);
+}
+
+button {
+    padding: 10px 20px;
+    border: none;
+    background: #8d6fde;
+    color: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+button:hover {
+    background: #7d62ca;
+    border-bottom: 3px solid #4f1591;
+}
+
+.resultsContainer {
+    background-color: rgb(255, 230, 221);
+    border-radius: 8px;
+    border-right:3px solid #484848;
+    border-bottom:3px solid #484848;
+}
+
+.results {
+    margin-top: 30px;
+    font-size: 15px;
+    text-align: left;
+}
+
+.results p {
+    display: block;
+    width: 90%;
+    text-align: left;
+    padding: 8px;
+    margin: 10px 10px;
+    border-radius: 50px;
+}
diff --git a/index.html b/index.html
@@ -2106,6 +2106,20 @@ <h3>Calculate daily water intake based on weight, activity, and weather.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Weather Calculator</h2>
+                <h3>Calculates wind chill factor, dew point, heat index, reports human thermal comfort and converts temperature.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Weather-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Weather-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>Website Bandwidth Calculator</h2>