Skip to content

Commit

Permalink
fixed bugs on error message and refactored codes
Browse files Browse the repository at this point in the history
  • Loading branch information
@avelynhc
avelynhc committed Nov 2, 2023
1 parent 4fc52c3 commit 81d7ee6
Showing 1 changed file with 106 additions and 131 deletions.
237 changes: 106 additions & 131 deletions 25 - Weather App/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,131 +15,126 @@ window.addEventListener('load', () => {
return response.json();
})
.then((data) => {
const { temp, feels_like } = data.main;
const { temp } = data.main;
const place = data.name;
const { description, icon } = data.weather[0];
const { description } = data.weather[0];

const fahrenheit = (temp * 9) / 5 + 32;

// Interacting with DOM to show data
loc.textContent = `${place}`;
desc.textContent = `${description}`;
desc.textContent = `${description}`;
tempC.textContent = `${temp.toFixed(2)} °C`;
// tempF.textContent = `${fahrenheit.toFixed(2)} °F`;
if(desc.textContent=='clear'){
document.body.style.backgroundImage= "url('Clear1.jpg')";
}else if(desc.textContent=='clouds'){
document.body.style.backgroundImage= "url('Cloudy.jpg')";
}
else if(desc.textContent=='rain'){
document.body.style.backgroundImage= "url('rain.jpg')";
}
else if(desc.textContent=='mist'){
document.body.style.backgroundImage= "url('rain.jpg')";
}
else if(desc.textContent=='haze'){
document.body.style.backgroundImage= "url('Cloudy.jpg')";
}
else if(desc.textContent=='snow'){
document.body.style.backgroundImage= "url('snow.jpg')";
}
else if(desc.textContent=='thunderstorm'){
document.body.style.backgroundImage= "url('thunder.jpg')";
}
showWeatherImage(desc);
});
});


const searchInputBox = document.getElementById('input-box');
searchInputBox.addEventListener('keypress' , async (event) => {
if (event.keyCode === 13) {
console.log(searchInputBox.value);
await getWeatherReport(searchInputBox.value);
document.querySelector('.weather-body').style.display = "block";
}
});

searchInputBox.addEventListener('keypress' , (event) => {
if(event.keyCode == 13) {
async function getWeatherReport(city){
try {
const response = await fetch(`${weatherApi.baseUrl}?q=${city}&appid=${weatherApi.key}&units=metric`);
const data = await response.json();

console.log(searchInputBox.value);
getWeatherReport(searchInputBox.value);
document.querySelector('.weather-body').style.display = "block";
if(!response.ok) {
throw new Error('Error while getting the weather report');
}
showWeatherReport(data);
lat = data.coord.lat;
long = data.coord.lon;
await fetching();
} catch(err) {
console.error(err);
showErrorMessage();
}
}

}
});
function showErrorMessage() {
document.getElementById('city').innerText = 'Country/City Name Not Found';
// clear previous output
document.getElementById('date').innerText = '';
document.getElementById('temp').innerText = '';
document.getElementById('min-max').innerText = '';
document.getElementById('weather').innerText = '';
}

