Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

150
Views
How can I save a search someone made on my online weather app with JavaScript?

I have finished building an online weather app, using HTML and JS. However, I want to add a save feature, so that users can save and access the names of the cities (and possibly other details) that they have searched for, previously. I have read something on localStorage, but I am not sure how to implement that.

HTML

<div class="card">
        <div class="search">
            <input type="text" name="searchbox" class="search-bar" placeholder="Search...">
            <button>🔍</button>
        </div>
        <div class="weather">
            <h2 class="city">Weather in Accra</h2>
            <div class="temp"><h1>21°C</h1></div>
            <div class="flex">
            <img src="" alt="" class="icon">
            <div class="description">Cloudy</div>
        </div>
            <div class="humidity">Humid: 53% </div>
            <div class="wind"> Wind Speed: 6.2 km/h</div>
        </div>
    </div>
</body>
</html>

JavaScript

let weather = {
"apiKey": "",
fetchWeather: function(city) {
    fetch("https://api.openweathermap.org/data/2.5/weather?q="+ city + "&units=metric&appid="+ this.apiKey).then((response) => response.json()).then((data)=> this.displayWeather(data));   
     },
     displayWeather: function(data){
        const  {name}= data;
        const {icon, description} = data.weather[0];
        const {temp, humidity} =data.main;
        const {speed} = data.wind;
        console.log(name,icon,description,temp,humidity,speed);
        document.querySelector(".city").innerText = "Weather in " + name;
        document.querySelector(".icon").src = " http://openweathermap.org/img/wn/"+ icon + ".png";
        document.querySelector(".description").innerText = description;
        document.querySelector(".temp").innerText = temp+ "°C" ;
        document.querySelector(".humidity").innerText = "Humidity " + humidity + "%";
        document.querySelector(".wind").innerText =  "Wind Speed" + speed + "km/h";
     },
     search:function(){
        this.fetchWeather(document.querySelector(".search-bar").value);
     }

}

document.querySelector(".search button").addEventListener("click", function() { weather.search();

})

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!