Showing a simple loading animation before fetching data-CodePudding

These are the codes i used to receive data from API but there is a feature i want to add but i don't know how.

I want to add a loading animation before fetching data from API

Do anybody knows how can i make it?

I have tried a of ways to make it but none of them worked properly.

//variables from html
var city = document.querySelector('#city')
var myCity = document.querySelector('#myCity')
var temp = document.querySelector('#temp')
var desc = document.querySelector('#desc')
var box = document.querySelector('.tempBox')


console.log(city)
var myVar;

//this is the api key
var myId = '006eee17b0b83d4de4dfca972d666b87'

function getCityTemp(){
  var a = city.value
  getData(a)

}

 //function to get the name of the city and the weather
function getData(newCity){
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${newCity}&appid=${myId}`)
   .then(function(res){
       return res.json() 
})  

  //the function used to receive specific data
   .then(function(data){
      myCity.textContent = data.name
      temp.textContent = data.main.temp
      weather.textContent = data.weather[0].description
      wind.textContent = data.wind.speed
      sunrise.textContent = data.sys.sunrise
      box.style.display = 'block'
})
    .catch(function(err){
        console.log(err)
    })}

.container{
    border: none;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 5px;
    margin: 3rem 10rem;
}

.cityName{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    background-color: aqua;
    padding: 7px;
    border-radius: 20px;
    margin-left: 38rem;
    margin-right: 38rem;
}

.input1{
    border: none;
    border-radius: 5px;
    padding: 7px;
   margin-top: 1em; 
   margin-left: 25rem;
   margin-right: 25rem;
    margin-bottom: 1rem;
}
.button1{
    margin-bottom: 10px;
    margin-right: 27rem;
    margin-left: 27rem;
    color: azure;
    background-color: indigo;
    border: none;
    padding: 10px;
    border-radius: 5px;
    transition: 0.5s;
}
.button1:hover{
    color: aqua;
    background-color: black;
    transition: 0.5s;
}

.tempBox{
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    background-color : greenyellow;
    margin-top: 5em;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-left: 30rem;
    margin-right: 30rem;
    display: none;
}
body{
    background-color: #7267CB;
}

img{
    border-radius: 40px;
    margin-left: 46%;
    width: 100px;
}
p {
    margin-left: 7em;
}

.CityName {
    margin-left: -10px;
    border-radius: 20px;
    padding: 5px;
    color: black;
    background-color: #E2C2B9;
}
#myCity {
    margin-left: 20px;
    border-radius: 20px;
    padding: 5px;
    background-color: #DD4A48;
}

.Temp{
    margin-left: -10px;
    border-radius: 20px;
    padding: 5px;
    color: black;
    background-color: #E2C2B9;
}
#temp{
    margin-left: 20px;
    border-radius: 20px;
    padding: 5px;
    background-color: #DD4A48;
}
.Weather1{
    margin-left: -10px;
    border-radius: 20px;
    padding: 5px;
    color: black;
    background-color: #E2C2B9;
}

#weather {
    margin-left: 20px;
    border-radius: 20px;
    padding: 5px;
    background-color: #DD4A48;
}
.Wind {
    margin-left: -10px;
    border-radius: 20px;
    padding: 5px;
    color: black;
    background-color: #E2C2B9;
}
#wind {
    margin-left: 20px;
    border-radius: 20px;
    padding: 5px;
    background-color: #DD4A48;
}
.Sunrise {
    margin-left: -10px;
    border-radius: 20px;
    padding: 5px;
    color: black;
    background-color: #E2C2B9;
}
#sunrise {
    margin-left: 20px;
    border-radius: 20px;
    padding: 5px;
    background-color: #DD4A48;
}

html {
    height: 100%;
  }
  
  body {
    background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%);
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>

    <link rel="stylesheet" href="weather.css">
</head>
<body>
    <img src="https://www.vmcdn.ca/f/files/via/images/weather/rain-umbrella-vancouver-weather.jpg;w=960" alt="weatherImage">
    <label  for="city">City Name:</label>
    <div >
        <input  type="text" id="city"/>
        <button  type="button" onclick="getCityTemp()">Result</button>
        <div id="loading"></div>
    </div>

    <div >
        <p><span >City Name : </span><span id="myCity"></span></p>
        <p><span >Temp : </span><span id="temp"></span></p>
        <p><span >Weather : </span><span id="weather"></span></p>
        <p><span >Wind : </span><span id="wind"></span></p>
        <p><span >Sunrise : </span><span id="sunrise"></span></p>
    </div>
    <script src="weather.js"></script>
</body>
</html>

And also : this is the output

CodePudding user response：

create a function displayLoading and hideLoading for show and hide loader and set timeout on it, and then call displayLoading when api is called and call hideLoading after getting response

    var city = document.querySelector('#city')
    var myCity = document.querySelector('#myCity')
    var temp = document.querySelector('#temp')
    var desc = document.querySelector('#desc')
    var box = document.querySelector('.tempBox')
    
    
    console.log(city)
    var myVar;
    
    //this is the api key
    var myId = '006eee17b0b83d4de4dfca972d666b87'
    
    function getCityTemp(){
      var a = city.value
      getData(a)
    
    }
     const loader = document.querySelector("#loading");
        
     // showing loading
        function displayLoading() {
            loader.classList.add("display");
            // to stop loading after some time
            setTimeout(() => {
                loader.classList.remove("display");
            }, 3000);
        }

    // hide loading
        function hideLoading() {
             loader.classList.remove("display");
        }  
          

    //call here
          function getData(newCity){
            displayLoading()
            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${newCity}&appid=${myId}`)
               .then(res => res.json())
            }
               .then(json => {
                    hideLoading()
                }
           ) 



    /* creating css loader */
    
    #loading {
        width: 2rem;
        height: 2rem;
        border: 5px solid #f3f3f3;
        border-top: 6px solid #9c41f2;
        border-radius: 100%;
        margin: auto;
        visibility: hidden;
        animation: spin 1s infinite linear;
    }
    #loading.display {
        visibility: visible;
    }
    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

CodePudding user response：

Keep the loader visible in the starting and hide it when the loading is done.

//variables from html
var city = document.querySelector('#city')
var myCity = document.querySelector('#myCity')
var temp = document.querySelector('#temp')
var desc = document.querySelector('#desc')
var box = document.querySelector('.tempBox')

console.log(city)
var myVar;

//this is the api key
var myId = '006eee17b0b83d4de4dfca972d666b87'

function getCityTemp(){
  var a = city.value
  getData(a)

}

 //function to get the name of the city and the weather
function getData(newCity){
document.querySelector('#loading').style.display = 'block'
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${newCity}&appid=${myId}`)
   .then(function(res){
       document.querySelector('#loading').style.display = 'none'
       return res.json() 
})  

  //the function used to receive specific data
   .then(function(data){
      myCity.textContent = data.name
      temp.textContent = data.main.temp
      weather.textContent = data.weather[0].description
      wind.textContent = data.wind.speed
      sunrise.textContent = data.sys.sunrise
      box.style.display = 'block'
})
    .catch(function(err){
        console.log(err)
    })}

A minor fix. And also hide the loader in the very start.