function getWeatherReport(city){
fetch(`${weatherApi.baseUrl}?q=${city}&appid=${weatherApi.key}&units=metric`)
.then(weather => {
return weather.json();
}).then((data) => {
showWeatherReport(data);
lat = data.coord.lat;
long = data.coord.lon;
fetching();
});
function showWeatherImage(WeatherType) {
if(WeatherType.textContent === 'Clear') {
document.body.style.backgroundImage = "url('clear1.jpg')"
}
else if(WeatherType.textContent === 'Clouds') {
document.body.style.backgroundImage = "url('clouds.jpg')"
}
else if(WeatherType.textContent === 'Haze') {
document.body.style.backgroundImage = "url('clouds.jpg')"
}
else if(WeatherType.textContent === 'Rain') {
document.body.style.backgroundImage = "url('rain.jpg')"
}
else if(WeatherType.textContent === 'Snow') {
document.body.style.backgroundImage = "url('snow.jpg')"
}
else if(WeatherType.textContent === 'Thunderstorm') {
document.body.style.backgroundImage = "url('thunder.jpg')"
}
else if(WeatherType.textContent === 'Sunny') {
document.body.style.backgroundImage = "url('sunny.jpg')"
}
}

function showWeatherReport(weather){
console.log(weather);

let city = document.getElementById('city');
city.innerText = `${weather.name},${weather.sys.country}`;

let temperature = document.getElementById('temp');
temperature.innerHTML = `${Math.round(weather.main.temp)}°C`;
let city = document.getElementById('city');
city.innerText = `${weather.name},${weather.sys.country}`;

let minMaxTemp = document.getElementById('min-max');
minMaxTemp.innerHTML = `${Math.floor(weather.main.temp_min)}°C (min) / ${Math.ceil(weather.main.temp_min)}°C (max)`;
let temperature = document.getElementById('temp');
temperature.innerHTML = `${Math.round(weather.main.temp)}°C`;

let WeatherType = document.getElementById('weather');
WeatherType.innerText = `${weather.weather[0].main}`;
let minMaxTemp = document.getElementById('min-max');
minMaxTemp.innerHTML = `${Math.floor(weather.main.temp_min)}°C (min) / ${Math.ceil(weather.main.temp_min)}°C (max)`;

let date = document.getElementById('date');
let todayDate = new Date();
//console.log(todayDate);
date.innerText = dateManage(todayDate);
let WeatherType = document.getElementById('weather');
WeatherType.innerText = `${weather.weather[0].main}`;

if(WeatherType.textContent == 'Clear') {
document.body.style.backgroundImage = "url('clear1.jpg')"
}
else if(WeatherType.textContent == 'Clouds') {
document.body.style.backgroundImage = "url('clouds.jpg')"
}
else if(WeatherType.textContent == 'Haze') {
document.body.style.backgroundImage = "url('clouds.jpg')"
}
else if(WeatherType.textContent == 'Rain') {
document.body.style.backgroundImage = "url('rain.jpg')"
}
else if(WeatherType.textContent == 'Snow') {
document.body.style.backgroundImage = "url('snow.jpg')"
}
else if(WeatherType.textContent == 'Thunderstorm') {
document.body.style.backgroundImage = "url('thunder.jpg')"
}
else if(WeatherType.textContent == 'Sunny') {
document.body.style.backgroundImage = "url('sunny.jpg')"
}
let date = document.getElementById('date');
let todayDate = new Date();
//console.log(todayDate);
date.innerText = dateManage(todayDate);
showWeatherImage(WeatherType);
}

function dateManage(dateArg){
let days = ["Sunday", "Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

let months = ["January", "February", "March","April","May","June","July","August","September","October","November","December"];

let year = dateArg.getFullYear();
let month= months[dateArg.getMonth()];
let date = dateArg.getDate();
let day = days[dateArg.getDay()];

return `${date} ${month} (${day}), ${year}`;


}

function fetching(){
fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${long}&appid=${weatherApi.key}&units=metric`)
.then(response => response.json())
.then((data) =>{
dat = data;
google.charts.load('current',{packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
});
async function fetching(){
try {
const response = await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${long}&appid=${weatherApi.key}&units=metric`);
const data = response.json();

if(!response.ok) {
throw new Error('Error while fetching the weather')
}
dat = data;
google.charts.load('current',{packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
} catch(err) {
console.error(err);
}
}

function drawChart() {
Expand All @@ -155,34 +150,22 @@ function drawChart() {
let unix_time_9 = dat.hourly[9].dt;
let unix_time_10 = dat.hourly[10].dt;
let unix_time_11 = dat.hourly[11].dt;

var hour0 = new Date(unix_time_0 * 1000);
var hour1 = new Date(unix_time_1 * 1000);
var hour2 = new Date(unix_time_2 * 1000);
var hour3 = new Date(unix_time_3 * 1000);
var hour4 = new Date(unix_time_4 * 1000);
var hour5 = new Date(unix_time_5 * 1000);
var hour6 = new Date(unix_time_6 * 1000);
var hour7 = new Date(unix_time_7 * 1000);
var hour8 = new Date(unix_time_8 * 1000);
var hour9 = new Date(unix_time_9 * 1000);
var hour10 = new Date(unix_time_10 * 1000);
var hour11= new Date(unix_time_11 * 1000);

hour0 = format(hour0);
hour1 = format(hour1);
hour2 = format(hour2);
hour3 = format(hour3);
hour4 = format(hour4);
hour5 = format(hour5);
hour6 = format(hour6);
hour7 = format(hour7);
hour8 = format(hour8);
hour9 = format(hour9);
hour10 = format(hour10);
hour11 = format(hour11);

const hour0 = format(new Date(unix_time_0 * 1000));
const hour1 = format(new Date(unix_time_1 * 1000));
const hour2 = format(new Date(unix_time_2 * 1000));
const hour3 = format(new Date(unix_time_3 * 1000));
const hour4 = format(new Date(unix_time_4 * 1000));
const hour5 = format(new Date(unix_time_5 * 1000));
const hour6 = format(new Date(unix_time_6 * 1000));
const hour7 = format(new Date(unix_time_7 * 1000));
const hour8 = format(new Date(unix_time_8 * 1000));
const hour9 = format(new Date(unix_time_9 * 1000));
const hour10 = format(new Date(unix_time_10 * 1000));
const hour11 = format(new Date(unix_time_11 * 1000));

// Set Data
var data = google.visualization.arrayToDataTable([
const data = google.visualization.arrayToDataTable([
['Time', 'Temperature', { role: 'style' }],
[hour0,Math.floor(dat.hourly[0].temp),'color:black'],[hour1,Math.floor(dat.hourly[1].temp),'color:black'],
[hour2,Math.floor(dat.hourly[2].temp),'color:black'],[hour3,Math.floor(dat.hourly[3].temp),'color:black'],
Expand All @@ -192,7 +175,7 @@ function drawChart() {
[hour10,Math.floor(dat.hourly[10].temp),'color:black'],[hour11,Math.floor(dat.hourly[11].temp),'color:black']
]);
// Set Options
var options = {
const options = {
title: 'time vs. temperature',
hAxis: {title: 'Time in Hours'},
vAxis: {title: 'Temperature in °C'},
Expand All @@ -205,26 +188,18 @@ function drawChart() {
};
// Draw
document.querySelector("#myChart").style.display = "block";
var chart = new google.visualization.AreaChart(document.getElementById('myChart'));
const chart = new google.visualization.AreaChart(document.getElementById('myChart'));
chart.draw(data, options);
}

function format(date) {
var hours = date.getHours();
var ampm = hours >= 12 ? 'pm' : 'am';
let hours = date.getHours();
let ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
var strTime = hours + ' ' + ampm;
return strTime;
return hours + ' ' + ampm;
}

window.onresize = (function(){
drawChart();
});









0 comments on commit 81d7ee6

Please sign in to comment.