Build a Simple Weather App with HTML CSS and JavaScript | Beginner Tutorial

Build a Simple Weather App with HTML CSS and JavaScript | Beginner Tutorial
Hey coding enthusiasts! 🚀 Join me in this exciting tutorial as we build a Simple Weather App using HTML, CSS, and JavaScript! Whether you're a beginner or looking to enhance your coding skills, this step-by-step guide has got you covered.
👩‍💻 Together, we'll delve into the basics of web development, crafting a sleek Weather App that pulls real-time data thanks to the OpenWeather API. No need for prior coding knowledge - I'll break it down for you!
🛠️ We'll cover:
- Setting up the HTML structure for your Weather App
- Styling with CSS to give it a polished look
- Adding dynamic functionality using JavaScript
- Integrating the OpenWeather API for live weather updates
By the end of our coding session, you'll have a fully functional Weather App and a solid foundation in HTML, CSS, and JavaScript. Perfect for kickstarting your coding journey or advancing your skills!
Source code: github.com/dev...
Tags:
weather app html css javascript,devression,weather app tutorial javascript,html css js weather app,weather app design,javascript project,html css javascript project,beginner javascript tutorial,html css tutorial,how to build a weather app,javascript project tutorial,weather app api,beginner web dev project,javascript beginner project,asmr programming,build a simple weather app with javascript,html css project,javascript project weather,javascript full course

[@thegoose1324]

To those who have an error - try plugging into chat gpt and ask “what’s wrong with this code” explain your error a bit and you’ll get a detailed explanation plus a corrected version of your code

[@lawxg3710]

it was really good tutorial editing really helped actually its way easier to write and understand code by just showing parts of it instead of showing hole coding part :)

[@a7mdbest15]

Thanks dude this is really helpful, and the styling is so clean i may use some of yours😉

[@dev_ression]

Thank you very much bro, I’m glad it helped!

[@devanshibaliyan829]

thankyou so much , please make more videos like this

[@nimsarabasnayake3376]

I got this error, "Error fetching current weather data. Please try again"... why????😢

[@snakefoxxofekans]

Amazing vid, thx a lot!. A indepth explanation of js would be lovely!

[@dev_ression]

Thank you! Will do :)

[@darianchetty1637]

Hey for some reason I'm getting an error and I swear I followed the vid step by step and I can't seem to figure out why

[@HannahCoziCorner]

This always happens to me when I follow coding tutorials, it's really frustrating.😭

[@JamesSmith-jh4co]

@@HannahCoziCorner for me, it's usually because the tutorial is using a different OS or because they are using an older version of something.

[@HannahCoziCorner]

@@JamesSmith-jh4co can you recommend some coding tutorials that worked for you?

[@JamesSmith-jh4co]

@@HannahCoziCorner I've honestly only done a few. but like in my original comment, as a beginner i would get hung up on command line stuff. i just mean when someone is creating a tutorial and they're using mac, there are going to be differences for doing the same things on windows.

[@manavchitroda9414]

Great video. My only gripe is that the image for the weather won't show up above the temperature. I keep getting an error that says the showImage() is not defined in the displayWeather(data) function and even if I delete it, the image still doesn't show up.

[@m.o.o.n.c.a.k.e]

I will do this project next week 🎉

[@simplesimon399]

Did you do it?

[@rondinelliherrera3834]

where you guys copy the URL?

[@xarintasneem]

Well, in my case i have found it in my confirmation email of open weather account login . I mean after doing sing up at that api website . they will send you a confirmation email. I have found that URL there

[@TapTap_196]

Pretty clean edit 😎

[@dev_ression]

Thank you bro! Much appreciated

[@aloSolo]

its really hard when you only show pieces of the code, specially when it starts to add up in javascript.

[@nolandderlugner1351]

thanks for the video, but it would make it a hundred times better, if you would do a step "like creating the button design in css" and then actually show what you did

[@dev_ression]

Good idea, I’ll do that for the next video! I’ll split the screen so you can see both the code and the result!

[@wilked1244]

how was your beggining with jS? i am actually learning it for about 3 weeks, just started doing some little projects but i need examples like tutorials, can't build something without help, is it normal?

[@dev_ression]

This is completely normal! I was the same. The best thing that I found was following a tutorial first, then after I would do it again by myself. I would also change it a little so it wasn’t the exact same project. The best way to learn is by doing!

[@HannahCoziCorner]

I learned JS in highschool last year and I'm in the same position😅

[@WebDevXpert]

How To Create Weather App in HTML CSS and JavaScript || BY Pro inTech - No Talking : kzbin.info/www/bejne/o4rHaoxoh9Kni5I

[@moonsun3658]

excellent tutorial .thank you very much

[@dev_ression]

Happy to help!

[@aeneaswasgaming]

It says error fetching forecast data

[@ppavlin8]

it worked for me! thank you for this awesome tutorial!

[@Thetarget900]

can plz guide me

[@varshinim487]

After applying the api key the js is not working only html and css is working aft given the city name and search button it is not working what will be prblm

[@yxsh10]

Suggestion: Start a html and css tutorial. I'm pretty sure it will help you gain subscribers and help people. Hope this helps!

[@MoonChild-nm7rr]

Only the HTML CSS part is working if I click on Search it's not moving to next page. What to do?

[@mr_clax04]

same

