Build a Simple Weather App with HTML CSS and JavaScript | Beginner Tutorial
ฝัง
- เผยแพร่เมื่อ 15 ก.ย. 2024
- 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
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
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 :)
Thanks dude this is really helpful, and the styling is so clean i may use some of yours😉
Thank you very much bro, I’m glad it helped!
Amazing vid, thx a lot!. A indepth explanation of js would be lovely!
Thank you! Will do :)
thankyou so much , please make more videos like this
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.
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
This always happens to me when I follow coding tutorials, it's really frustrating.😭
@@HannahCoziCorner for me, it's usually because the tutorial is using a different OS or because they are using an older version of something.
@@JamesSmith-jh4co can you recommend some coding tutorials that worked for you?
@@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.
where you guys copy the URL?
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
its really hard when you only show pieces of the code, specially when it starts to add up in javascript.
Pretty clean edit 😎
Thank you bro! Much appreciated
I will do this project next week 🎉
Did you do it?
Only the HTML CSS part is working if I click on Search it's not moving to next page. What to do?
same
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
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!
I got this error, "Error fetching current weather data. Please try again"... why????😢
Same 😢
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?
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!
I learned JS in highschool last year and I'm in the same position😅
excellent tutorial .thank you very much
Happy to help!
it worked for me! thank you for this awesome tutorial!
can plz guide me
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
Great video and good explanation thanks:)
Thanks for watching!
Suggestion: Start a html and css tutorial. I'm pretty sure it will help you gain subscribers and help people.
Hope this helps!
I have some question how you had written .hourly-items in style.css file when though no such class is mentioned in html file
Well it was written in JavaScript file in .innerhtml
It says error fetching forecast data
You sounded like a classic Aussie Weather Reporter (no hate!)
I appreciate that hahaha
I love this
good tutorial, thx a lot
Thanks for watching man
Hi does this have error handling
Great video! But how could I add the wind speed into here
Thank you! You’ll need to make a request to the API endpoint and parse the response to extract the wind speed data.
Sir one error ( fetching error hporly forecast data .please try again😢 sir tell me what will change )
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
I have write the whole code but the weather is not showing .what should I do?
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.
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! 😃
Same problem bro. Did you get any solution?
@@dev_ression Hi even I got have the same problem, idk what to do
Can any one say how to replace the current weather url and forecast url in the js
Hello can anyone explain is this app shows complete today's weather??
nice
Thanks bro!
it shows local host refuse to connect
What does your page look like?
@@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:"
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.
What to do it the code not running at last
how to insert weather api key part is not undersatandable.
The program is not working
are there certain extensions u need? in vs code
For this project only liveserver
What is the name of this app
Works fine for me now😂
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
My js file doesn't work what am I supposed to do
Have u got solution for it
bro could've shown his full JavaScript file after everything was added
Looking good but it doesn't work
@@htmlnormaly you may be doing something wrong Temka
@@dev_ression My submit button doesn't work. What did I do wrong?
it didint work when i searched for a city
same here
Same
Same
Have anybody got solution
cannot read properties of undefined (reading 'slice')
this is showing error
Anybody else getting errors?
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
I fixed it
can you provide the code
@@Wisegene
How?@@Wisegene
@@Wisegeneplease tell bro
It doesn't work
Why what happened tell me I'll help you
@jawadkhan1907 in the js file the first line of url which is const currentWeatherUrl gives an error
@@jawadkhan1907 hello! my submit button doesn't work
What did I do wrong?
'Promo SM'
i keep getting errors
what are your errors?
@@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
Have you tried generating a new key?
@@dev_ression yes and i use it but keep getting the same error, is there a way to test if the api works?
@@areshaider8378 I would suggest watching Andy’s Tech Tutorials video on how to use the openweather API for beginners :)
Whiever wants to create weather app from this tuto i recommend u to not follow this coz it is totally waste of time u will not understand anything from it
How To Create Weather App in HTML CSS and JavaScript || BY Pro inTech - No Talking : th-cam.com/video/mYd9Y2RmtU0/w-d-xo.html
Stop using background music throughout the video, it's distracting
no
@@dev_ression you’ll take my advice eventually
Speak for yourself only
It's distracting for only you