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.
JavaScript Simplified Course: javascriptsimplified.com
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/j...
JavaScript Simplified Course: javascriptsimplified.com
Why I Don’t Use Class Selectors In JavaScript Article: blog.webdevsimplified.com/201...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ 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-5882]

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

[@justingolden21]

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

[@theisoj]

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

[@batsunet]

Very fun little project to code along to! Thanks for all the great content.

[@STEINHOFF1989]

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!

[@STEINHOFF1989]

Merry Christmas Kyle! 😉

[@WebDevSimplified]

Thank you so much! I am really glad you enjoyed this video.

[@HHJoshHH]

@@WebDevSimplifiedhey Kyle I’m trying so hard to get this but the API isn’t working for me bro. Where can I get some help?

[@txkhiladi4041]

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.

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

[@noah5592]

i love svelte!

Geat job/video again! Thank you Kyle! :) We need more tutorials like this...

[@martygo]

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

[@daniillitvinenko4348]

Thank you again. As always very helpful and informative.

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

[@bama2619]

Thank you, Kyle.Good educational project

[@darkmift]

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

[@ankitdas2197]

this is done thank you for all the awesome js code

[@khoitranquoc4445]

useful tutorials... thanks guy

[@TheMetalMag]

Thanks for your videos as usual

[@hassaneoutouaya]

Thank you so much !

[@svetoslavtrifonov6431]

Not related to the video, but please create one with setup for node with express, nodemon and typescript with ES6 syntax. I managed somehow to do it after combining a lot of tutorials. Thanks for your commitment to teach us :)

[@shadowstar751]

Idk why you are so underrated

[@tonmoyhussain6132]

Thank you 😃

[@liski12]

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.

[@Retrohertz]

So, I surmise that is a reason why CSS should be loaded the old fashioned way - via a 'link' - at the head of the document instead of through JS?

[@liski12]

@@Retrohertz Indeed, unless you're creating a javascript component, in which case you would only want to load the css if the component is used in a page.

[@oqarshi4185]

just add a preloader

[@liski12]

@@oqarshi4185 Using a preloader would do as well, but if the whole website uses the css, it's better to use a link tag instead. It prevents slowing down users' entry in the app and uses features that are supposed to be used. It's also easier to do.

[@mnoquiao]

thanks brother.

[@intheshell35ify]

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

[@andrewdrewdrew1637]

i found it really confusing lol

[@milleniummoses]

Thank you for takign the time to do this I do have a question, though? Could this have been accomplished just as efficiently with CSS Grid?

[@bama2619]

Thank you. Good speed, nearly lost after the 50th minute. Good that we can pause and rewatch. But I got the concept and your approach: getting promise with axious, parsing its data and then rendering. Thank you again. All is in one smooth architecture. How much time does it take to prepare the architecture? Probably 3 times more than writing the code. Keep it up, Kyle. Do you live in Florida?

[@ahouse73]

Can you make a select2 select by Hand in a step by step tutorial. youre tutorials Are Great

[@ashleygahl3638]

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

[@WebDevSimplified]

Just email me at the email listed on the about page of my KZbin channel with the country you live in and mention you want to buy one of my courses.

[@markoweb24]

Great tutorial, I have learned a lot from this one video, however I don’t know how to deploy this project ??

[@justingolden21]

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.

[@Retrohertz]

It's using destructuring in an interesting way. Personally, for simplicity, I'd just get the first value of the array (... [0])

[@vivianliu5011]

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

[@joacomesa22]

Would you recommend including this project in my portfolio? I 've changed the styling and design of the page and written differently some parts of the code. It didn't end up EXACTLY like the project of the video. I know HTML, CSS and JS and I understood everything you did. But, should I include it in my portfolio even though it is from a KZbin tutorial?

[@jgalvan09]

this should do well as long as you customized it your way that's what jobs care about

[@7DuRd3n]

u r a blessing bru

[@ayanparmar3476]

Thanks!

[@WebDevSimplified]

No problem!

[@tetyanagon3342]

TY!!! GJ!!!❤💛💙

[@raufdimaampao3673]

Please make a tutorial for typescript generics

[@HMTRICKS2003]

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

[@TheOneHong]

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

[@fulstak]

Greetings Kyle. Howdy. Do you know why grid-template-columns: repeat(auto-fill, 40px); is not working for me.

[@chief1978]

Shouldn't you have done the filter on the source array before the map? So you weren't bothering mapping elements just to discard them?

