I have a weather display with emojis adjusted by if/else statement, but there is a major delay evidently since the complexity is 27, how do I replace such method with a replacement that would reduce complexity?
Sort of new to front-end world, any help is much appreciated.
function drawWeather( d ) {
var celcius = Math.round(parseFloat(d.main.temp)-273.15);
var fahrenheit =
Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32);
var main_description = d.weather[0].main;
var description = d.weather[0].description;
var day_time = isDay()
document.getElementById('location').innerHTML = d.name;
if ( main_description === 'Clear' && day_time == true) {
document.getElementById('temp').innerHTML = fahrenheit +
'°' + ' ☀️';
} else if ( main_description === 'Clear' && day_time == false)
{
document.getElementById('temp').innerHTML = fahrenheit +
'°' + ' 🌔';
} else if( main_description === 'Clouds' ) {
document.getElementById('temp').innerHTML = fahrenheit +
'°' + ' ☁️';
} else if( main_description === 'Drizzle' ) {
document.getElementById('temp').innerHTML = fahrenheit +
'°' + ' 🌦️';
} else if( main_description === 'Rain' ) {
document.getElementById('temp').innerHTML = fahrenheit +
'°' + ' 🌧️';
} else if( main_description === 'Thunderstorm' ) {
document.getElementById('temp').innerHTML = fahrenheit +
'°' + ' ⛈️';
} else if( main_description === 'Snow' ) {
document.getElementById('temp').innerHTML = fahrenheit +
'°' + ' ❄️';
} else if( main_description === 'Fog' ) {
document.getElementById('temp').innerHTML = fahrenheit +
'°' + ' 🌫️';
} else if( main_description === 'Mist' ) {
document.getElementById('temp').innerHTML = fahrenheit +
'°' + ' 🌫️';
} else if( main_description === 'Haze' ) {
document.getElementById('temp').innerHTML = fahrenheit +
'°' + ' 🌫️';
} else if( main_description === 'Tornado' ) {
document.getElementById('temp').innerHTML = fahrenheit +
'°'
+ ' 🌫️';
} else if( main_description === 'Dust' ) {
document.getElementById('temp').innerHTML = fahrenheit +
'°'
+ ' 🌫️';
} else {
document.getElementById('temp').innerHTML = fahrenheit +
'°';
}
}
At least show your effort that you do work with the code but can't find a way to go
Post a formatted code to show your respect with the community
This is a topic of "DRY - Don't Repeat Yourself" in programming. You can search with that keyword and learn it.
The code below is what I can do but untested.
let data = [
{ weather: 'Clear', icon_day: '☀️', icon_night: '🌔' },
{ weather: 'Clouds', icon: '☁️' },
{ weather: 'Drizzle', icon: '🌦️' },
{ weather: 'Rain', icon: '🌧️' },
{ weather: 'Thunderstorm', icon: '⛈️' },
{ weather: 'Snow', icon: '❄️' },
{ weather: 'Fog', icon: '🌫️' },
{ weather: 'Mist', icon: '🌫️' },
{ weather: 'Haze', icon: '🌫️' },
{ weather: 'Tornado', icon: '🌫️' },
{ weather: 'Dust', icon: '🌫️' }
]
let icon = '';
data.forEach(element => {
if (main_description === 'Clear') {
icon = isDay() ? element.icon_day : element.icon_night
} else if (main_description === element.weather) {
icon = element.icon;
}
});
document.getElementById('temp').innerHTML = `${fahrenheit}° ${icon}`;