How To Build A Weather App In JavaScript Without Needing A Server

Weather apps are one of the best projects to build as a beginner since they teach you tons of concepts around utilizing APIs and transforming complex data. They also generally have a ton of tricky CSS as well. In this video I will show you how to build a simple weather app that doesn’t even need a server to work.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:50 - Setup
02:35 - Header HTML
07:32 - Header CSS
12:37 - Day Section HTML
14:49 - Day Section CSS
16:40 - Hour Section HTML
19:29 - Hour Section CSS
20:56 - HTML Templates
23:09 - Connecting To The API
28:10 - Transforming API Data
39:10 - Rendering The Data
52:52 - Getting The User’s Location

#WeatherApp #WDS #JavaScript

[-hero-]

Dude u are one of the most solid educational source for networking and coding, I am so thankful u provide so much for free, u helped me at many hicks I had, I watched a ton of your tutorials fully, please keep up the amazing work bro, I am about to move into the working world and u contributed alot to it thanks

[STEINHOFF]

Perfect Video to watch at 07:00 am on Christmas 25.12. while givin my 4 month old son his morning milk! Please keep going with your incredible good Videos. Your Videos Are always fully on point without talking about unnecessery thinks and are so good explained. Chapeau! In my opinion your Videos are by far the best Videos for Web development out there!

[darkmift]

UI wise you should allow the option to query a location.
If the navigator is not granted permission simply display random location.

[liski]

For those wondering, the little glitch that happens on refresh is caused by the import of the css being in the javascript file. Since the javascript is loaded after, there's a brief moment where the css isn't loaded and causes the sun to appear bigger than it should for a split second.

[bmehder]

Great tutorial as always. I love doing things like this without a framework, and then redoing then in Svelte. Thanks for finding an API that doesn't require getting a key.

[intheshellify]

Another outstanding tutorial...if you already know how to do 90 percent of it.

[vivianliu]

this is an awesome course. Just thought, we probably should use proper tag like <sub> <sup> instead of just using css to control such text's visual looking. so something like below?
<span

[theisoj]

Thanks for this tutorial, Kyle!
I pretty much needed to see this tutorial on Christmas Eve in Finland.

[fxgaming]

Was it necessary to use vite? when you anyway gona use vanilla JS? I thought it's a beginner friendly tutorial. But Just using vite to generate bunch of starter files is overkill, now a beginner first have to learn/setup npm before starting a simple JS project. I have been following your channel from such a long time but I haven't expected this from you.

[txkhiladi]

I was trying to find an API which I can use for my project as most of them have limited things. But thanks to you man. Really appreciate it.

[soumyajitpal]

I have a issue I can't see my api in my console its showing not found with same code

[monicamntanywa]

Hello can you please assist I cannot get past the Vite, first part?

[HMTRICKS]

if we could add moon for night then it could have been more cooler ... but still a it looks great..

[justingolden]

Amazing video man! Great job splitting up and putting together fetching data, designing the front end, and connecting the two.

[danielgago-sk]

Beautiful sample. With pure JS, HTML and CSS, you can also make a lot of interesting projects. I also made a small "catalog" where the individual data was only in a json file, so also without the need for a server (since I don't know how to use databases at the moment). Sorting, filtering, everything works... An excellent project for testing programming procedures.

[TheOneHong]

JSON formatter extension for chrome is a good tool for analysing api
Data

[martygo]

Your Trivia series is awesome. A lot of learning, a lot of fun.
Please bring Brad Traversy here in next part.

[justingolden]

32:00 that's really interesting syntax I hadn't seen before. I feel like whenever you use really weird syntax, if it's important to use it, you want to make a habit of commenting it, and if it's not important you use that syntax, it's better to use the more readable version.

[ashleygahl]

Always nice to see content from Kyle.
Question though, the prices listed on your courses I assume is standard prices, however how do you accommodate people outside of USA with a weaker currency than the dollar. I mean to pay for these courses in my own currecy would cost me into the thousands of Rands

[surajitdas]

I really like your coding style in javascript. For css and html I am good and can write professional code but for javascript still need to study and practice more for sure.