Build A Weather App in HTML CSS & JavaScript | Weather App in JavaScript

[@CodingNepal]

Watch this video for additional and improved features on this Weather app: kzbin.info/www/bejne/a5aTamOXi7p-qNE

[@Anonymous-jx4zp]

We Want Voice Over!

[@sadamali6691]

bro i want to search a weather app tutorial when i oppened the youtube this was the first video i see and i am very happy about this you are a lengend thank you from somalia

[@sadamali6691]

@@COFFY_GAMING difenetly

[@CodingNepal]

Happy to hear that bro

[@CodingNepal]

We're 7k away from 100k. Please, do subscribe and make it 100k soon.

[@createitnow304]

U are just awesome Mr coding Nepal I want to know your real name by the way I sub u

[@CodingNepal]

@create it now My real name is Prakash

[@hackeditz2.0]

@@CodingNepal not 8k away it's 7.4k away from 100k you maths is not good😂😂😂😂 (I am joking about your maths is not good if you hurt 🤕 it so I am sorry😭❤️)

[@aadityasharma530]

I had subscribed you 5 months ago and still subscribed :)

[@hackeditz2.0]

@@aadityasharma530 you subscribed me or coding nepal sir

[@jeenitprajapati3449]

You just went above my expectations!! Super Duper Awesome!

[@CodingNepal]

Wow, thanks!

[@32_harshitajagtap87]

You are the intelligent man when I make something first I watch your video

[@codingphil4007]

Another amazing things done😍.. thank you so much .. all of your works motivates me to study more and more .. I want to become like you some day ☺️

[@CodingNepal]

You're most welcome 😃

[@matheussjusttino]

That's awesome man! I've watched this video firstly and after I've build a Weather App. Thanks for knowledge and for the terrific quality!

[@CodingNepal]

Glad I could help!

[@yubiroaster6285]

Awesome ❤️🔥...... Love from NEPAL 🇳🇵✌️

[@CodingNepal]

Thank you so much

[@eminz.8554]

this was perfect! Please keep going to make more js projects!

[@CodingNepal]

Thank you! Will do!

[@mhk6516]

Coding Nepal Always Awesome 👌

[@CodingNepal]

Thank you :)

[@rodellibed9100]

Thank you for filling us more knowledge more tutorial. You have a contribution in my career thank you for your tutorials. I've learned a lot God bless

[@CodingNepal]

I really appreciate that!

[@abrarfahim64]

Thanks from 😍 BANGLADESH 🇧🇩

[@minaezz5092]

You deserve the like ❤️❤️ thank you

[@practicalcoding8010]

I play ur videos not only to learn scripts but also for listening to non stop refreshing music 😆

[@CodingNepal]

😃😃

[@sarthakrana5534]

Bro you earned a subscriber, well done 🙂

[@CodingNepal]

Thanks for subbing

[@COFFY_GAMING]

Sir this project is really awesome

[@CodingNepal]

Glad you like it

[@TechNand]

Sir Really Awesome 👌😍

[@CodingNepal]

Thanks a lot 😊

[@humaamwebdev6050]

how you upto date yourself in coding amazing😍😍😍😍😍😍😍😍😍😍😍😍😍

[@programmingwithkartik4319]

that's gazab !!!!!!!!!!!!!!!! OMG wonderful man !!!!!!!!!!!!!!!!!!!!!!!!!!

[@CodingNepal]

Thanks man 🔥

[@CreativeTutorialsWeb]

Superb project Sir

[@CodingNepal]

Thanks a lot

[@CodingFire]

Professional buddy! 😊

[@CodingNepal]

Thanks 😁

[@humaamwebdev6050]

weather app amazing😍😍😍😍😍😍😍😍😍😍

[@webmodule45]

Amazing one bro......!👍🤘

[@CodingNepal]

Thank you so much 😀

[@CodingPorium]

Awesomee sir🔥🔥

[@CodingNepal]

Thank you so much 😀

[@juniordiedhiou9935]

That's wonderful😍

[@CodingNepal]

Thank you! 😊

[@elieli2570]

Thank you for one more wonderful and very helpful tutorial!

[@CodingNepal]

Glad it was helpful!

[@hackeditz2.0]

Thanks bro love it 🤩🤩🤩😎

[@CodingNepal]

You're welcome bro

