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

Подписаться 1,6 млн

Просмотров 98 тыс.

50% 1

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

Опубликовано:

29 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 120

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

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

Год назад

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.

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

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

@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 8 месяцев назад

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

@daniillitvinenko4348 Год назад

Thank you again. As always very helpful and informative.

@darkmift Год назад

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

@bama2619 5 месяцев назад

Thank you, Kyle.Good educational project

@ankitdas2197 11 месяцев назад

this is done thank you for all the awesome js code

@bama2619 5 месяцев назад

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?

@shadowstar751 Год назад

Idk why you are so underrated

@TheMetalMag Год назад

Thanks for your videos as usual

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

@khoitranquoc4445 Год назад

useful tutorials... thanks guy

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

@intheshell35ify Год назад

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

@andrewdrewdrew1637 Год назад

i found it really confusing lol

@hassaneoutouaya Год назад

Thank you so much !

@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

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

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

@zeinalabdinsaker9301 4 месяца назад

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.

@ahouse73 Год назад

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

@HMTRICKS2003 Год назад

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

@tonmoyhussain6132 Год назад

Thank you 😃

@7DuRd3n Год назад

u r a blessing bru

@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 RU-vid channel with the country you live in and mention you want to buy one of my courses.

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

@markoweb24 Год назад

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

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

@TheOneHong Год назад

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

@mnoquiao Год назад

thanks brother.

@tetyanagon3342 7 месяцев назад

TY!!! GJ!!!❤💛💙

@raufdimaampao3673 Год назад

Please make a tutorial for typescript generics

@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 RU-vid tutorial?

@jgalvan09 11 месяцев назад

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

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

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

@ayanparmar3476 Год назад

Thanks!

@WebDevSimplified Год назад

No problem!

@meganweber5057 Год назад

Why do we import the css into the javascript?

@WarioNeila 26 дней назад

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?

@soumyajitpal597 7 месяцев назад

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

@alipasha7275 Год назад

Best ever

@monicamntanywa8333 8 месяцев назад

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

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

@fulstak Год назад

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

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

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

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

@abaysankarbcompa2179 7 месяцев назад

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

@0xtz_ Год назад

First 👌🏼

@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 8 месяцев назад

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

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

@hawigirmachee4590 Год назад

can this API to search weather depending on city name

@hayescodm7782 2 месяца назад

Can you show it without using api key?

@manemanoj3068 Год назад

Brother make a project for interview ready

@ay1ai146 11 месяцев назад

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?

@saurabhbisht2238 Год назад

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

@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

@vizz7798 Год назад

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

@chaitanyakarthik3536 Год назад

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

@Elnomadic Год назад

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

@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

@mark601 Год назад

15:17 O_O

@Kareszrk Год назад

Please make webauthn (fido2) authentication tutorial please please please

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

@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

@justingolden21 Год назад

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

@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 11 месяцев назад

@@robbcavalluzzi2797 amazing sir!!!!

@fortunatmutunda4194 Год назад

15:17

@robertsteele9705 Год назад

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

@rishiraj2548 Год назад

👍👍

@thesupergamer4535 Год назад

NPM i isnt downloading

@synster693 Год назад

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

@HrishiKW Год назад

So True! I 100% resonate w u.

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

@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