Kevin Powell - Community•13mo ago

Weather App

I'm building a simple weather app project. Current, I'm using open-meteo.com's API for weather data. One of the parameters I'm using is weather interpretation codes. The variable documentation is attached (see picture) My question is, what's the best method at converting code into description? I know there's multiple ways, such as if/else if, case, sets, etc. (I'm assuming using Key / Value) What would you recommend? Thanks.

68 Replies

Matt•13mo ago

I'm personally thinking about using a Set.

Zoë•13mo ago

Something like

const descriptions = [
  {
        description:"Clear sky",
        codes:[0],
    },
    {
        description:"Mainly clear, partly cloudy, and overcast",
        codes:[1,2,3],
    },
    {
        description:"Fog and depositing rime fog",
        codes:[45,48],
    },
    // etc
]

const description_lookup = (() => {
    let temp = {};
    descriptions.forEach(({codes}, i) => codes.forEach(code => temp[code] = i));
    return temp;
})();

const get_description = (code) => {
    let index = description_lookup[code];
    if(!index) return;
    return descriptions[index]?.description;
};

get_description(2) //=> "Mainly clear, partly cloudy, and overcast" 
get_description(45) //=> "Fog and depositing rime fog"
get_description(4) //=> undefined

const descriptions = [
  {
        description:"Clear sky",
        codes:[0],
    },
    {
        description:"Mainly clear, partly cloudy, and overcast",
        codes:[1,2,3],
    },
    {
        description:"Fog and depositing rime fog",
        codes:[45,48],
    },
    // etc
]

const description_lookup = (() => {
    let temp = {};
    descriptions.forEach(({codes}, i) => codes.forEach(code => temp[code] = i));
    return temp;
})();

const get_description = (code) => {
    let index = description_lookup[code];
    if(!index) return;
    return descriptions[index]?.description;
};

get_description(2) //=> "Mainly clear, partly cloudy, and overcast" 
get_description(45) //=> "Fog and depositing rime fog"
get_description(4) //=> undefined

Matt•13mo ago

Ah okay cool Thank you I appreciate iut

Zoë•13mo ago

Although just an array would be the easiest and the extra space is not really important

Matt•13mo ago

Definitely was not typing out 100 indexes

Zoë•13mo ago

You can generate the code for the array

Matt•13mo ago

How so?

Zoë•13mo ago

const descriptions = [
 //Same as above
]
let arr = []
descriptions.forEach(({description,codes}) => codes.forEach(code => arr[code] = description));
console.log(`[${arr.map(v => typeof v == "string" ? `"${v}"` : v).join(', ')}]`);

const descriptions = [
 //Same as above
]
let arr = []
descriptions.forEach(({description,codes}) => codes.forEach(code => arr[code] = description));
console.log(`[${arr.map(v => typeof v == "string" ? `"${v}"` : v).join(', ')}]`);

You then get

["Clear sky", "Mainly clear, partly cloudy, and overcast", "Mainly clear, partly cloudy, and overcast", "Mainly clear, partly cloudy, and overcast", , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , "Fog and depositing rime fog", , , "Fog and depositing rime fog"]

Zoë•13mo ago

Matt•13mo ago

The one problem is 1, 2, 3 Mainly clear, partly cloudy, and overcast I believe 1: Mainly clear 2: partly cloudy 3: overcast Not 1: Mainly clear, partly cloudy, and overcast 2: Mainly clear, partly cloudy, and overcast 3: Mainly clear, partly cloudy, and overcast Maybe ill just do this object and type them manually

MarkBoots•13mo ago

in that case, a key/value object seems the best

Zoë•13mo ago

Oh I see. I should have got that from "mainly clear" being nothing like "overcast" 🤭

Matt•13mo ago

using something like a Set?

Zoë•13mo ago

Yeah just slap it in an object

MarkBoots•13mo ago

wmoCodes={
  0: {description: "Clear Sky", iconId: 0},
  1: {description: "Mainly clear", iconId: 1},
  2: {description: "Partly cloudy", iconId: 1},
etc...
}
wmoIcons={
  0: "icon.png",
  1: "someothericon.png",
etc...
}

wmoCodes={
  0: {description: "Clear Sky", iconId: 0},
  1: {description: "Mainly clear", iconId: 1},
  2: {description: "Partly cloudy", iconId: 1},
etc...
}
wmoIcons={
  0: "icon.png",
  1: "someothericon.png",
etc...
}

Zoë•13mo ago

Yeah but you will probably also want to contain information such as icons and if you're changing theming

Matt•13mo ago

I was actually going to try and implement that as well (icons)

Zoë•13mo ago

I'd pack all of that information into a single object

Matt•13mo ago

const weatherCodes = [
    {
        codes:[0],
        description:"Clear sky",
        iconUrl: link
    }
]

const weatherCodes = [
    {
        codes:[0],
        description:"Clear sky",
        iconUrl: link
    }
]

something like this?

Zoë•13mo ago

const weather_codes = {
  0:{
    description:"Clear sky",
    icon:"fa-solid fa-idk", //Or however you'll do icons
  },
  1:{
    description:"Mainly clear",
    icon:"fa-solid fa-idk",
  },
  2:{
    description:"Partly cloudy",
    icon:"fa-solid fa-idk",
  },
  3:{
    description:"Overcast",
    icon:"fa-solid fa-idk",
  },
  //45:{ etc..
}

const weather_codes = {
  0:{
    description:"Clear sky",
    icon:"fa-solid fa-idk", //Or however you'll do icons
  },
  1:{
    description:"Mainly clear",
    icon:"fa-solid fa-idk",
  },
  2:{
    description:"Partly cloudy",
    icon:"fa-solid fa-idk",
  },
  3:{
    description:"Overcast",
    icon:"fa-solid fa-idk",
  },
  //45:{ etc..
}

Matt•13mo ago

ahh right, otherwise with what I wrote, looping through would be 🤯 awesome thank you guys

Zoë•13mo ago

Yeah with yours I'd make another object that holds a lookup, like my first code

Matt•13mo ago

these key/value pairs make most sense tbh. I overlooked and didnt think to assign object as the value

Zoë•13mo ago

Yeah As every item is different my first code can be ignored

Matt•13mo ago

Perfect thanks again 👍 ill post my codepen solution soon if you're interested in checking this out

Zoë•13mo ago

Ping me when you do 👌

ἔρως•13mo ago

why not a map, instead of that object? i know it is a bit more cumbersome to use, but has plenty of convenient methods, like .has() to check that the key exists

Matt•13mo ago

This might be messy

Matt•13mo ago

https://codepen.io/Matt-CopOffMatt/details/eYbjJJJ

Matt (CopOffMatt)

CodePen

Simple Weather App

...

Matt•13mo ago

One thing is that it might only work with USA addresses When I convert LAT/LONG into data for weather api, I use COUNTY/STATE/COUNTRY, for any address that doesnt have this, it should fail Mind giving me some thoughts on how to improve? Thank you 👍 @ἔρως@z- ::theProblemSolver::

Zoë•13mo ago

The key should always exist I'm about to eat dinner and can't look too in-depth right now but it looks good

Matt•13mo ago

Thanks appreciate you willing to check for me 👍 pretty happy to be able to do majority of this without asking too many questions Only had to ask question here regarding weather codes and how to get LAT/LONG from user without their input

ἔρως•13mo ago

should, unless the api changes

Matt•13mo ago

Would you be able to possibly give me feedback? I would really appreciate it. Looking to improve 👍 @ἔρως

ἔρως•13mo ago

you're relying too much in gps coordinates you usually can't easily copy/see them in google maps on the phone, for example this forces the visitor to do your job https://open-meteo.com/en/docs/geocoding-api <-- you can pass this the name of a city, and return results then you can allow people to select a city also, you're setting styles in js - that's what css is for just set a class on it, that changes the styles

ἔρως•13mo ago

also got this...

ἔρως•13mo ago

https://emojiterra.com/high-voltage/ <-- by the way, you can use this for signaling "thundering"

EmojiTerra

⚡ High Voltage Emoji, Zap Emoji, Lightning Bolt Emoji

ἔρως•13mo ago

these right here:

    95:{
        description:"Thunderstorm: Slight or moderate",
        icon:"🌧️"
    },
    96:{
        description:"Thunderstorm with heavy hail",
        icon:"🌧️❄️"
    }

    95:{
        description:"Thunderstorm: Slight or moderate",
        icon:"🌧️"
    },
    96:{
        description:"Thunderstorm with heavy hail",
        icon:"🌧️❄️"
    }

could have 🌧️⚡ or 🌧️❄️⚡ and for the emojis, make sure you use an emoji font

Matt•13mo ago

I that error is because I didn’t add the logic for non-usa The emojis and stuff were just basic, didn’t go too in-depth. This is just another practice project to learn more about working with JS From a JS POV is there anything that should be written differently besides relying on cords?

ἔρως•13mo ago

and besides removing the css stuff?

Matt•13mo ago

Should the large array be moved to an external file and I retrieve the data to main?

ἔρως•13mo ago

no, it's fine there

Matt•13mo ago

Okay cool I’ll work on fixing some of those things thanks for your input

ἔρως•13mo ago

document.querySelector(".options").classList.add("hide") <-- this is not bad, but you should store the result of document.querySelector(".options") in a variable

Matt•13mo ago

There are a few instances where I removed the variables My thought process was that if it’s not used more than once to not store as variable

ἔρως•13mo ago

and i would store it all outside the function then, make the function fetch the data only your function does waaaaaaaaaaaaaay too much

Matt•13mo ago

And the manipulate data outside with the result of the fetch?

ἔρως•13mo ago

outside the function, you present the result

Matt•13mo ago

Okay

ἔρως•13mo ago

if you have a function called getWeather, why are you displaying stuff from it? it's supposed to ... get weather

Matt•13mo ago

True Good point tbh

ἔρως•13mo ago

that's all it does: nothing else, nothing more

Matt•13mo ago

Just out of curiosity, are there any notable differences between fetch.then and using async functions?

ἔρως•13mo ago

also, you don't have a good way to handle errors

Matt•13mo ago

In terms of try/catch?

ἔρως•13mo ago

the difference is that you can just do await fetch in terms of the api returning something unexpected or an error

Matt•13mo ago

Yeah but they do the same thing. Is there a performance difference or something, or just preference? Wouldn’t it fail the try and log the error though catch

ἔρως•13mo ago

it's more of a "can i do it?" thing

Matt•13mo ago

Similar to

ἔρως•13mo ago

maybe, maybe not if you had proper error handling, you could handle unexpected data

Matt•13mo ago

What would you suggest?

ἔρως•13mo ago

well, the function could return 2 types of data

Matt•13mo ago

Adding if/then and logging any fails?

ἔρως•13mo ago

a successful one, and an error one if it is successful, display the data normally an error one, you can have a description on it, and display it, like how you're doing now

Matt•13mo ago

Should I add another parameter to the function? Or do like if / throw error within the function

ἔρως•13mo ago

no, just return

document.querySelector(".submit").addEventListener("click", () => {
    getWeather(document.querySelector(".lat").value, document.querySelector(".long").value)
})

document.querySelector(".submit").addEventListener("click", () => {
    getWeather(document.querySelector(".lat").value, document.querySelector(".long").value)
})

why? just use a form, with a submit handler

Matt•13mo ago

Ahh that’s what I was looking for I was trying to figure out how to be able to also press enter for submission Really appreciate the feedback you give me across most of my posts btw, I’ve been learning a lot

ἔρως•13mo ago

you're welcome

Gaming

Programming

Weather App