Build a Weather App with Vanilla Javascript | Javascript Project for Beginners

Learn how to build a Weather App with Vanilla Javascript, HTML, and SCSS. This Javascript Project for Beginners uses the Open Weather Map API to retrieve weather data and displays a mobile first responsive web design. This Vanilla JS app also features accessibility considerations, the geolocation API, persistent data storage, the Fetch API with Async / Await, and Serverless Functions.

Vanilla Javascript Weather App Project

(0:00) Intro
(1:08) Structure Semantic HTML foundation
(31:53) Apply SCSS styles
(1:52:39) Add Vanilla JavaScript functions
(4:29:41) Review App Functionality
(4:32:37) Switch to Serverless Fetch Functions
(5:03:07) Debug Node-Fetch Import
(5:04:12) Accessibility Testing with a Screen Reader
(5:13:08) A Final Bug Fix and Deployment

✅ Follow Me:

Was this tutorial about how to build a Weather App with Vanilla Javascript, HTML, and SCSS helpful? If so, please share. Let me know your thoughts in the comments.

#build #weather #app

[oladapooluwadurotimi]

I can’t even imagine having to go learn programming from somewhere else. I’m really thankful that when I wanted to start out as a developer, the Divine lead me to you sir. I hope you do the SCSS tutorial in the coming days. Learning from you for me, is one of the best thing that ever happened to me. And I’m really thankful for that opportunity. Thanks for the project. I have being surfing the internet for a complete project since I completed your JS COURSE. I thank the Divine for leading me here.

[abhijeetkushwaha]

Not lying, but it has taken me 4 hours to get past first 30 mins of HTML. Because I am making detailed notes and at the same time, coding with complete comments so that I can undeerstand the parts of the code. And i am determined to complete the remaining five hours, no matter what!
Thanks a lot for the video, it has taught me a lot already!
Much love, and more power to you sir.

[darranoshea]

Just finished up now!! Wow that last hour threw some curveballs! Thanks so much Dave!!

[MJGRAVITON]

Going through your Javascript tutorial as a beginner and its awesome, your are a legend with your good presentation technique, well paced and concise and eloquent. I hope I learn from you, and thank you for these tutes!

[viveLaCifte]

You are like the Bob Ross of web development, Dave. Keep up the good work!

[DipeshMalvia]

This is one of the best vanilla JavaScript project. Tons of things to learn while building the app. Thanks Dave for creating such a comprehensive tutorial.

[jesseemana]

currently learning Redux from you it's unfair your channel doesn't pop up in the searches, wish i'd found you way earlier, premium content and i'd recommend you to everyone

[andrewclarke]

Wow! This is going to keep me busy over the weekend. Thanks Dave.

[abdelbasset]

Honestly this is brilliant and I am glad getting all of your content for free.

[alexfoster]

Man I wish I had seen this when I first got the project I have (actually got a project just like this from a technical interview as a take home). Your app looks superior to the app that I built with the same API (currently around 500 hours of development). Thank you for this!

[_ShuvamKumar_CseB]

I completed this great JavaScript Project take time and effort but tons of learning.
Thank you very very much ❤.
Love from 🇮🇳.

[Quatu]

Great tutorial Dave!
Small update for anyone following this now:
"node-fetch" does not support "require()" function since v3, instead you will need to use "import" declaration. So in both serverless functions, replace the line "const fetch = require("node-fetch");" with "import fetch from 'node-fetch';".
If netlify still throws an error, add this to the netlify.toml file:
[functions]
node_bundler = "esbuild"

[dhrubajyotibhattacharjee]

I am so pleased to be the 1000th person to find and like this video. Sir, you are amazing. Learning so much from you still... Thank you!

[ifeanyichimbo]

Thanks Dave for another great tutorial video. I've been learning web development on my own and your content and web developer roadmap is by far the best free content I've seen online.
PS- the one call api is no longer free.

[tetyanagon]

TY!!! Great tutorial!
It's so pity that I can not use weather onecall API now for tutorial (not free at the moment). But any case - Dave, you are great dev and mentor.

[satyasrideviful]

Omg thank you. I am newbie and still struggle to understand JavaScript. Practice again and again. This will be helpful for me

[mostafagmal]

Can you Please do one more Vanilla JS like this its helpful, not just for the code (we can find this everywhere) but you help us to well structure our projects and well organise it, i learned so much from you so thank you soo much, please if you have time do it i will be sooo happy, Really appreciate your work :)

[bohdanmukha]

First of all, thank you for this tutorial, it's awesome. I really like your narrating style and appreciate your detailed explanations. And, if you don't mind, I have a couple of questions. If I understand it correctly, you've built this app beforehand, and now you recreate it for us with your line by line commentary. So, how long it actually took for you to build this from scratch the first time? Including everything from the idea in your head through design, coding, styling, debugging etc, to the finished product? It would be useful to know realistic time frame for the project of that caliber. And second question is kinda related. If this woud've been a project for the client, how much would've you charge? P.S. My English is just as bad as my Javascript, so sorry about the possible mistakes.

[aradhyagupta]

After doing your js whole video, this is the right project .... Thanks dave .

[Drakan]

Hi Dave,
Awesome tutorial ~ not quite done with it yet!
Small suggestion for future projects / tutorials (I know this is complex & long already - and this may add some more):
Teach viewers how to make a "per-project" settings.json file instead of editing the core file: i.e.
This will prevent any future projects they may attempt from running into path/reference issue and is just better practice overall.