async\/await<\/code> syntax for readability.<\/p>\nCreate a function called getWeatherData(city)<\/code> that takes a city name as a parameter. Inside the function, construct the API URL using your API key and the city parameter. For example:<\/p>\nconst apiKey = 'YOUR_API_KEY';\nconst url = `https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${city}&appid=${apiKey}&units=metric`;\n<\/code><\/pre>\nNotice the units=metric<\/code> parameter: this tells the API to return temperatures in Celsius and wind speed in meters per second. You can use imperial<\/code> for Fahrenheit. The response will be a JSON object containing properties like main.temp<\/code>, weather[0].description<\/code>, wind.speed<\/code>, and much more. To test this, call the function from the console with a city name like “London” and log the result. Use async\/await and wrap the call in a try\/catch block to handle network errors elegantly. Here’s a complete minimal example:<\/p>\nasync function getWeatherData(city) {\n try {\n const response = await fetch(url);\n if (!response.ok) throw new Error('City not found');\n const data = await response.json();\n console.log(data);\n return data;\n } catch (error) {\n console.error('Fetch failed:', error);\n }\n}\ngetWeatherData('London');\n<\/code><\/pre>\nWhen you run this (after replacing YOUR_API_KEY), you should see a JSON object in the browser console. Familiarize yourself with the structure: data.name<\/code> gives the city name, data.main.temp<\/code> gives current temperature, data.weather[0].icon<\/code> gives an icon code that you can use to display weather icons later. This step is crucial\u2014without a solid understanding of the API response, the rest of the app will be built on shaky ground.<\/p>\nStep 3: Designing the User Interface (HTML\/CSS)<\/h2>\n
Now that we can retrieve data, we need a beautiful interface to display it. The UI should include at least the following elements: a search bar with a button, a location area showing the city and country, the current temperature, a weather description, an icon representing the condition, humidity, wind speed, and a multi-day forecast. For mobile-friendliness, we will use a card-style layout that centers on the screen. Let’s build the HTML structure first. Inside the <body><\/code> of your index.html, add a container div with an id of app<\/code>. This wrapper will hold everything. Inside it, create a header with the app title and a search section. Then create a main section with ids for current weather and forecast. Here is the markup:<\/p>\n<div id=\"app\">\n <header>\n <h1>Weather Dashboard<\/h1>\n <div id=\"search-container\">\n <input type=\"text\" id=\"city-input\" placeholder=\"Enter city name\">\n <button id=\"search-btn\">Search<\/button>\n <button id=\"geo-btn\">\ud83d\udccd Use My Location<\/button>\n <\/div>\n <\/header>\n <main>\n <div id=\"current-weather\">\n <!-- will be populated by JavaScript -->\n <\/div>\n <div id=\"forecast\">\n <!-- 5-day forecast will go here -->\n <\/div>\n <\/main>\n<\/div><\/code><\/pre>\nWith the HTML in place, it’s time to style everything. Use CSS Flexbox and Grid to create a responsive layout that looks good on any screen. Set a background gradient to make the app visually engaging\u2014perhaps a light blue to white gradient for a sunny feel, or you can add dark mode later. The input field should be large enough to type comfortably, and the buttons should have hover effects. The current weather card can be a large container with a centered layout. For the forecast, consider using a horizontal scroll or a grid of small cards. Here is a snippet of essential CSS to get you started:<\/p>\n
* { margin: 0; padding: 0; box-sizing: border-box; }\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #74ebd5, #9face6);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n#app {\n max-width: 600px;\n width: 100%;\n background: rgba(255,255,255,0.85);\n border-radius: 20px;\n padding: 2rem;\n box-shadow: 0 10px 30px rgba(0,0,0,0.15);\n}\nheader { text-align: center; margin-bottom: 1.5rem; }\n#search-container { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }\n#city-input { flex: 1 1 200px; padding: 0.7rem; border: 1px solid #ccc; border-radius: 30px; }\nbutton { padding: 0.7rem 1.5rem; background: #4a90e2; color: white; border: none; border-radius: 30px; cursor: pointer; transition: background 0.3s; }\nbutton:hover { background: #357abd; }\n#current-weather { margin: 1.5rem 0; }\n#forecast { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; }\n<\/code><\/pre>\nThis CSS is just a starting point. Feel free to customize colors, fonts, and spacing to match your personal style. The most important thing is that the layout is clean and the data is easily scannable.<\/p>\n
Step 4: Implementing JavaScript Logic to Display Weather<\/h2>\n
With the UI ready, we need to wire up the JavaScript to actually display data. Open script.js<\/code> and start by declaring global variables that reference the DOM elements we will update: currentWeatherDiv<\/code>, forecastDiv<\/code>, cityInput<\/code>, searchBtn<\/code>, and geoBtn<\/code>. Also store your API key in a constant (though in a production app you should use environment variables). Now, write a function called displayCurrentWeather(data)<\/code> that takes the JSON object from the API and creates HTML string to inject into the current-weather<\/code> container. For example:<\/p>\nfunction displayCurrentWeather(data) {\n const { name, main, weather, wind } = data;\n const html = `\n <div class=\"weather-card\">\n <h2>${name}<\/h2>\n <div class=\"temp\">${Math.round(main.temp)}\u00b0C<\/div>\n <div class=\"desc\">${weather[0].description}<\/div>\n <img src=\"https:\/\/openweathermap.org\/img\/wn\/${weather[0].icon}@2x.png\" alt=\"${weather[0].description}\">\n <p>Humidity: ${main.humidity}%<\/p>\n <p>Wind: ${wind.speed} m\/s<\/p>\n <\/div>\n `;\n currentWeatherDiv.innerHTML = html;\n}\n<\/code><\/pre>\nSimilarly, create a displayForecast(data)<\/code> function that parses the forecast list. The forecast endpoint returns an array of 40 entries (3-hour intervals for 5 days). To show one forecast per day (e.g., at 12:00), you can filter the list to entries that have a time of 12:00:00. For each relevant entry, create a small card with the date, temperature, and icon. Use data.dt_txt<\/code> to extract the date and time. Loop through the array and build a string of HTML, then set the innerHTML of the forecast container. Finally, connect the search button and geolocation button to these functions. When the user clicks “Search”, read the value from the input, call getWeatherData(city)<\/code>, and then pass the result to both display functions. Add a loading indicator (a simple text or spinner) while the data is being fetched to improve user experience.<\/p>\nRemember to handle the case where the city is not found: show an error message inside the current weather div instead of breaking the app. Also, if the geolocation button is clicked, use the navigator.geolocation.getCurrentPosition()<\/code> API to get the user’s latitude and longitude, then call a different API endpoint that accepts coordinates (https:\/\/api.openweathermap.org\/data\/2.5\/weather?lat={lat}&lon={lon}&appid={key}&units=metric<\/code>). This step ties everything together and transforms the app from a static page to a dynamic tool.<\/p>\nStep 5: Adding Geolocation and Search Functionality<\/h2>\n
One of the most user-friendly features of a weather app is the ability to automatically detect the user’s location. To implement this, we will use the browser’s built-in Geolocation API. When the user clicks the “Use My Location” button, we call navigator.geolocation.getCurrentPosition(successCallback, errorCallback)<\/code>. The success callback receives a position object containing coords.latitude<\/code> and coords.longitude<\/code>. You then pass those values to a new function, getWeatherByCoords(lat, lon)<\/code>, which constructs the URL with the lat\/lon parameters instead of q=city<\/code>. The error callback should handle cases where the user denies permission or geolocation fails (e.g., in insecure contexts). In such cases, you can fall back to a default city or show a message asking the user to search manually.<\/p>\nHere is a code example for the geolocation button handler:<\/p>\n
geoBtn.addEventListener('click', () => {\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(\n async (position) => {\n const { latitude, longitude } = position.coords;\n const data = await getWeatherByCoords(latitude, longitude);\n if (data) {\n displayCurrentWeather(data);\n const forecastData = await getForecastByCoords(latitude, longitude);\n displayForecast(forecastData);\n }\n },\n (error) => {\n currentWeatherDiv.innerHTML = '<p>Location access denied. Please search for a city.<\/p>';\n }\n );\n } else {\n currentWeatherDiv.innerHTML = '<p>Geolocation not supported in your browser.<\/p>';\n }\n});\n<\/code><\/pre>\nSimilarly, the search button should trigger a function that reads the input, validates it (not empty), and calls getWeatherData(city)<\/code>. Also allow the user to press “Enter” in the input field to trigger the search. This can be done with an event listener for ‘keypress’ and checking if the key code is 13. By combining these two methods (search and geolocation), your app becomes versatile and appealing to a wide audience.<\/p>\nStep 6: Handling Errors and Edge Cases<\/h2>\n
No real-world application is complete without robust error handling. Users will inevitably type misspelled city names, network errors will occur, and API rate limits may be exceeded. Your weather app should never show a blank screen or an unhandled exception. Start by wrapping all API calls in try\/catch blocks. When the API returns a non-200 status (e.g., 404 for not found), the response.ok will be false, so you need to check that and throw a custom error. In the catch block, update the UI with a friendly message like “City not found. Please try again.” using a red text style. Similarly, if the user’s internet connection is lost, the fetch will reject with a TypeError. Catch that and display a “Network error. Check your connection.” message.<\/p>\n
Another edge case is when the input field is empty and the user clicks search. Prevent the function from making an API call and instead show a hint: “Please enter a city name.” You can also add a loading state: disable the search button and change its text to “Loading…” while the request is pending. After the request completes (success or fail), re-enable the button. For the forecast, if the data comes back with fewer than 5 days (which can happen in remote areas), adapt the display to show whatever is available rather than break. Finally, consider rate limiting: if the free API key exceeds 60 calls per minute, OpenWeatherMap will return a 429 status. In that case, show a “Too many requests. Please wait a moment.” message. All these small touches make your app professional and reliable.<\/p>\n
Step 7: Enhancing the App with Additional Features<\/h2>\n
Once your core weather app works, you can expand it with features that make it stand out. One popular addition is a 5-day forecast with visual icons for weather conditions. Already covered, but you can make it interactive\u2014maybe let the user click on a forecast day to see detailed hourly data. Another enhancement is to display weather alerts if available from the API (OpenWeatherMap’s One Call API offers this, but it’s not included in the free plan). You can also add a toggle to switch between Celsius and Fahrenheit. To implement this, store the current temperature unit in a variable and convert the values before displaying. Add a small button next to the temperature that toggles “\u00b0C” and “\u00b0F”.<\/p>\n
Additionally, consider improving the design with CSS animations. For example, you can add a subtle fade-in effect when new data is loaded, or a rotating animation for the search icon. If you want to go further, integrate a weather map (using Leaflet.js with a tile layer showing precipitation) or a dynamic background that changes based on the weather condition (e.g., blue for clear, gray for cloudy, with animated rain drops). However, be mindful of performance\u2014unnecessary animations can slow down the app on older devices. Another functional improvement is to store the last searched city in localStorage, so when the user returns to the app, it automatically loads the weather for that city without requiring a new search. This is simple to implement: after a successful search, save localStorage.setItem('lastCity', city)<\/code> and on page load, check if the key exists and fetch its data.<\/p>\nTips and Best Practices for Building a Weather App<\/h2>\nTip 1: Always Handle API Keys Securely<\/h3>\n
Never hard-code your API key directly in the client-side code if you plan to deploy the app publicly. Anyone can view your JavaScript source code and steal your key. For a production app, you should proxy requests through a backend server (using Node.js, PHP, or a serverless function) that stores the key in an environment variable. For a simple tutorial or personal project, hard-coding is acceptable as long as you understand the risk. Alternatively, you can restrict your API key’s usage in the OpenWeatherMap dashboard to specific domains (e.g., localhost for development) to prevent abuse.<\/p>\n
Tip 2: Optimize for Mobile First<\/h3>\n
Most users access weather apps on their phones. Design your layout with mobile screens in mind from the beginning. Use responsive units like percentages, viewport widths, and flex-wrap. Ensure that the forecast cards are scrollable horizontally (using overflow-x: auto<\/code>) rather than stacking vertically, which would take too much space. Test on actual devices or use browser dev tools to simulate various screen sizes. The font sizes should be large enough to read without zooming, and buttons should be easy to tap (at least 44×44 pixels).<\/p>\nTip 3: Use a Loading State for Better UX<\/h3>\n
Whenever a network request is in progress, show a visual indicator\u2014a spinner, a progress bar, or at least a text saying “Loading…”. This reassures the user that the app is working and prevents them from clicking the search button repeatedly. You can implement a loading state by setting a flag before the fetch and clearing it afterward. Disable the search button during loading to avoid multiple simultaneous requests. A simple CSS spinner can be created with a border animation, or you can use an inline SVG.<\/p>\n
Tip 4: Leverage the Weather API’s Icons for Free<\/h3>\n
OpenWeatherMap provides icons for weather conditions via a URL like https:\/\/openweathermap.org\/img\/wn\/{iconCode}@2x.png<\/code>. Use these icons in your app to give visual cues about the weather (sunny, cloudy, rainy, etc.). They are free to use and come in two sizes (regular and @2x for retina displays). Just map the weather[0].icon<\/code> string into the image src. This dramatically improves the visual appeal without any extra effort.<\/p>\nFrequently Asked Questions<\/h2>\nQ1: What is the best free weather API for beginners?<\/h3>\n
The OpenWeatherMap API is arguably the most beginner-friendly because of its extensive documentation, generous free tier (60 calls\/minute, 1M\/month), and simple RESTful endpoints. Alternatives like WeatherAPI and Visual Crossing also offer free tiers but may have different rate limits. For learning purposes, stick with OpenWeatherMap.<\/p>\n
Q2: Do I need a backend server to build a weather app?<\/h3>\n
No, you can build a fully functional weather app using only front-end technologies (HTML, CSS, JavaScript) by directly calling the API from the client. However, as mentioned in Tip 1, if you want to keep your API key secret in production, you will need a backend proxy. For development and learning, a purely front-end solution is perfectly fine.<\/p>\n
Q3: How do I handle CORS issues when fetching weather data?<\/h3>\n
Most weather APIs, including OpenWeatherMap, support CORS (Cross-Origin Resource Sharing) by default, meaning you can call them directly from a browser without any special configuration. If you encounter a CORS error, it is likely because you are using an incorrect API endpoint or your API key is invalid. Check the network tab in DevTools to see the exact error message.<\/p>\n
Q4: Why is my weather app showing wrong temperature or city?<\/h3>\n
Double-check that you are using the correct units parameter (units=metric<\/code> for Celsius, units=imperial<\/code> for Fahrenheit). Also ensure that you are parsing the correct property: main.temp<\/code> gives the temperature, while name<\/code> gives the city name. If the city is not found, the API may return a 404 with an error message, so always handle that case in your code.<\/p>\nQ5: How can I add a 7-day forecast instead of 5 days?<\/h3>\n
The free tier of OpenWeatherMap’s forecast endpoint only provides a 5-day \/ 3-hour forecast (40 data points). To get a 7-day forecast, you would need to upgrade to the One Call API (which includes daily forecasts) but that is not available on the free plan. Some other APIs like WeatherAPI offer a 7-day forecast on their free tier. Alternatively, you can approximate a 7-day forecast by using the 5-day data and extrapolating, which is not recommended for accuracy.<\/p>\n
Q6: Can I use the geolocation API without HTTPS?<\/h3>\n
Most modern browsers require a secure context (HTTPS or localhost) for the Geolocation API to work. If you are testing on localhost (as we are with Live Server), it should work. If you deploy on a free hosting platform like Netlify or GitHub Pages, they provide HTTPS by default. If you test on a plain HTTP server, geolocation will be blocked.<\/p>\n
Conclusion<\/h2>\n
Congratulations! You have built a fully functional weather app from scratch using HTML, CSS, and JavaScript. Throughout this tutorial, you learned how to set up a development environment, fetch and parse data from a third-party API, design a responsive user interface, implement search and geolocation features, handle errors gracefully, and even add optional enhancements like forecast and local storage. This project is not just a demonstration of technical skills\u2014it is a portfolio piece that proves you can integrate live data into a polished, user-friendly application. The concepts you mastered here\u2014asynchronous JavaScript, API integration, DOM manipulation, and responsive design\u2014are transferable to countless other projects, from news aggregators to e-commerce dashboards. As a next step, consider deploying your app using Netlify or GitHub Pages to share it with the world. You can also experiment with additional features: incorporate historical weather data, add charts using Chart.js, or implement push notifications for severe weather alerts. The possibilities are endless, but you now have a solid foundation to build upon. Happy coding!<\/p>\n
<\/body>
\n<\/html>
\n“`<\/p>\n","protected":false},"excerpt":{"rendered":"
“`html How to Build a Weather App from Scratch: A Comprehensive Step-by-Step Guide Building a weather app is one of the most rewarding projects for any aspiring web developer. Not only does it allow you to practice fundamental skills like HTML, CSS, and JavaScript, but it also introduces you to working with third-party APIs, asynchronous … <\/p>\n","protected":false},"author":2716,"featured_media":905,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-906","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-non-category"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/users\/2716"}],"replies":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/comments?post=906"}],"version-history":[{"count":1,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/906\/revisions"}],"predecessor-version":[{"id":907,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/906\/revisions\/907"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/media\/905"}],"wp:attachment":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/media?parent=906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/categories?post=906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/tags?post=906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Article](\"https:\/\/sumberlaba.com\/wp-content\/uploads\/2026\/07\/article-1782947790224.jpg\")
<\/p>\n