Real Time Weather App using HTML CSS JavaScript in Hindi | Weather API Project for Beginners | with source code

 हेलो  दोस्तों! 👋

आज हम एक बहुत ही interesting और beginner-friendly project बनाने वाले हैं – Real Time Weather App using HTML, CSS and JavaScript and open weather map api .

ये project specially beginners और mid-beginners के लिए है जो API Integration सीखना चाहते हैं। इस project में हम Weather API (OpenWeatherMap API) का इस्तेमाल करेंगे जिससे आप किसी भी शहर का real time temperature, humidity, wind speed, sunrise-sunset time और current date & time देख सकते है। 

इस project को build करके आप JavaScript API fetch, DOM manipulation, और real time projects पर काम करने का practical experience ले सकते हैं।

👉 पूरा article ध्यान से पढ़ें और end में दिए गए Source Code + Video Tutorial भी जरूर देखें।

📑 Table of Contents

1. Project Overview

2. Source Code

3. Video Explanation

4. FAQs

5. Related Posts

6. Conclusion

1. Project Overview

दोस्तों इस project में हम:

• HTML का use structure को डिज़ाइन करने के लिए किया है। 
• CSS का use styling और UI के लिए किया है। 
• JavaScript का use logic + API integration के लिए किया है। 

👉 Features of this Weather App:

• User कोई भी city name enter करता है और app उस city का real time weather show करता है।
• Temperature (°C), humidity (%), wind speed (km/h) और weather condition (sunny, cloudy, rainy) show होते हैं।
• Sunrise और Sunset का exact timing (converted into Indian Standard Time - IST) भी display होता है।
• साथ ही live current date और time भी show होता है जिससे ये app और ज्यादा realistic लगता है।

यह project आपके HTML CSS JavaScript Projects Portfolio में add करने के लिए perfect है और interview preparation के लिए भी helpful रहेगा।

2. Project Source Code

तो दोस्तों हमने इस project का source code provide किया है ताकि आप इसे आसानी से download करके run कर सको। यह सोर्स कोड ज़िप फाइल के रूप में डाउनलोड जिसे आपको अपने सिस्टम में अनज़िप या extract करना पड़ेगा तभी आपको प्रोजेक्ट की फाइल्स मिलेगी। नीचे दिए लिंक पर या इमेज पर क्लिक करके आप सोर्स कोड को डाउनलोड कर सकते है। 

📥 Download Source Code
Download Weather App Project

Note :- इस प्रोजेक्ट में हमने अपनी api के यूज़ की थी जोकि अब चेंज हो चुकी है आपको अपनी api के open weather map  api में account बनाना पड़ेगा। जिसके बाद आप profile सेक्शन में  my api key पर क्लिक करके अपनी api key ले सकते है और हमरी api key को अपनी api key से replace करना है। इसके बाद ही आपका प्रोजेक्ट वर्क करेगा। 

3. Project Explanation Video

तो दोस्तों अगर आपको project step by step देखना है तो मैंने इसका एक complete YouTube Video Tutorial भी बनाया  है। जिसमें हमने explain किया है की :

• कैसे HTML, CSS और JavaScript setup करना है,
• कैसे Weather API integrate करनी है,
• कैसे live time और date add करना है।

step-by-step हर एक line को explain करके समझाया है। 

👉 नीचे image पर click करके आप पूरा वीडियो देख सकते हैं:

4. FAQs

Q1: What is Weather App in JavaScript?
Weather App एक simple project है जो Weather API से data fetch करके real time weather information show करता है। इसमें HTML, CSS और JavaScript का use होता है।

Q2: Can I run this project in VS Code?
Yes ✅ आप इस project को Visual Studio Code (VS Code) या किसी भी simple text editor (Sublime, Atom, Notepad++) में run कर सकते हैं। बस आपको browser open करना है।

Q3: Which data structures/concepts are used?
इस project में mainly:

• Objects & JSON Parsing (API से data fetch करने के लिए),
• Functions (code को modular बनाने के लिए),
• Date & Time functions (real time clock और sunrise/sunset conversion के लिए) use किए गए हैं।

5. Related Posts

• Basic Quiz game project using HTML CSS JavaScript
• Basic Dictionary app using HTML CSS JavaScript
• Student management system project in HTML CSS JavaScript
• Login & Signup Page using HTML CSS JavaScript (Local Storage)

6. Conclusion

तो दोस्तों, इस ब्लॉग पोस्ट में हमने सीखा कि कैसे हम Real Time Weather App using HTML, CSS and JavaScript with API बना सकते हैं।
इसमें हमने:

• Weather API से data fetch करना,
• DOM manipulation करना,
• Current time & date add करना,
• और app को beginner-friendly UI देना सीखा।

तो दोस्तों आज के लिए बस इतना ही फिर मिलेंगे ऐसी ही किसी और पोस्ट में तब तक के लिए अलविदा !