Skip to content

Commit

Permalink
script.js
Browse files Browse the repository at this point in the history 
Added the weekly weather forecast
  • Loading branch information
@kshitizrohilla
kshitizrohilla authored Jul 17, 2024
1 parent b654c2e commit 0fad1eb
Show file tree
Hide file tree
Showing 2 changed files with 296 additions and 215 deletions.
228 changes: 134 additions & 94 deletions scripts/mobile.js
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,135 @@
var cityInputMobile = document.getElementById("mobileSearchCity");

cityInputMobile.addEventListener("keyup", function(event)
{
if(event.key === "Enter")
{
loader();
function loader()
{

document.getElementById("locationName").innerHTML = "";
document.getElementById("temperatureValue").innerHTML = "";
document.getElementById("weatherType").innerHTML = "";

const img1 = document.createElement("img");
const img2 = document.createElement("img");
const img3 = document.createElement("img");

img1.id = "loader1";
img2.id = "loader2";
img3.id = "loader3";

img1.src = "icons/loader.gif";
img2.src = "icons/loader.gif";
img3.src = "icons/loader.gif";

const parentElement1 = document.getElementById("locationName");
const parentElement2 = document.getElementById("temperatureValue");
const parentElement3 = document.getElementById("weatherType");

parentElement1.appendChild(img1);
parentElement2.appendChild(img2);
parentElement3.appendChild(img3);

// document.getElementById("loader1").src = "icons/loader.gif";
// document.getElementById("loader2").src = "icons/loader.gif";
// document.getElementById("loader3").src = "icons/loader.gif";
}

var cityInputValue = cityInputMobile.value;

var apiKey = "b1fd6e14799699504191b6bdbcadfc35"; // Default
var unit = "metric";
var apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cityInputValue}&appid=${apiKey}&units=${unit}`;

if(cityInputValue != "")
{
async function getWeather()
{
var response = await fetch(apiUrl);
var data = await response.json();

if(data.message != "city not found" && data.cod != "404")
{
var location = data.name;
var temperature = data.main.temp;
var weatherType = data.weather[0].description;
var realFeel = data.main.feels_like;
var windSpeed = data.wind.speed;
var windDirection = data.wind.deg;
var visibility = data.visibility / 1000;
var pressure = data.main.pressure;
var maxTemperature = data.main.temp_max;
var minTemperature = data.main.temp_min;
var humidity = data.main.humidity;
var sunrise = data.sys.sunrise;
var sunset = data.sys.sunset;

document.getElementById("locationName").innerHTML = location;
document.getElementById("temperatureValue").innerHTML = temperature + "<sup>o</sup>C";
document.getElementById("weatherType").innerHTML = weatherType;
document.getElementById("realFeelAdditionalValue").innerHTML = realFeel + "<sup>o</sup>C";
document.getElementById("windSpeedAdditionalValue").innerHTML = windSpeed + " km/h";
document.getElementById("windDirectionAdditionalValue").innerHTML = windDirection;
document.getElementById("visibilityAdditionalValue").innerHTML = visibility + " km";
document.getElementById("pressureAdditionalValue").innerHTML = pressure;
document.getElementById("maxTemperatureAdditionalValue").innerHTML = maxTemperature + "<sup>o</sup>C";
document.getElementById("minTemperatureAdditionalValue").innerHTML = minTemperature + "<sup>o</sup>C";
document.getElementById("humidityAdditionalValue").innerHTML = humidity;
document.getElementById("sunriseAdditionalValue").innerHTML = sunrise;
document.getElementById("sunsetAdditionalValue").innerHTML = sunset;
}
else
{
document.getElementById("locationName").innerHTML = "City Not Found";
document.getElementById("temperatureValue").innerHTML = "";
document.getElementById("weatherType").innerHTML = "";
}
}

getWeather();
}
else document.getElementById("locationName").innerHTML = "Enter a city name...";
}
var cityInputMobile = document.getElementById("mobileSearchCity");

cityInputMobile.addEventListener("keyup", function (event) {
if (event.key === "Enter") {
loader();
function loader() {

document.getElementById("locationName").innerHTML = "";
document.getElementById("temperatureValue").innerHTML = "";
document.getElementById("weatherType").innerHTML = "";

const img1 = document.createElement("img");
const img2 = document.createElement("img");
const img3 = document.createElement("img");

img1.id = "loader1";
img2.id = "loader2";
img3.id = "loader3";

img1.src = "icons/loader.gif";
img2.src = "icons/loader.gif";
img3.src = "icons/loader.gif";

const parentElement1 = document.getElementById("locationName");
const parentElement2 = document.getElementById("temperatureValue");
const parentElement3 = document.getElementById("weatherType");

parentElement1.appendChild(img1);
parentElement2.appendChild(img2);
parentElement3.appendChild(img3);

// document.getElementById("loader1").src = "icons/loader.gif";
// document.getElementById("loader2").src = "icons/loader.gif";
// document.getElementById("loader3").src = "icons/loader.gif";
}

var cityInputValue = cityInputMobile.value;

var apiKey = "b1fd6e14799699504191b6bdbcadfc35"; // Default
var unit = "metric";
var apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cityInputValue}&appid=${apiKey}&units=${unit}`;

if (cityInputValue != "") {
async function getWeather() {
var response = await fetch(apiUrl);
var data = await response.json();

if (data.message != "city not found" && data.cod != "404") {
var location = data.name;
var temperature = data.main.temp;
var weatherType = data.weather[0].description;
var realFeel = data.main.feels_like;
var windSpeed = data.wind.speed;
var windDirection = data.wind.deg;
var visibility = data.visibility / 1000;
var pressure = data.main.pressure;
var maxTemperature = data.main.temp_max;
var minTemperature = data.main.temp_min;
var humidity = data.main.humidity;
var sunrise = data.sys.sunrise;
var sunset = data.sys.sunset;

fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${cityInputValue}&appid=${apiKey}`)
.then(response => response.json())
.then(data => {
const forecastContainer = document.getElementById('forecast-container');
const dailyForecasts = {};
data.list.forEach(entry => {
const dateTime = new Date(entry.dt * 1000);
const date = dateTime.toLocaleDateString('en-US', { weekday: 'short', day: 'numeric' });
if (!dailyForecasts[date]) {
dailyForecasts[date] = {
date: date,
icon: `https://openweathermap.org/img/w/${entry.weather[0].icon}.png`,
maxTemp: -Infinity,
minTemp: Infinity,
weatherType: entry.weather[0].main
};
}

if (entry.main.temp_max > dailyForecasts[date].maxTemp) {
dailyForecasts[date].maxTemp = entry.main.temp_max;
}
if (entry.main.temp_min < dailyForecasts[date].minTemp) {
dailyForecasts[date].minTemp = entry.main.temp_min;
}
});

Object.values(dailyForecasts).forEach(day => {
const forecastCard = document.createElement('div');
forecastCard.classList.add('daily-forecast-card');

forecastCard.innerHTML = `
<p class="daily-forecast-date">${day.date}</p>
<div class="daily-forecast-logo"><img class="imgs-as-icons" src="${day.icon}"></div>
<div class="max-min-temperature-daily-forecast">
<span class="max-daily-forecast">${Math.round(day.maxTemp - 273.15)}<sup>o</sup>C</span>
<span class="min-daily-forecast">${Math.round(day.minTemp - 273.15)}<sup>o</sup>C</span>
</div>
<p class="weather-type-daily-forecast">${day.weatherType}</p>
`;

forecastContainer.appendChild(forecastCard);
});
})
.catch(error => {
console.error('Error fetching data:', error);
});

