Skip to content

Commit

Permalink
Merge pull request #66 from PriyanshuValiya/main
Browse files Browse the repository at this point in the history 
Add Gas Quantities Feature
  • Loading branch information
@Vatsal2054
Vatsal2054 authored Oct 31, 2024
2 parents 51a32f6 + a332d29 commit d3bf3d5
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 50 deletions.
25 changes: 25 additions & 0 deletions css/information.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,31 @@ main section:hover {
font-size: 0.9rem;
}

.airCard {
display: flex;
justify-content: center;
align-items: center;
min-width: 150px;
text-align: center;
gap: 5px;
background: var(--glass-bg);
border-radius: 15px;
transition: var(--transition);
border: 2px solid var(--glass-border);
}

#airCards {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}

.airCard:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 25px rgba(31, 38, 135, 0.18);
}

.rain-humidity .weather-details {
display: flex;
justify-content: space-around;
Expand Down
20 changes: 20 additions & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,26 @@ function updateAQIInfo(data) {
const aqiStatus = document.getElementById("aqi-status");
const aqiDescription = document.getElementById("aqi-description");
const aqiIcon = document.querySelector(".air-quality .fas.fa-lungs");

const airArr = data.list[0].components;

const co = document.getElementById("co");
const no = document.getElementById("no");
const no2 = document.getElementById("no2");
const o3 = document.getElementById("o3");
const so2 = document.getElementById("so2");
const pm2 = document.getElementById("pm2");
const pm10 = document.getElementById("pm10");
const nh3 = document.getElementById("nh3");

co.innerText = `${airArr.co} ppm`;
no.innerText = `${airArr.no} µg`;
no2.innerText = `${airArr.no2} ppb`;
o3.innerText = `${airArr.o3} µg`;
so2.innerText = `${airArr.so2} ppb`;
pm2.innerText = `${airArr.pm2_5} µg`;
pm10.innerText = `${airArr.pm10} µg`;
nh3.innerText = `${airArr.nh3} µg`;

const aqi = data.list[0].main.aqi;

Expand Down
165 changes: 115 additions & 50 deletions weather_info.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="https://i.pinimg.com/originals/87/9e/00/879e002a9082b4d32901840cb70c0929.gif">
<link
rel="icon"
href="https://i.pinimg.com/originals/87/9e/00/879e002a9082b4d32901840cb70c0929.gif"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/information.css" />
<link
Expand All @@ -25,70 +28,71 @@ <h2 id="city-name"></h2>
<h3><i class="fas fa-temperature-high"></i> Current Weather</h3>
<div id="weather-info" class="weather-details">
<div class="weather-icon">
<img alt="Weather Icon" class="icons">
<i id="weather-icon" class="fas fa-sun fa-4x"></i>
</div>
<div class="weather-text">
<p id="temperature" class="temperature"></p>
<p id="weather-desc" class="description"></p>

<!-- add wind speed and humidity -->
<i class="fas fa-tint"></i>
<span id="humidity">Humidity: -- %</span>
<br>
<i class="fas fa-wind"></i>
<span id="wind-speed">Wind Speed: -- m/s</span>
<i class="fas fa-tint"></i>
<span id="humidity">Humidity: -- %</span>
<br />
<i class="fas fa-wind"></i>
<span id="wind-speed">Wind Speed: -- m/s</span>
</div>
</div>
</section>

<section class="air-quality">
<h3><i class="fas fa-wind"></i> Air Quality</h3>
<div id="aqi-info" class="weather-details">
<div class="detail-item">
<i class="fas fa-lungs"></i>
<div class="aqi-text">
<p id="aqi-value">AQI: --</p>
<p id="aqi-status">Quality: --</p>
<p id="aqi-description">--</p>
<div style="display: flex; justify-content: space-between">
<section class="air-quality" style="width: 44%">
<h3><i class="fas fa-wind"></i> Air Quality</h3>
<div id="aqi-info" class="weather-details">
<div class="detail-item">
<i class="fas fa-lungs"></i>
<div class="aqi-text">
<p id="aqi-value">AQI: --</p>
<p id="aqi-status">Quality: --</p>
<p id="aqi-description">--</p>
</div>
</div>
</div>
</div>
</section>
</section>

<!-- Add this section after the air-quality section -->
<section class="uv-index">
<h3><i class="fas fa-sun"></i> UV Index</h3>
<div id="uv-info" class="weather-details">
<div class="detail-item">
<i class="fas fa-radiation"></i>
<div class="uv-text">
<p id="uv-value">UV Index: --</p>
<p id="uv-level">Level: --</p>
<p id="uv-advice">--</p>
<div id="uv-progress" class="uv-progress-bar">
<div id="uv-progress-fill"></div>
<!-- Add this section after the air-quality section -->
<section class="uv-index" style="width: 44%">
<h3><i class="fas fa-sun"></i> UV Index</h3>
<div id="uv-info" class="weather-details">
<div class="detail-item">
<i class="fas fa-radiation"></i>
<div class="uv-text">
<p id="uv-value">UV Index: --</p>
<p id="uv-level">Level: --</p>
<p id="uv-advice">--</p>
<div id="uv-progress" class="uv-progress-bar">
<div id="uv-progress-fill"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</section>

<section class="forecast">
<section class="forecast">
<h3><i class="fas fa-calendar-alt"></i> 5-Day Forecast</h3>
<div id="forecast-info" class="forecast-container">
<div id="forecasts" class="forecasts-row">
<div class="forecast-card sunny">
<h4 class="day">Monday, October 21</h4>
<div class="weather-content">
<div class="temp">24°C</div>
<!-- <i class="fas fa-cloud-sun fa-3x icon"></i> -->
<img alt="Weather Icon" class="icon">

<i class="fas fa-cloud-sun fa-3x icon"></i>
</div>
<p class="status">Partly Cloudy</p>
<!-- New Humidity and Wind Speed Information -->
<i class="fas fa-tint"></i>
<span class="humidity">Humidity: -- %</span>
<br>
<br />

<i class="fas fa-wind"></i>
<span class="wind-speed">Wind Speed: -- m/s</span>
Expand All @@ -98,14 +102,13 @@ <h4 class="day">Tuesday, October 21</h4>

<div class="weather-content">
<div class="temp">22°C</div>
<!-- <i class="fas fa-cloud fa-3x icon"></i> -->
<img alt="Weather Icon" class="icon">
<i class="fas fa-cloud fa-3x icon"></i>
</div>
<p class="status">Cloudy</p>
<!-- New Humidity and Wind Speed Information -->
<i class="fas fa-tint"></i>
<span class="humidity">Humidity: -- %</span>
<br>
<br />

<i class="fas fa-wind"></i>
<span class="wind-speed">Wind Speed: -- m/s</span>
Expand All @@ -115,13 +118,13 @@ <h4 class="day">Wednesday, October 21</h4>

<div class="weather-content">
<div class="temp">20°C</div>
<img alt="Weather Icon" class="icon">
<i class="fas fa-cloud-rain fa-3x icon"></i>
</div>
<p class="status">Rainy</p>
<!-- New Humidity and Wind Speed Information -->
<i class="fas fa-tint"></i>
<span class="humidity">Humidity: -- %</span>
<br>
<br />

<i class="fas fa-wind"></i>
<span class="wind-speed">Wind Speed: -- m/s</span>
Expand All @@ -131,13 +134,13 @@ <h4 class="day">Thursday, October 21</h4>

<div class="weather-content">
<div class="temp">-2°C</div>
<img alt="Weather Icon" class="icon">
<i class="fas fa-snowflake fa-3x icon"></i>
</div>
<p class="status">Snowy</p>
<!-- New Humidity and Wind Speed Information -->
<i class="fas fa-tint"></i>
<span class="humidity">Humidity: -- %</span>
<br>
<br />

<i class="fas fa-wind"></i>
<span class="wind-speed">Wind Speed: -- m/s</span>
Expand All @@ -147,13 +150,13 @@ <h4 class="day">Friday, October 21</h4>

<div class="weather-content">
<div class="temp">18°C</div>
<img alt="Weather Icon" class="icon">
<i class="fas fa-bolt fa-3x icon"></i>
</div>
<p class="status">Stormy</p>
<!-- New Humidity and Wind Speed Information -->
<i class="fas fa-tint"></i>
<span class="humidity">Humidity: -- %</span>
<br>
<br />

<i class="fas fa-wind"></i>
<span class="wind-speed">Wind Speed: -- m/s</span>
Expand All @@ -162,6 +165,60 @@ <h4 class="day">Friday, October 21</h4>
</div>
</section>

<section>
<h3>
<i
class="fa-solid fa-feather-pointed"
style="
height: 30px;
width: 30px;
font-size: x-large;
margin-right: 5px;
"
></i>
Gas Quantities (per meter<sup>3</sup>)
</h3>

<div id="airCards">
<div style="display: flex; justify-content: space-around">
<div class="airCard">
<p>CO :</p>
<p id="co"></p>
</div>
<div class="airCard">
<p>NO :</p>
<p id="no"></p>
</div>
<div class="airCard">
<p>NO<sub>2</sub> :</p>
<p id="no2"></p>
</div>
<div class="airCard">
<p>O<sub>3</sub> :</p>
<p id="o3"></p>
</div>
</div>
<div style="display: flex; justify-content: space-around">
<div class="airCard">
<p>SO<sub>2</sub> :</p>
<p id="so2"></p>
</div>
<div class="airCard">
<p>PM<sub>2.5</sub> :</p>
<p id="pm2"></p>
</div>
<div class="airCard">
<p>PM<sub>10</sub> :</p>
<p id="pm10"></p>
</div>
<div class="airCard">
<p>NH<sub>3</sub> :</p>
<p id="nh3"></p>
</div>
</div>
</div>
</section>

<section class="forecast">
<h3>
<i
Expand All @@ -181,11 +238,19 @@ <h3>
</section>

<section class="rain-humidity">
<h2><i class="fas fa-cloud-rain"></i> Rain </h3>
<div id="rain-humidity-info" class="weather-details">
<h2><i class="fas fa-cloud-rain"></i> Rain</h2>
<div id="rain-humidity-info
" class="weather-details">
<div class="detail-item">
<img src="images/rainChance.png" alt="Chance Of Rain" style="height: 60px; width:60px";>
<i class="fas fa-umbrella"></i>
<p id="chance-of-rain"></p>
</div>
<!-- not required because we have humidity in the current weather section -->
<!-- </div>
<div class="detail-item">
<i class="fas fa-tint"></i>
<span id="humidity">Humidity: -- %</span>
</div> -->
</div>
</section>
</main>
Expand Down

0 comments on commit d3bf3d5

Please sign in to comment.