What kind of icon set + font does momentum dashboard use?

[mrchow19910319]

I am doing this momentum clone project.
I can retrieve all the data + icons from open weather API alright.
But on momentum page their fonts + icons are all customized.

If I choose to use custom icons, (like font awesome) how do I match it with open weather API’s icon set?

 

 

// get the user's location

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    alert("You are either disabled your location services or geolocation is not supported by this browser.");
  }
}

function showPosition(position) {
  
  //Get the latitude and longtitude from getLocation
  let lat = position.coords.latitude;
  let lon = position.coords.longitude;
  
  //Prepare API key + submit everything into the URL for api call
  const KEY = "f70ed550e82179ce0014bcc32bc867ec";
  let URL = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&appid=${KEY}`; 
  
  console.log(URL);
    
  //Call api get data using fetch
  fetch(URL)
    .then((resp) => resp.json())
    .then(
      function(data){
        console.log(data);

        let cityName = data.name; 
        outputCityName(cityName);

        let cityDesc = data.weather[0].description;
        // console.log(cityDesc);
        outputDescription(cityDesc);

        let mainIcon = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png"; 
        console.log(mainIcon);
        outputMainIcon(mainIcon);
      }
    )
    .catch(function(error) {
    console.log(error)
    });
}


//
// Functions that actually output those data
//
// right corner city name
function outputCityName(cityName){
  document.getElementById('city_name').innerHTML = `${cityName}`;
}
// right corner weather description
function outputDescription(cityDesc){
  document.getElementById('city_desc').innerHTML = `${cityDesc}`;
}
// right corner weather icon
function outputMainIcon(mainIcon){
  document.getElementById('main_icon').src = `${mainIcon}`; 
}

[BobVonBob]

If you want custom icons you will need to use the weather type to choose between your own files. Probably with either data.weather[0].description or with data.weather[0].main if you want a more general description.

 

Edit:

Actually, it might be easier to swap based on data.weather[0].id

Those are all listed here https://openweathermap.org/weather-conditions

[mrchow19910319]

1 minute ago, BobVonBob said:

If you want custom icons you will need to use the weather type to choose between your own files. Probably with either data.weather[0].description or with data.weather[0].main if you want a more general description.

how do I match all those icons with open weather API's icons?

I assume there must be hundreds of them..

[BobVonBob]

Just now, mrchow19910319 said:

how do I match all those icons with open weather API's icons?

I assume there must be hundreds of them..

edited my first post.

[mrchow19910319]

7 hours ago, BobVonBob said:

edited my first post.

ahhh I see. Thanks I think I can swap them out one by one!