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

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ม.ค. 2025

ความคิดเห็น • 122

  • @thegoose1324
    @thegoose1324 6 หลายเดือนก่อน +28

    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

  • @suryaramesh6696
    @suryaramesh6696 6 วันที่ผ่านมา +1

    Had a few errors, asked chatgpt to correct them and it's all working. Thank you for this amazing tutorial!

    • @dev_ression
      @dev_ression  5 วันที่ผ่านมา

      @@suryaramesh6696 legend. ChatGPT will be your best friend in these instances!

  • @manavchitroda9414
    @manavchitroda9414 9 หลายเดือนก่อน +3

    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.

  • @a7mdbest15
    @a7mdbest15 ปีที่แล้ว +5

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

    • @dev_ression
      @dev_ression  ปีที่แล้ว +1

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

  • @TapTap_196
    @TapTap_196 ปีที่แล้ว +5

    Pretty clean edit 😎

    • @dev_ression
      @dev_ression  ปีที่แล้ว +1

      Thank you bro! Much appreciated

  • @aeneaswasgaming
    @aeneaswasgaming 8 หลายเดือนก่อน +3

    It says error fetching forecast data

  • @m.o.o.n.c.a.k.e
    @m.o.o.n.c.a.k.e 9 หลายเดือนก่อน +5

    I will do this project next week 🎉

    • @simplesimon399
      @simplesimon399 7 หลายเดือนก่อน

      Did you do it?

    • @dev_ression
      @dev_ression  5 วันที่ผ่านมา +1

      @@m.o.o.n.c.a.k.e I don’t think he did it 😭

  • @snakefoxxofekans
    @snakefoxxofekans ปีที่แล้ว +4

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

    • @dev_ression
      @dev_ression  ปีที่แล้ว +1

      Thank you! Will do :)

  • @darianchetty1637
    @darianchetty1637 10 หลายเดือนก่อน +15

    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
      @HannahCoziCorner 7 หลายเดือนก่อน +2

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

    • @JamesSmith-jh4co
      @JamesSmith-jh4co 6 หลายเดือนก่อน +2

      @@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
      @HannahCoziCorner 6 หลายเดือนก่อน +1

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

    • @JamesSmith-jh4co
      @JamesSmith-jh4co 5 หลายเดือนก่อน +2

      @@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.

    • @priyesh16
      @priyesh16 3 หลายเดือนก่อน +1

      maybe its because the api key you're using, I'm getting the 401 error code which is definitely API key's fault.

  • @nimsarabasnayake3376
    @nimsarabasnayake3376 5 หลายเดือนก่อน +4

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

  • @devanshibaliyan829
    @devanshibaliyan829 6 หลายเดือนก่อน +2

    thankyou so much , please make more videos like this

  • @wilked1244
    @wilked1244 10 หลายเดือนก่อน +4

    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
      @dev_ression  10 หลายเดือนก่อน +5

      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
      @HannahCoziCorner 7 หลายเดือนก่อน

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

  • @aloSolo
    @aloSolo 7 หลายเดือนก่อน +2

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

  • @lawxg3710
    @lawxg3710 9 หลายเดือนก่อน +4

    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 :)

  • @moonsun3658
    @moonsun3658 9 หลายเดือนก่อน +1

    excellent tutorial .thank you very much

    • @dev_ression
      @dev_ression  9 หลายเดือนก่อน

      Happy to help!

  • @rondinellilacampuinganherrera
    @rondinellilacampuinganherrera 7 หลายเดือนก่อน +8

    where you guys copy the URL?

    • @xarinxara
      @xarinxara 5 หลายเดือนก่อน +1

      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

  • @ppavlin8
    @ppavlin8 7 หลายเดือนก่อน +1

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

    • @Thetarget900
      @Thetarget900 6 หลายเดือนก่อน

      can plz guide me

    • @varshinim487
      @varshinim487 6 หลายเดือนก่อน +1

      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

    • @mrshortie4402
      @mrshortie4402 22 วันที่ผ่านมา

      ​@@varshinim487I have the same issue

  • @vedikawalke4680
    @vedikawalke4680 8 หลายเดือนก่อน +1

    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
      @jawadkhan1907 8 หลายเดือนก่อน

      Well it was written in JavaScript file in .innerhtml

  • @Kimseungmin-e5j
    @Kimseungmin-e5j 10 หลายเดือนก่อน +2

    Hi does this have error handling

  • @HakunaMatatatatata
    @HakunaMatatatatata 2 หลายเดือนก่อน

    thanks a lot!!! it worked.

  • @fwaku3441
    @fwaku3441 11 หลายเดือนก่อน +1

    Great video and good explanation thanks:)

    • @dev_ression
      @dev_ression  11 หลายเดือนก่อน

      Thanks for watching!

  • @MoonChild-nm7rr
    @MoonChild-nm7rr 6 หลายเดือนก่อน +2

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

    • @mr_clax04
      @mr_clax04 5 หลายเดือนก่อน +1

      same

    • @Hehebwooi-y3q
      @Hehebwooi-y3q 2 หลายเดือนก่อน

      Did you find the solution, I got the api key as well but it's showing error fetching data

  • @nolandderlugner1351
    @nolandderlugner1351 ปีที่แล้ว +2

    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
      @dev_ression  ปีที่แล้ว +2

      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!

  • @Mercilessly.
    @Mercilessly. 5 วันที่ผ่านมา

    hey i need help with an error saying "errpr fetching current weather data. please try again"

  • @ymsxlus
    @ymsxlus หลายเดือนก่อน

    What IDE do you use?

  • @Lt21589
    @Lt21589 10 หลายเดือนก่อน +1

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

    • @dev_ression
      @dev_ression  10 หลายเดือนก่อน

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

  • @EugeneNechypurenko
    @EugeneNechypurenko 6 หลายเดือนก่อน +1

    good tutorial, thx a lot

    • @dev_ression
      @dev_ression  6 หลายเดือนก่อน

      Thanks for watching man

  • @hype_x6083
    @hype_x6083 10 หลายเดือนก่อน +1

    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
      @dev_ression  10 หลายเดือนก่อน

      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
      @funyunsferret4289 7 หลายเดือนก่อน

      Same problem bro. Did you get any solution?

    • @funyunsferret4289
      @funyunsferret4289 7 หลายเดือนก่อน

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

  • @pavan-yl2gh
    @pavan-yl2gh 5 หลายเดือนก่อน

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

  • @iona3264
    @iona3264 9 หลายเดือนก่อน

    are there certain extensions u need? in vs code

    • @jawadkhan1907
      @jawadkhan1907 8 หลายเดือนก่อน

      For this project only liveserver

  • @khushimittal4463
    @khushimittal4463 8 หลายเดือนก่อน

    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

  • @faridamehry7799
    @faridamehry7799 หลายเดือนก่อน

    How can add icon

  • @simranswami7272
    @simranswami7272 7 หลายเดือนก่อน

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

  • @sajjadch4086
    @sajjadch4086 8 หลายเดือนก่อน +1

    I love this

  • @yxsh10
    @yxsh10 6 หลายเดือนก่อน

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

  • @harshilkhopkar69
    @harshilkhopkar69 2 หลายเดือนก่อน

    Its been 4 insane hours and my api key isn't activated yet, what should I do???

  • @NKATEKOCHAUKE-b7i
    @NKATEKOCHAUKE-b7i หลายเดือนก่อน

    What's the name of an app you using??

  • @siddharthkumar4655
    @siddharthkumar4655 ปีที่แล้ว +2

    it shows local host refuse to connect

    • @dev_ression
      @dev_ression  11 หลายเดือนก่อน +2

      What does your page look like?

    • @Hadtomakeanother
      @Hadtomakeanother 10 หลายเดือนก่อน +1

      ​@@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
      @Hadtomakeanother 10 หลายเดือนก่อน +2

      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.

  • @abhinavvarma46
    @abhinavvarma46 6 หลายเดือนก่อน

    What to do it the code not running at last

  • @yxsh10
    @yxsh10 6 หลายเดือนก่อน +1

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

    • @dev_ression
      @dev_ression  6 หลายเดือนก่อน

      I appreciate that hahaha

  • @sanelisiwebooi5461
    @sanelisiwebooi5461 3 หลายเดือนก่อน

    How to insert the degree celsius symbol?😢

  • @loki_7994
    @loki_7994 4 หลายเดือนก่อน

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

  • @yuvrajchavan8234
    @yuvrajchavan8234 3 หลายเดือนก่อน

    Sir one error ( fetching error hporly forecast data .please try again😢 sir tell me what will change )

  • @Dhanush-b2m
    @Dhanush-b2m 5 หลายเดือนก่อน

    how to insert weather api key part is not undersatandable.

  • @Wisegene
    @Wisegene 10 หลายเดือนก่อน +1

    Works fine for me now😂

    • @varshinim487
      @varshinim487 6 หลายเดือนก่อน +1

      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
    @shakibataheri2470 7 หลายเดือนก่อน

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

    • @varshinim487
      @varshinim487 6 หลายเดือนก่อน

      Have u got solution for it

  • @IrinMathew-y4p
    @IrinMathew-y4p 4 หลายเดือนก่อน

    The program is not working

  • @OlajideTolulope-t3f
    @OlajideTolulope-t3f 6 หลายเดือนก่อน

    What is the name of this app

  • @tthamil
    @tthamil 6 หลายเดือนก่อน +1

    nice

    • @dev_ression
      @dev_ression  6 หลายเดือนก่อน

      Thanks bro!

  • @josiahrowland2852
    @josiahrowland2852 7 หลายเดือนก่อน

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

  • @raydaywastaken6990
    @raydaywastaken6990 9 หลายเดือนก่อน

    it didint work when i searched for a city

  • @CoderTemka2
    @CoderTemka2 6 หลายเดือนก่อน +1

    Looking good but it doesn't work

    • @dev_ression
      @dev_ression  5 หลายเดือนก่อน

      @@CoderTemka2 you may be doing something wrong Temka

    • @dejadiggs8612
      @dejadiggs8612 4 หลายเดือนก่อน

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

  • @areshaider8378
    @areshaider8378 ปีที่แล้ว

    i keep getting errors

    • @dev_ression
      @dev_ression  ปีที่แล้ว

      what are your errors?

    • @areshaider8378
      @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
      @dev_ression  ปีที่แล้ว

      Have you tried generating a new key?

    • @areshaider8378
      @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
      @dev_ression  ปีที่แล้ว +1

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

  • @AnimePhenomX-9
    @AnimePhenomX-9 8 หลายเดือนก่อน

    It doesn't work

    • @jawadkhan1907
      @jawadkhan1907 8 หลายเดือนก่อน

      Why what happened tell me I'll help you

    • @shakibataheri2470
      @shakibataheri2470 7 หลายเดือนก่อน

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

    • @dejadiggs8612
      @dejadiggs8612 4 หลายเดือนก่อน

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

  • @SoloTheStaticHater2810
    @SoloTheStaticHater2810 10 หลายเดือนก่อน +1

    Anybody else getting errors?

    • @Wisegene
      @Wisegene 10 หลายเดือนก่อน +1

      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
      @Wisegene 10 หลายเดือนก่อน

      I fixed it

    • @akanchha2310
      @akanchha2310 9 หลายเดือนก่อน

      can you provide the code
      @@Wisegene

    • @jpalmer1056
      @jpalmer1056 9 หลายเดือนก่อน

      How?@@Wisegene

    • @_AI.Guy_
      @_AI.Guy_ 8 หลายเดือนก่อน

      ​@@Wisegeneplease tell bro

  • @User-083-3
    @User-083-3 10 หลายเดือนก่อน

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

  • @faizan2364
    @faizan2364 4 หลายเดือนก่อน

    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

  • @gaylejakubowski
    @gaylejakubowski ปีที่แล้ว

    'Promo SM'

  • @theboyunknown
    @theboyunknown 9 หลายเดือนก่อน +1

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

    • @dev_ression
      @dev_ression  9 หลายเดือนก่อน +4

      no

    • @theboyunknown
      @theboyunknown 9 หลายเดือนก่อน +1

      @@dev_ression you’ll take my advice eventually

    • @laravellla
      @laravellla 8 หลายเดือนก่อน +2

      Speak for yourself only
      It's distracting for only you