[@surajitdas6555]

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.

[@kybkap8686]

hi kyle how are you; i have 2 instances of a component in my root component: function App(){ ..... return( ) how can i control their rerendering? i want to freeze one in his last props values and rerender the other with new props and then alternate the process. note : im not talking about conditional rendering i want them both appear at the same time but 1 is updating while the other if freezing. thnks have a nice day :) (im beginner at react)

[@WarioNeila]

Thanks for the video! I went through this but some reason that I don't know yet, I'm getting unordered cards for daily and hourly sections, though I can see results are ordered by timestamp in the response from the API... any ideas?

[@meganweber5057]

Why do we import the css into the javascript?

[@harshrane3155]

Heyy, I'm from India. While connecting to the api, after calling the getWeather function, the console says that XML request has been blocked due to absence of CORS policy: 'allow-access-control-origin' header. Can you please suggest me a solution to overcome this error!

[@zeinalabdinsaker9301]

Thank you for sharing this video. I have a question for those who have left positive comments expressing gratitude: Do you genuinely understand the content, or are you simply copy-pasting the code? If you truly comprehend everything, I wonder why you would feel the need to watch this video. Personally, I found certain aspects, such as the JavaScript code snippets like `()=>{}`, map(time, index)=>{return} and `.return().return=>`, quite challenging to grasp. These seem to be targeted towards individuals with advanced JavaScript knowledge, which might make the video less accessible to those without such expertise. I believe it's important to acknowledge when certain concepts are beyond our current understanding, and I appreciate content creators who strive to cater to various levels of expertise. Thank you for your efforts in providing educational material, even if some parts may be difficult for certain viewers to fully comprehend.

[@liski12]

I'm curious, why did you use "Math.Round(value * 100)/100" instead of just using value.toFixed(2)? You're modifying the received value to make it lose precision, but at the same time, you do this to display the data, so in a way, keeping it original and converting on render wouldn't have been simpler? I know your code is working and all, but i'm just curious on why you did it that way and not another.

[@CodeEnthusiast78912]

i'll try to make this with svelte, lets see how it goes

[@CodeEnthusiast78912]

@@Outplayedqt i don't want to do that before grasping the concepts myself. Also chatgpt doesn't know the latest sveltekit release, because of the dataset being from 2021. So no point on doing that for me

[@bmehder]

I just remade this with SvelteKit. I had to hard code the location again because the navigator object is not available when the page is server-side rendered. This won't be an issue if you use Svelte instead of SvelteKit.

[@monicamntanywa8333]

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

[@soumyajitpal597]

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

[@hawigirmachee4590]

can this API to search weather depending on city name

[@galinaoverchuk]

Was wondering if there is a way to limit the hourly section until 12 am, could anyone give a hint on how i can achieve that?

[@lauris5275]

Right now the best weather API for free. Spent some good time using open-weather data. Turns out they changed it. Cant see daily data anymore.

[@saurabhbisht2238]

Why vite doesn't show the errors like create react app shows

[@abaysankarbcompa2179]

The specifier “axios” was a bare specifier, but was not remapped to anything. what to do

[@ay1ai146]

For some reason I am not getting the AM and PM next to my times in the hourly rows, I tried copying all the code from your gitHub and still did not bring up the AM and PM. Anyone knows what could be the issue?

[@DucTaZenSurfer]

Hello there community devs. Has anyone finished this project yet? I finished but have 3 issues I can't seem to trouble shoot. The blur is permanent. The icons don't change according to weather. The weather data isn't updating. Other than that, everything seems to be up and running properly. I crossed reference the instructors code but can't seem to find the problems. Does anyone else have the same or similar issues? Thanks!

[@HHJoshHH]

Hey there did you ever figure out what was wrong? I’m having the same issue. Thank you 😊

[@hayescodm7782]

Can you show it without using api key?

[@AbhishekKumar-nn9ck]

Can I say that it's a static website or is it a dynamic one? Anyone please. We are using API here... Please tell

[@fxgaming3925]

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.

[@manemanoj3068]

Brother make a project for interview ready

[@kvalerix]

Hi. I have a typeerror in my console that says "Failed to resolve module specifier ''axios". How can I fix that?

[@samuelvictoralexander8770]

me too, please how do I solve this/debug it, I tried to debug it but I havn't found the solution

[@alipasha7275]

Best ever

[@Elnomadic]

my page is blank when i run it and css doesn't seem to work

[@DucTaZenSurfer]