[@hackeditz2.0]

@@CodingNepal thanks

[@gauravindora6306]

Great work man

[@CodingNepal]

Appreciate it!

[@Lerndemy]

react ko ni estai video haru chaiyo daju :) great work

[@Anonymous-jx4zp]

सहि कुरा गर्नुभो मलाई पनि चाहिएको छ

[@CodingNepal]

Okay, I'll think about it

[@Lerndemy]

@@CodingNepal tapaiko ui skill nai esto kada xa react ma bhaesi Ta sone pe suhaga

[@dinithofficial]

Thank you so much

[@AshishKumar-wh6dw]

Amazing 👏

[@stilllegend9297]

I love ur videos

[@CodingNepal]

Keep loving

[@RitikKumar-ks3to]

Great work legend😍😍🙌 Man i have one request... Please tell me or make video on how to hide API keys on javaScript... Please its an request🥺🙏

[@CodingNepal]

You can't hide your api key in javascript but you can obfuscate it so the visitors can't find your actual key easily.

[@RitikKumar-ks3to]

@@CodingNepal ok thank u🙌😊 U really make awsome video😍

[@BieAnimation]

Thanks so much !!

[@CodingNepal]

You're welcome

[@shoumikkumbhakar6375]

this is awesome :)

[@CodingNepal]

Glad you like it

[@marcos4lex]

Awesome app man! Congrats! I have a question, how could I change the language of the weather results?

[@novice.coder4]

Great 👍

[@Anonymous-jx4zp]

Very Nice

[@CodingNepal]

Thank you so much!

[@Anonymous-jx4zp]

@@CodingNepal Dai Please Voice Over In Upcoming Videos

[@maskman4821]

Amazing 🤩

[@RajKumar-sh8cn]

great work bro👍

[@CodingNepal]

Thank you so much 😀

[@ushakiranmelasthri2933]

Awesome

[@CodingNepal]

Thank you so much

[@anthonyavellanedapaitan7081]

CodingNepal, what a wonderful project 🙌🏻, one question, in the live demo when I do the test I get the name of the city and the full country, however when I download the source code and insert my api key when testing it, the name of the country comes out abbreviated, for example for Nepal I get NP, how did you manage to get the full name as in the live demo?

[@picvs_]

Maaaaanm sheeesh that's cool stuff! I appreciate it

[@CodingNepal]

Thank you so much

[@Rawbee]

Daaju kadaa 😊

[@CodingNepal]

Thanks a lot 😊

[@khumkarki4410]

Make chat app using html ,CSS, js.chat app like messanger ani bolnu na bolara video Banaunu Nepali ma we will always support you give us better contain.it is very difficult to beginningers in Nepal.

[@vilictus5764]

Hello, good video! Could you make a hit counter? Please thanks.

[@CodingNepal]

Can you explain more?

[@COFFY_GAMING]

Can you please tell me which screen recorder you used in your videos

[@CodingNepal]

I use Filmora default recorder which comes with Filmora video editor.

[@COFFY_GAMING]

@@CodingNepal ok sir

[@dilmethtlgroup2815]

thanks lot

[@n1kolayyy]

what "bx bxs"? Where do you get these icons?

[@melinavanesamoreyra9185]

I have a problem since u put the apiKey, u didn't the token number? 24:04

[@melinavanesamoreyra9185]

23:05*

[@codingspectrum5992]

Bro i have a tip for you can try firebase auth i hope this became hit i think it will help your audience

[@daidandy]

best

[@CodingNepal]

Thank you so much

[@Code_AB]

Where is the icons in description ??

[@compeng..1510]

Is this project good for final year? Or else I should go with some full stack projects?

[@qadirentro171]

Bro seriously? A weather app for a final year project!?

[@shalinigupta2462]

whenever trying to use colon symbol, the css is not working properly, what can be the issue regarding this? .input-part input:is(:focus, :valid)

[@CodingNepal]

Make sure you've added required attribute in input field.

[@shalinigupta2462]

@@CodingNepal thanks, it worked

[@notzeus7069]

Hey sir. I have question. I downloaded the file from the demo link and opened the file. And started live server in visual studio. And its nor working. I mean the problem is api can u help me please?

[@CodingNepal]

Please, read the blog before downloading the source files. In the blog, I have explained from where you get API key and where to put it.

[@SandraAnimon]

