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

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

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

[@darkmift]

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

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

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

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

[@intheshell35ify]

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

[@andrewdrewdrew1637]

i found it really confusing lol

[@shadowstar751]

Idk why you are so underrated

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

[@theisoj]

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

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

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

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

[@justingolden21]

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

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

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

[@martygo]

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

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

[@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])

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

[@soumyajitpal597]

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

[@monicamntanywa8333]

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

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

[@HMTRICKS2003]

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

[@bama2619]

Thank you, Kyle.Good educational project

[@batsunet]

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

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

[@TheOneHong]

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

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

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

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

[@markoweb24]

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

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

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

[@fulstak]

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

[@daniillitvinenko4348]

Thank you again. As always very helpful and informative.

[@hayescodm7782]

Can you show it without using api key?

[@abaysankarbcompa2179]

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

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

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

[@raufdimaampao3673]

Please make a tutorial for typescript generics

[@ankitdas2197]

this is done thank you for all the awesome js code

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

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

[@hawigirmachee4590]

can this API to search weather depending on city name

[@TheMetalMag]

Thanks for your videos as usual

[@khoitranquoc4445]

useful tutorials... thanks guy

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

[@ahouse73]

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

[@hassaneoutouaya]

Thank you so much !

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

[@tonmoyhussain6132]

Thank you 😃

[@tetyanagon3342]

TY!!! GJ!!!❤💛💙

[@saurabhbisht2238]

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

[@Elnomadic]

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

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

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

[@mnoquiao]

thanks brother.

[@ayanparmar3476]

Thanks!

[@WebDevSimplified]

No problem!

[@chaitanyakarthik3536]

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

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

[@vizz7798]

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

[@manemanoj3068]

Brother make a project for interview ready

[@leeizme]

you do need nodejs if you are starting this from complete scratch! if npm is not working thats why!

[@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 :(

[@alipasha7275]

Best ever

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

[@mark601]

15:17 O_O

[@Kareszrk]

Please make webauthn (fido2) authentication tutorial please please please

[@justingolden21]

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

[@thesupergamer4535]

NPM i isnt downloading

[@BrandonTraviss]

This video is dated and you can do it with vanilla JS seeing as you are modifying the index.html its self.

[@fortunatmutunda4194]

15:17

[@synster693]

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

[@HrishiKW]

So True! I 100% resonate w u.

[@0xtz_]

First 👌🏼

[@rishiraj2548]

👍👍

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

[@ComedyFreshz]

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

[@NiceChange]

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

[@ComedyFreshz]

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

[@ComedyFreshz]

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