Skip to content

Commit

Permalink
Merge pull request #478 from ShadowFax1731/main
Browse files Browse the repository at this point in the history 
Added  the weather search on key press function.
  • Loading branch information
@sadanandpai
sadanandpai authored Jul 24, 2024
2 parents 6306b3b + c542d55 commit 99e0abb
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 96 deletions.
84 changes: 42 additions & 42 deletions apps/javascript/src/challenges/weather-app/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../../helpers/header.js" type="module"></script>
<link rel="stylesheet" href="style.css" />
<script src="index.js" type="module"></script>
</head>
<body>
<div class="card">
<h1>CHECK THE WEATHER!!</h1>
<div class="search">
<input type="text" placeholder="Enter city name" spellcheck="false" />
<button><img src="images/search.png" /></button>
</div>
<div class="error">
<!-- Error Message when wrong city is entered -->
<p>INVALID CITY NAME!!!</p>
</div>
<div class="weather">
<img src="images/rain.png" class="weather-icon" />
<h2 class="temp">22°C</h2>
<h3 class="city">Kolkata</h3>
<div class="details">
<div class="col">
<img src="images/humidity.png" />
<div>
<p class="humidity">50%</p>
<p>Humidity</p>
</div>
</div>
<div class="col">
<img src="images/wind.png" />
<div>
<p class="wind">15 km/h</p>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<script src="../../helpers/header.js" type="module"></script>
<link rel="stylesheet" href="style.css" />
<script src="./index.js" type="module"></script>
</head>
<body>
<div class="card">
<h1>CHECK THE WEATHER!!</h1>
<form class="search">
<input type="text" placeholder="Enter city name" spellcheck="false" />
<button><img src="images/search.png" /></button>
</form>
<div class="error">
<!-- Error Message when wrong city is entered -->
<p>INVALID CITY NAME!!!</p>
</div>
<div class="weather">
<img src="images/rain.png" class="weather-icon" />
<h2 class="temp">22°C</h2>
<h3 class="city">Kolkata</h3>
<div class="details">
<div class="col">
<img src="images/humidity.png" />
<div>
<p class="humidity">50%</p>
<p>Humidity</p>
</div>
</div>
<div class="col">
<img src="images/wind.png" />
<div>
<p class="wind">15 km/h</p>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
122 changes: 68 additions & 54 deletions apps/javascript/src/challenges/weather-app/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,68 @@
import clear from './images/clear.png';
import clouds from './images/clouds.png';
import drizzle from './images/drizzle.png';
import haze from './images/haze.png';
import humidity from './images/humidity.png';
import mist from './images/mist.png';
import rain from './images/rain.png';
import snow from './images/snow.png';
import wind from './images/wind.png';

const weatherIconsMap = new Map([
['clear', clear],
['clouds', clouds],
['drizzle', drizzle],
['haze', haze],
['humidity', humidity],
['mist', mist],
['rain', rain],
['snow', snow],
['wind', wind],
]);

// API TO BE USED FOR THE WEATHER DETAILS
const apiKey = '46d47581a51a79782741111953e700af';
const apiUrl = 'https://api.openweathermap.org/data/2.5/weather?units=metric&q=';

const searchBox = document.querySelector('.search input');
const searchBtn = document.querySelector('.search button');
const weatherIcon = document.querySelector('.weather-icon');

async function checkWeather(city) {
const response = await fetch(apiUrl + city + `&appid=${apiKey}`); //to fetch the details when city name is entered.

if (response.status == 404) {
// when city name is entered wrong
document.querySelector('.error').style.display = 'block';
document.querySelector('.weather').style.display = 'none';
} else {
var data = await response.json();
document.querySelector('.city').innerHTML = data.name;
document.querySelector('.temp').innerHTML = Math.round(data.main.temp) + '°C';
document.querySelector('.humidity').innerHTML = data.main.humidity + '%';
document.querySelector('.wind').innerHTML = data.wind.speed + 'km/h';

weatherIcon.src = weatherIconsMap.get(data.weather[0]?.main?.toLowerCase());
document.querySelector('.weather').style.display = 'block';
document.querySelector('.error').style.display = 'none';
}
}

searchBtn.addEventListener('click', () => {
// when search button is clicked it initiates the check weather program with the city name entered
checkWeather(searchBox.value);
});
const clear = new Image();
clear.src = './images/clear.png';
const clouds = new Image();
clouds.src = './images/clouds.png';
const drizzle = new Image();
drizzle.src = './images/drizzle.png';
const haze = new Image();
haze.src = './images/haze.png';
const humidity = new Image();
humidity.src = './images/humidity.png';
const mist = new Image();
mist.src = './images/mist.png';
const rain = new Image();
rain.src = './images/rain.png';
const snow = new Image();
snow.src = './images/snow.png';
const wind = new Image();
wind.src = './images/wind.png';

const weatherIconsMap = new Map([
['clear', clear.src],
['clouds', clouds.src],
['drizzle', drizzle.src],
['haze', haze.src],
['humidity', humidity.src],
['mist', mist.src],
['rain', rain.src],
['snow', snow.src],
['wind', wind.src],
]);

// API TO BE USED FOR THE WEATHER DETAILS
const apiKey = '46d47581a51a79782741111953e700af';
const apiUrl = 'https://api.openweathermap.org/data/2.5/weather?units=metric&q=';

const searchBox = document.querySelector('.search input');
const searchBtn = document.querySelector('.search button');
const weatherIcon = document.querySelector('.weather-icon');

async function checkWeather(city) {
const response = await fetch(apiUrl + city + `&appid=${apiKey}`); //to fetch the details when city name is entered.

if (response.status == 404) {
// when city name is entered wrong
document.querySelector('.error').style.display = 'block';
document.querySelector('.weather').style.display = 'none';
} else {
var data = await response.json();
document.querySelector('.city').innerHTML = data.name;
document.querySelector('.temp').innerHTML = Math.round(data.main.temp) + '°C';
document.querySelector('.humidity').innerHTML = data.main.humidity + '%';
document.querySelector('.wind').innerHTML = data.wind.speed + 'km/h';

weatherIcon.src = weatherIconsMap.get(data.weather[0]?.main?.toLowerCase());
document.querySelector('.weather').style.display = 'block';
document.querySelector('.error').style.display = 'none';
}
}

searchBtn.addEventListener('click', () => {
// when search button is clicked it initiates the check weather program with the city name entered
checkWeather(searchBox.value);
});

document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
checkWeather(searchBox.value);
});

0 comments on commit 99e0abb

Please sign in to comment.