Sir,your demo app is working absolutely fine but when I implement the same ,it isn't showing any weather details..May I know what's my mistake please

[@CodingNepal]

You've to paste you API key in the JavaScript file. Please, read the blog before downloading the source files.

[@tahzib1451]

how to use 5 day forecast or one call API with search options?

[@shaderone07]

Hi a doubt ...Will we get accurate locations?

[@CodingNepal]

It's depends on your device. Location is most accurate for devices with GPS, like smartphones.

[@Tom-qw5dp]

Can you make an ad system in PHP? And if not great the video =)

[@CodingNepal]

Okay, I'll think about it.

[@rohanmane7423]

can someone help me.... Uncaught ReferenceError: apikey is not defined

[@NONAME-lg3tg]

How to add delay for showing result? , like thinking "getting weather details ..."

[@CodingNepal]

Put these lines of code inside setTimeout function. Like this: setTimeout(() => { infoTxt.classList.remove("pending", "error"); infoTxt.innerText = ""; inputField.value = ""; wrapper.classList.add("active"); }, 1000); // 1000 miliseconds = 1 second These lines are start from line.66 in script.js file according to the video.

[@NONAME-lg3tg]

@@CodingNepal thank you man! I'll try this inshallah

[@Mercy-ws2me]

How did you hide api key? Can you do a quick tutorial on it or just give a reference where I can learn this?

[@CodingNepal]

I didn't hide the api key. I have just obfuscated the key and using vanilla javascript we can't hide api key. You can use any server-side language like nodejs to hide the key.

[@Mercy-ws2me]

@@CodingNepal But how? can you tell me how I can hide this using node.js in vanilla javascript project.

[@list2543]

Can i use this project for my API College Project ?

[@Dark-rz7mg]

can u add the upcoming codes to github bcoz i am not able to download google drive files i dont know why and btw thx for the videos

[@CodingNepal]

I didn't see any problem. Can you provide the URL of the page?

[@arsh_10x]

code run nhi hora video and source code diffrent hi bro.. video code try kra api he fetch nhi hori

[@legendssmarthub6805]

Hello CodingNepal , Amazing Project ...... Just A Small Doubt Like if i Searched for a city and the result come like "thunderstorm with light rain" How to make the t in the "thunderstorm" and l in "light" and r in "rain" In Capital Letter ?

[@CodingNepal]

Go to css file and add the given property! .weather-part .weather { /* other codes */ text-transform: capitalize; }

[@legendssmarthub6805]

@@CodingNepal TYSM For Your Help :)

[@adityagogoi5394]

@coding Nepal, Can you make a video on a registration form with a condition. The condition is the submit button of the form will disable until the complete form in filled up in JavaScript. There is no proper video on this topic .

[@انیمیشنسرا-ع2غ]

Hi codingNepla The - Get Device location - have some problem plz cheek and fix it thanks

[@prorespect8923]

It didt'n working for me.😓 can you help me? Please

[@tobiid1386]

Hello, This is a very wonderful project. Please can I get a link to the weather images used?

[@CodingNepal]

You can download them from here drive.google.com/file/d/1VXoCumUwizDTRQa9wBd5s1z1JDfIh6yE/view?usp=sharing

[@Sheisdanielafernandez]

When i downloaded files, it doesn't work on local server.. message: something went wrong

[@CodingNepal]

You didn't pass your API key. So, please read the blog before downloading the codes.

[@hauber1169]

I keep running into the issue, that it always throws an error at me. Even though I entered the API Key. Any solutions on that?

[@hauber1169]

Now, i have another issue. It wont load the images. It says "404 Not Found" but when i look at the directory icons, there are all there. what do i do about this?

[@felipemorais409]

Let apiKey = ' you put your api key here';

[@ganeshshinde2548]

Sir, everything is fine..but issue with.."something went wrong" while trying exact source code..pls suggest for right code..

[@CodingNepal]

Did you pass you API key..?

[@ganeshshinde2548]

@@CodingNepal sir, but exactly where I want to pass the API??...there i'm confusing..pls write the code shortly.

[@CodingNepal]

Here I've explained about it github.com/codingnepal/weather-app-javascript#usage

[@vijju4507]

Could you please tell me How to add wind speed in this code

[@CodingNepal]