document.getElementById("locationName").innerHTML = location;
document.getElementById("temperatureValue").innerHTML = temperature + "<sup>o</sup>C";
document.getElementById("weatherType").innerHTML = weatherType;
document.getElementById("realFeelAdditionalValue").innerHTML = realFeel + "<sup>o</sup>C";
document.getElementById("windSpeedAdditionalValue").innerHTML = windSpeed + " km/h";
document.getElementById("windDirectionAdditionalValue").innerHTML = windDirection;
document.getElementById("visibilityAdditionalValue").innerHTML = visibility + " km";
document.getElementById("pressureAdditionalValue").innerHTML = pressure;
document.getElementById("maxTemperatureAdditionalValue").innerHTML = maxTemperature + "<sup>o</sup>C";
document.getElementById("minTemperatureAdditionalValue").innerHTML = minTemperature + "<sup>o</sup>C";
document.getElementById("humidityAdditionalValue").innerHTML = humidity;
document.getElementById("sunriseAdditionalValue").innerHTML = sunrise;
document.getElementById("sunsetAdditionalValue").innerHTML = sunset;
}
else {
document.getElementById("locationName").innerHTML = "City Not Found";
document.getElementById("temperatureValue").innerHTML = "";
document.getElementById("weatherType").innerHTML = "";
}
}

getWeather();
}
else document.getElementById("locationName").innerHTML = "Enter a city name...";
}
});
Loading

0 comments on commit 0fad1eb

Please sign in to comment.