[@fwaku3441]

Great video and good explanation thanks:)

[@dev_ression]

Thanks for watching!

[@user-eo6gt4eu6i]

Hi does this have error handling

[@EugeneNechypurenko]

good tutorial, thx a lot

[@dev_ression]

Thanks for watching man

[@yxsh10]

You sounded like a classic Aussie Weather Reporter (no hate!)

[@dev_ression]

I appreciate that hahaha

[@vedikawalke4680]

I have some question how you had written .hourly-items in style.css file when though no such class is mentioned in html file

[@jawadkhan1907]

Well it was written in JavaScript file in .innerhtml

[@loki_7994]

Can any one say how to replace the current weather url and forecast url in the js

[@sajjadch4086]

I love this

[@simranswami7272]

I have write the whole code but the weather is not showing .what should I do?

[@Lt21589]

Great video! But how could I add the wind speed into here

[@dev_ression]

Thank you! You’ll need to make a request to the API endpoint and parse the response to extract the wind speed data.

[@abhinavvarma46]

What to do it the code not running at last

[@khushimittal4463]

I am getting could not fetch current weather detaidl and hourly weather details constantly...i have user your code word by word still. Please help

[@siddharthkumar4655]

it shows local host refuse to connect

[@dev_ression]

What does your page look like?

[@Hadtomakeanother]

​@@dev_ressionsame issue, it doesnt load the page. it seems it has something to do with style.css. I was using your script as more of a test and i have an issue with visual studio where my code will not load no matter what search engine i use, chrome, edge and firefox Could not read source map for chrome-error://chromewebdata/: Unexpected 503 response from chrome-error://chromewebdata/neterror.rollup.js.map: Unsupported protocol "chrome-error:"

[@Hadtomakeanother]

Idk if you saw my previous comment or not, but do not run your script locally. Run it through the actual website. For some reason (this has been going on for a while) you are not able to run your code locally through visual studio. In the folder you will see "index.html" just run that and you will see your website.

[@hype_x6083]

great tutorial dude but my site did not apply any javaa script codes and functions its just the same as when i looked at it when we finished css.

[@dev_ression]

1. Make sure you have linked your JavaScript correctly in your html file. 2. Open your web browser and check the console for errors. This will help you with debugging your code! 😃

[@funyunsferret4289]

Same problem bro. Did you get any solution?

[@funyunsferret4289]

@@dev_ression Hi even I got have the same problem, idk what to do

[@pavan-yl2gh]

Hello can anyone explain is this app shows complete today's weather??

[@tthamil]

nice

[@dev_ression]

Thanks bro!

[@user-kc5yr9cy1t]

how to insert weather api key part is not undersatandable.

[@iona3264]

are there certain extensions u need? in vs code

[@jawadkhan1907]

For this project only liveserver

[@Wisegene]

Works fine for me now😂

[@varshinim487]

After applying the api key the js is not working only html and css is working aft given the city name and search button it is not working what will be prblm

[@shakibataheri2470]

My js file doesn't work what am I supposed to do

[@varshinim487]

Have u got solution for it

[@OlajideTolulope-t3f]

What is the name of this app

[@josiahrowland2852]

bro could've shown his full JavaScript file after everything was added

[@htmlnormaly]

Looking good but it doesn't work

[@dev_ression]

@@htmlnormaly you may be doing something wrong Temka

[@dejadiggs8612]

@@dev_ression My submit button doesn't work. What did I do wrong?

[@raydaywastaken6990]

it didint work when i searched for a city

[@247withtous]

same here

[@funyunsferret4289]

Same

[@varshinim487]

Same

[@varshinim487]

Have anybody got solution

[@areshaider8378]

i keep getting errors

[@dev_ression]

what are your errors?

[@areshaider8378]

@@dev_ression keeps saying api key invalid when i try to open yhe link and get the error message data not found i triple check the api key

[@dev_ression]

Have you tried generating a new key?

[@areshaider8378]

@@dev_ression yes and i use it but keep getting the same error, is there a way to test if the api works?

[@dev_ression]

@@areshaider8378 I would suggest watching Andy’s Tech Tutorials video on how to use the openweather API for beginners :)

[@AnimePhenomX-9]

It doesn't work

[@jawadkhan1907]

Why what happened tell me I'll help you

[@shakibataheri2470]

​@jawadkhan1907 in the js file the first line of url which is const currentWeatherUrl gives an error

[@dejadiggs8612]

@@jawadkhan1907 hello! my submit button doesn't work What did I do wrong?

[@SoloTheStaticHater2810]

Anybody else getting errors?

[@Wisegene]

Same bro i followed the tutorial to the bone and i am still missing something and getting errors. i don't know if he didn't show something but i cant figure out the problem with the styles.css

[@Wisegene]

I fixed it

[@akanchha2310]

can you provide the code @@Wisegene

[@jpalmer1056]

How?@@Wisegene

[@_AI.Guy_]

​@@Wisegeneplease tell bro

[@gaylejakubowski]

'Promo SM'

[@User-083-3]

cannot read properties of undefined (reading 'slice') this is showing error

[@theboyunknown]

Stop using background music throughout the video, it's distracting

[@dev_ression]

no

[@theboyunknown]

@@dev_ression you’ll take my advice eventually

[@Tolulope_dev]

Speak for yourself only It's distracting for only you