Here is the video for that: kzbin.info/www/bejne/iZa7mGZ3jZ1ln8k

[@rahulrawat418]

please start voiceover

[@erzengaming]

Hello, I really like your videos, can you send me the link where you got those icons?

[@CodingNepal]

You can search Flaticon on the Google for it

[@barbarian5962]

What if we put directly ${inputField.value} instead of ${city} inside api?

[@CodingNepal]

Yes, you can directly put input field value in the api url without sending it as an argument.

[@Programmingwithrohith]

Next video on camera app

[@priyapandey6598]

Kya koii bata sakta hai kii ... Api key dalne ke baad bhi current place kyu nii show kar rha hai.... Pratapgarh nahi Lucknow hee show ho rha hai ....

[@priyapandey6598]

Pratapgarh show nii ho paa rha hai ... Lucknow hee show ho Raha hai

[@gamingzone-fj9zp]

Brother iski synopsis agr mil jati to mara kam ho jata

[@Malwarsito]

the arrow not dissapear on the input screen in my code :c

[@CodingNepal]

Double check your codes

[@Touchmytech02]

I have providing valid Api key but in console it shows 401 error help me

[@Arthurleuski]

did you find solution?

[@Touchmytech02]

@@Arthurleuski yes

[@Touchmytech02]

Change your Api key into variable

[@Arthurleuski]

@@Touchmytech02 do you mean let apiKey = '23456'?, if so, it doesn't work for me

[@Touchmytech02]

Check on Google how to create variable

[@subrahmanyapoojari1362]

Bro try to avoid giving live demo link so that your api key shouldn't be available to others.although you have tried to hide it by using your technique it is clearly visible in the Network tab Fetch request.instead of live demo give a source code🥰

[@CodingNepal]

I appreciate how easily you found the key 😃. It's not more important and confidential for me so I didn't use a server-side language to hide it from the visitors. I just want beginners use their own key instead of mine. So I did these easy steps to make the key obfuscate. Source codes of this project will available on my site tomorrow - www.codingnepalweb.com

[@diyadhamal2]

After adding city name.. something went wrong is coming

[@peace7127]

everything is correct but it still showing me error "something went wrong"

[@CodingNepal]

Make sure you've provided valid api key

[@arsnacht3150]

Bro, plis make nav bottom with any pages and responsive for mobile

[@CodingNepal]

Okay bro

[@arsnacht3150]

@@CodingNepal Thankyou 🙏🏽

[@TGIStuffyt]

Please provide weather icons...

[@CodingNepal]

Click here to download - www.codingnepalweb.com/wp-content/uploads/2021/08/weather-app-icons.zip

[@nhathoang3260]

i can't find any city, just have notify 'somethings went wrong'

[@CodingNepal]

Please, check the codes of this project from the description link.

[@codingindialtd4866]

Make a full tutorial on college website

[@CodingNepal]

Okay, I'll think about it

[@codingindialtd4866]

@@CodingNepal bro also try to make a full website on Gmail type website

[@gradigraph5346]

Nice man but Its a bit hard to code😅

[@CodingNepal]

If you know JavaScript Fetch API then it's easy for you. I have also tried to explain the main JavaScript line with written comments.

[@simpleladka]

Dear sir can you send me the copy of all the things

[@ADayWithDev]

Make project on react bro

[@leanandearn19]

13:45

[@Borko_981]

Can give Source code?

[@CodingNepal]

Download code files of this Weather App from the description link.

[@Лёа-г2к]

dawg where is jwt auth??? 🤡🤡 make a node js pet project like this ok? plz💪

[@aadityasharma530]

Source code please!!

[@CodingNepal]

Video is recently uploaded so please wait 2 or 3 days for source codes. I'll inform you once the code is uploaded on my site.

[@ramonmulder9064]

@@CodingNepal can't wait!!! you are just so amazing for real!

[@aadityasharma530]

@@CodingNepal Ok I will wait :)

[@CodingNepal]

@@aadityasharma530 @Ramon Mulder Download code files of this Weather App from the description link.

[@SalmanShah95]

I need source code please 😑

[@1Bipul]

Bro I need a help🙌 Can you help please?

[@CodingNepal]

How can I help you?

[@1Bipul]

Bro aura website ko header design xa 3 din Vai sako maila try gerako but sakeko xoina yr Plz tesko mathi aura video banw na Plz