Thank you for this project video, any reason why I'm getting this message in my terminal when I type: npm create vite@latest: npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + npm create vite@latest + ~~~ + CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

[@oussamaben885]

did u find the solution ?

[@DucTaZenSurfer]

@@oussamaben885 Thanks for the check in, I did and finished the project but now I have two other problems. The site is Blurred permanantly and the API for the weather is not updating on my site. So I'm troubling shoothing that as we speak

[@puneetkorjani6648]

while connecting to the api i get the error message on console = Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec. what should i do?

[@samuelvictoralexander8770]

me too i get this error and i have been trying to debug it , pls have you solved the issue

[@samuelvictoralexander8770]

I need your help if you have solved it pls

[@robbcavalluzzi2797]

I found my issue after some digging - I used VSCode and just hit run Live server to launch the app. Instead I had to run 'npm run dev' from the console to run the app in dev mode. Launching directly form Live server runs the application as it would in production. as soon as I stopped the Live Server and ran it in dev mode everything worked again

[@jgalvan09]

@@robbcavalluzzi2797 amazing sir!!!!

[@chaitanyakarthik3536]

I finished the project but got stuck in deploying it to netlify, can anyone help??

[@Kareszrk]

Please make webauthn (fido2) authentication tutorial please please please

[@vizz7798]

I don’t understand why code doesn’t get the date from api

[@justingolden21]

27:44 "response" not "result" technically lol

[@mark601]

15:17 O_O

[@thesupergamer4535]

NPM i isnt downloading

[@fortunatmutunda4194]

15:17

[@nkechiuzoamaka5606]

You are so advanced and knowledgeable, however, please could be a little bit slower and more explicit with your HTML? I have watched this video about three times and I am still finding it difficult to understand the HTML.

[@robertsteele9705]

updated visual studio was the ticket...yeah i got it working!

[@rishiraj2548]

👍👍

[@0xtz_]

First 👌🏼

[@Colburrito213]

Claim your "here within an hour" ticket right here 🏆

[@Outplayedqt]

checking in

[@ari_archer]

lmao

[@KendaBeatMaker]

I missed it 🥹

[@zenistu5258]

Hi, Apologies for missing the timeline of 1 hour ticket. I will be checking in for 2 hour ticket. Thank you.

[@ari_archer]

@@zenistu5258 too bad, the show's over already :(

[@synster693]

you should change the name of the channel to complicated web dev

[@HrishiKW]

So True! I 100% resonate w u.

[@420troll4]

15:17 subliminal propaganda?!?

[@Retrohertz]

Using a JS MAP for the icon code was interesting and a great way to try out new JS features. I was trying not to just copy your work, and came up with an if/else instead before I saw the solution. It's about the same amount of code and does the same job. function weatherIcon(code) { if (code === 0) { return 'sun.svg'; } else if (code === 1 || code === 2) { return 'cloud-sun.svg'; } else if (code === 3) { return 'cloud.svg'; } else if (code >= 45 && code = 51 && code = 80 && code = 71 && code = 85 && code = 45 && code

[@gonzalofernandotorresdelfi561]

I got this instead of the cool vite stuff ******************************* PS C:\Users\torre> PS C:\Users\torre> npm create vite@latest npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. √ Project name: ... vite-projecto-1 √ Select a framework: » Vanilla √ Select a variant: » JavaScript Scaffolding project in C:\Users\torre\vite-projecto-1... npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\torre/package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\torre\package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\torre\AppData\Local pm-cache\_logs\2022-12-25T15_05_44_599Z-debug-0.log *******************************

[@NiceChange]

im having an issue . TypeError:Cannot main.js?t=1673416791393:7 TypeError: Cannot destructure property 'Symbol(Symbol.iterator)' of 'daily' as it is undefined. at parseCurrentWeather (weather.js?t=1673416791393:33:23) at weather.js?t=1673416791393:18:19

[@fresh8177]

Hello, I'm getting the same issue. Did you end up finding a solution?

[@NiceChange]

@@fresh8177 yes I did. It was a spelling issue I believe..

[@fresh8177]

@@NiceChange hmmm Okay! I'll have a real good look now. Thanks!

[@NiceChange]

Mine had nothing to do with a symbol..it was a wierd remnant in a line if code. Had to erase and retype...it was frustrating..

[@fresh8177]

@@NiceChange yeah I couldn't find anything so I retyped it aswell and now it's working. Thanks anyway!