🚀 My Weather App using HTML, CSS, and JavaScript (with Axios & WeatherAPI)

🚀 My Weather App using HTML, CSS, and JavaScript (with Axios & WeatherAPI)

🚀 My Weather App using HTML, CSS, and JavaScript (with Axios & WeatherAPI)

I recently built a small weather app as part of my learning journey in frontend development. 🌤️

The app allows users to enter a city name and instantly fetches real-time weather data using Axios and the WeatherAPI. I also added a default image that shows before the search, and once the user gets the weather result, it dynamically updates with the temperature, condition, humidity, wind speed — and even a relevant weather icon based on the condition! ⛅☀️🌧️

What I learned:

  • How to make API requests using Axios
  • Dynamically updating the DOM based on responses
  • Writing cleaner HTML/CSS layouts
  • Adding a little bit of UX by showing a default image before search

Here’s a small preview of the tech stack I used:

🔹 HTML & CSS

🔹 JavaScript

🔹 Axios (for API calls)

🔹 WeatherAPI

(for real-time weather data)

This was a great practice project for me to understand API integration in frontend apps. If you're just starting out, I definitely recommend trying something similar — it's a fun way to get hands-on with live data.

Would love to hear your feedback or suggestions on what I could add next! 😊

#FrontendDevelopment #WebDevelopment #WeatherApp #JavaScript #LearningByDoing #APIIntegration #100DaysOfCode #LinkedInCoding


🔗 Try it here: [My live app link]

💻 Source code: [My GitHub repo link]

To view or add a comment, sign in

More articles by Muhammad Abubakar_Dev

Insights from the community

Others also viewed

Explore topics