How to work weather without asking location

Viewed 133

i have created weather app, which asks location at all reload " allow or block", when i click block, the weather doesnot work after every reload. the problem is that, i want to change code, i want to work weather without asking allow or block, i want to show it immediately, please help me. thanks.

there is my code





  const iconElement = document.querySelector(".weather-icon");
  const tempElement = document.querySelector(".temperature-value p");
  const descElement = document.querySelector(".temperature-description p");
  const locationElement = document.querySelector(".location p");
  const notificationElement = document.querySelector(".notification");

  // App data
  const weather = {};

  weather.temperature = {
      unit : "celsius"
  }

  // APP CONSTS AND VARS
  const KELVIN = 273;
  // API KEY
  const key = "82005d27a116c2880c8f0fcb866998a0";

  // CHECK IF BROWSER SUPPORTS GEOLOCATION
  if('geolocation' in navigator){
      navigator.geolocation.getCurrentPosition(setPosition, showError);
  }else{
      notificationElement.style.display = "block";
      notificationElement.innerHTML = "<p>Browser doesn't Support Geolocation</p>";
  }

  // SET USER'S POSITION
  function setPosition(position){
      let latitude = position.coords.latitude;
      let longitude = position.coords.longitude;

      getWeather(latitude, longitude);
  }

  // SHOW ERROR WHEN THERE IS AN ISSUE WITH GEOLOCATION SERVICE
  function showError(error){
      notificationElement.style.display = "block";
      notificationElement.innerHTML = `<p> ${error.message} </p>`;
  }

  // GET WEATHER FROM API PROVIDER
  function getWeather(latitude, longitude){
      let api = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;

      fetch(api)
          .then(function(response){
              let data = response.json();
              return data;
          })
          .then(function(data){
              weather.temperature.value = Math.floor(data.main.temp - KELVIN);
              weather.description = data.weather[0].description;
              weather.iconId = data.weather[0].icon;
              weather.city = data.name;
              weather.country = data.sys.country;
          })
          .then(function(){
              displayWeather();
          });
  }

  // DISPLAY WEATHER TO UI
  function displayWeather(){
      iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
      tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
      descElement.innerHTML = weather.description;
      locationElement.innerHTML = `${weather.city}, ${weather.country}`;
  }

  // C to F conversion
  function celsiusToFahrenheit(temperature){
      return (temperature * 9/5) + 32;
  }

  // WHEN THE USER CLICKS ON THE TEMPERATURE ELEMENET
  tempElement.addEventListener("click", function(){
      if(weather.temperature.value === undefined) return;

      if(weather.temperature.unit == "celsius"){
          let fahrenheit = celsiusToFahrenheit(weather.temperature.value);
          fahrenheit = Math.floor(fahrenheit);

          tempElement.innerHTML = `${fahrenheit}°<span>F</span>`;
          weather.temperature.unit = "fahrenheit";
      }else{
          tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
          weather.temperature.unit = "celsius"
      }
  });




html



    <div class="container">
            <div class="app-title">
                <p>Weather</p>
            </div>
            <div class="notification"> </div>
            <div class="weather-container">
                <div class="weather-icon">
                    <img src="icons/unknown.png" alt="">
                </div>
                <div class="temperature-value">
                    <p>- °<span>C</span></p>
                </div>
                <div class="temperature-description">
                    <p> - </p>
                </div>
                <div class="location">
                    <p>-</p>
                </div>
            </div>
        </div>



2 Answers

Due to security reasons there is no way around the browser asking the user if he wants to disclose his location if you try doing it with javascript.

You might however want to look into geolocation via IP, which is not as exact (and if the user uses a VPN doesnt work at all), but maybe a way to go for you.

This should you get you started: https://whatismyipaddress.com/geolocation

You can also make a get request to http://ip-api.com/json and use the data from it.

Related