Build a JavaScript WEATHER APP in 30+ minutes! ☀️

Рет қаралды 59,540

Күн бұрын

Пікірлер: 85

@BroCodez Жыл бұрын

// WEATHER APP const weatherForm = document.querySelector(".weatherForm"); const cityInput = document.querySelector(".cityInput"); const card = document.querySelector(".card"); const apiKey = "YOUR API KEY"; weatherForm.addEventListener("submit", async event => { event.preventDefault(); const city = cityInput.value; if(city){ try{ const weatherData = await getWeatherData(city); displayWeatherInfo(weatherData); } catch(error){ console.error(error); displayError(error); } } else{ displayError("Please enter a city"); } }); async function getWeatherData(city){ const apiUrl = `api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`; const response = await fetch(apiUrl); if(!response.ok){ throw new Error("Could not fetch weather data"); } return await response.json(); } function displayWeatherInfo(data){ const {name: city, main: {temp, humidity}, weather: [{description, id}]} = data; card.textContent = ""; card.style.display = "flex"; const cityDisplay = document.createElement("h1"); const tempDisplay = document.createElement("p"); const humidityDisplay = document.createElement("p"); const descDisplay = document.createElement("p"); const weatherEmoji = document.createElement("p"); cityDisplay.textContent = city; tempDisplay.textContent = `${((temp - 273.15) * (9/5) + 32).toFixed(1)}°F`; humidityDisplay.textContent = `Humidity: ${humidity}%`; descDisplay.textContent = description; weatherEmoji.textContent = getWeatherEmoji(id); cityDisplay.classList.add("cityDisplay"); tempDisplay.classList.add("tempDisplay"); humidityDisplay.classList.add("humidityDisplay"); descDisplay.classList.add("descDisplay"); weatherEmoji.classList.add("weatherEmoji"); card.appendChild(cityDisplay); card.appendChild(tempDisplay); card.appendChild(humidityDisplay); card.appendChild(descDisplay); card.appendChild(weatherEmoji); } function getWeatherEmoji(weatherId){ switch(true){ case (weatherId >= 200 && weatherId < 300): return "⛈"; case (weatherId >= 300 && weatherId < 400): return "🌧"; case (weatherId >= 500 && weatherId < 600): return "🌧"; case (weatherId >= 600 && weatherId < 700): return "❄"; case (weatherId >= 700 && weatherId < 800): return "🌫"; case (weatherId === 800): return "☀"; case (weatherId >= 801 && weatherId < 810): return "☁"; default: return "❓"; } } function displayError(message){ const errorDisplay = document.createElement("p"); errorDisplay.textContent = message; errorDisplay.classList.add("errorDisplay"); card.textContent = ""; card.style.display = "flex"; card.appendChild(errorDisplay); } Document Get Weather body{ font-family: Arial, sans-serif; background-color: hsl(0, 0%, 95%); margin: 0; display: flex; flex-direction: column; align-items: center; } .weatherForm{ margin: 20px; } .cityInput{ padding: 10px; font-size: 2rem; font-weight: bold; border: 2px solid hsla(0, 0%, 20%, 0.3); border-radius: 10px; margin: 10px; width: 300px; } button[type="submit"]{ padding: 10px 20px; font-weight: bold; font-size: 2rem; background-color: hsl(122, 39%, 50%); color: white; border: none; border-radius: 5px; cursor: pointer; } button[type="submit"]:hover{ background-color: hsl(122, 39%, 40%); } .card{ background: linear-gradient(180deg, hsl(210, 100%, 75%), hsl(40, 100%, 75%)); padding: 50px; border-radius: 10px; box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.5); min-width: 300px; display: flex; flex-direction: column; align-items: center; } h1{ margin-top: 0; margin-bottom: 25px; } p{ font-size: 1.5rem; margin: 5px 0; } .cityDisplay, .tempDisplay{ font-size: 3.5rem; font-weight: bold; color: hsla(0, 0%, 0%, 0.8); margin-bottom: 25px; } .humidityDisplay{ font-weight: bold; margin-bottom: 25px; } .descDisplay{ font-style: italic; font-weight: bold; font-size: 2rem; } .weatherEmoji{ margin: 0; font-size: 7.5rem; } .errorDisplay{ font-size: 2.5rem; font-weight: bold; color: hsla(0, 0%, 0%, 0.75); }

@dsj40 8 ай бұрын

it’s changed from “city” to “lat” & “lon” on the website, could someone help me with the adjustment??

@-_SleepAndEat_- 8 ай бұрын

Bro can you do Kali Linux ?

@prathamtiwari1807 5 ай бұрын

bro dont know the concept of git

@yesyes628 4 ай бұрын

@@dsj40 yes

@carolynlambert8797 11 ай бұрын

you explain things so much easier than my online Coursera professors! thanks so much!!

@Dogefosters 7 ай бұрын

He's him 🎉

@trekkingBean 9 ай бұрын

The Best Course on the Internet.. you'll always be remembered as a part of my learning journey. Thank you so much again 🙏🏻

@ethanmccall7015 6 ай бұрын

I was able to follow along and build this. If I can, anyone can. You're a great teacher bro.

@MaxPrice765 4 ай бұрын

I can’t

@damiancruzpino6988 Ай бұрын

@@MaxPrice765 If you followed the full course you should.

@joshuacanapi6387 5 ай бұрын

Done watching! I managed to watch all the videos in just one week so that I wouldn't get bored or overwhelmed. It was worth every minute. I learned a lot. I definitely recommend this to all aspiring developers out there! Thank you, and I hope you can create an Angular course. Thank you more power Bro Code.

@halith_s 5 ай бұрын

Will this playlist cover the fundamentals of JavaScript and essential topics for web development? I already know Node.js and React, but sometimes I feel that my JavaScript fundamentals are weak. Will this playlist help strengthen my understanding and boost my confidence in JavaScript?

@joshuacanapi6387 4 ай бұрын

@@halith_s Yes

@jiyoungkim9258 Жыл бұрын

Have you read my brain? I literally searched 'weather app JavaScript' in your channel haha Thank you so much!

@imadmb154 10 ай бұрын

thank you bro for this amazing course, just finished the js course!

@techie3_25 6 ай бұрын

Can't believe I just completed the whole tutorial 😭💯 to be honest JS is more difficult than python 😅 but I think with more practice I'll be fine 🙂 thanks @BroCode, you're a great teacher 👌🏻

@nord4gaming454 10 ай бұрын

Really that is amazing course I highly recommend it

@kaan8924 10 ай бұрын

You are amazing! I finished the course

@AbirAz204 9 ай бұрын

Thank you so much for the courses that you post! keep it up man, really helpful!

@twenty-fifth420 Жыл бұрын

As someone who is building a game engine with SDL, but having to remember to use just a little JS with my Rails, I want some byte sized videos like this one. Especially since I do not want to learn too much JS, just enough to get by. I kind of have PTSD from my Java days and unfairly blame Mocha for it 😂 One like. 👍 One prayer 🙏🏻 One comment for the youtube algorithm. 🎉

@rbcookingchannel-cg7xs 2 ай бұрын

Helpful video. Thanks for sharing

@tthamil 6 ай бұрын

Extremely super Bro with clear explanations and neat codes. Thanks🙏

@kanak7244 7 ай бұрын

just wanted to say thank u this was a very good playlist

@Miffothefreak Жыл бұрын

@BroCodez thank you for your hardwork to help us learn for free and i wish you a happy new year

@mrneedful8886 10 ай бұрын

thx a lot finished it in record time almost 8hrs hehehehe, buut worth the time spend!!! looking forward for many more like this thx again!

@scrubbedem6951 Жыл бұрын

энд монголоор коммэнт бичлээ. Таны бичлэгүүд монгол сурагчдад ч бас зөндөө тусламж үзүүлж байгаа шүү, BroCode доо баярлалаа.

@nakamaazashiro 5 күн бұрын

ty for this js tutorial course!

@user006_SKVN8G6LH 9 ай бұрын

Thank you for amazing course ! ❤❤

@Pdrum2 7 ай бұрын

Actually clear descriptions.

@Mr.Rizzzler 3 ай бұрын

Thank you for all the videos you make.

@Lyk0ss Жыл бұрын

The man keeps delivering

@natnaeltaye 8 ай бұрын

i just finished the js playlist , thank you bro for sharing this knowledge with us, i hope you make TypeScript course.

@princesstechideas 7 ай бұрын

Nice tutorial 😊 great 👍 bro

@Matrix-z2s 10 ай бұрын

Hi,there! Instead of creating so many elements , can we create a const with a template literal with that HTML and assign it as the innerHTML at the .card div? Thanks for all your work that you do for us!🤗🤗🥰🥰😘😘

@BishanTamang-rk5ji Жыл бұрын

Make java 2024 plz....Big fan love from Nepal

@That-guy-there1 2 ай бұрын

If you use Freedom units and want to skip the conversion part, you can add "&units=imperial" at the end of your api, right after the API key part and it will convert it for you

@rod5073 11 ай бұрын

ths course is awesome, just an advice, learn php makes the difference but node js is so demanded too

@Aalizzw Жыл бұрын

This video is really great, I like it very much 🎉

@AvgNav 9 ай бұрын

Bro is a Gigachad FR!

@schmickley8082 Жыл бұрын

You’re a godsend bro

@aayanahmad8252 Жыл бұрын

bro your are the best thank you

@syedmajid3202 5 ай бұрын

Thanks for video

@rblm8 Жыл бұрын

thank you sm !

@Dylan-Ickowicz 6 ай бұрын

Thanks! It works!!

@Rose-gb1ku 5 ай бұрын

This was so much for me ! Anyways Thank you

@Amouranthclips460 Жыл бұрын

whats the best api testing for forntend? like fakedata

@mayurijindal9805 Жыл бұрын

Firstly thanks for your hardwork can you please build a project by using javascript , react, taillwand css, i want to build a project for my placements Happy new year

@ZweNaungYoe-nf9us Жыл бұрын

Can you make localStorage lesson with Project Sir...

@esthertoyin8000 11 ай бұрын

the video is nice and i understand it

@GreatestOneEver Жыл бұрын

Subbed!

@Mustafa-v2w8v 10 ай бұрын

the style.css didn't work with me how did it worked with you?

@ridrox 2 ай бұрын

Please create the entire course of TypeScript

@rbcookingchannel-cg7xs 2 ай бұрын

I just finished weather app project

@dacithethird6842 2 ай бұрын

i can't get these emojis to display correctly

@jondo-vh8tx 8 ай бұрын

you rock llike always

@radhikaagarwal8794 6 ай бұрын

Can anybody tell me my error display function and error query is not working...can anybody explain why?? I followed the same code

@DEVSevenSeven 16 күн бұрын

SAME HERE got the same issue :(

@Drag.mp4 Жыл бұрын

Bro code, we need a lua course, pls. Hugs from Brazil

@ebongsweetness8853 Ай бұрын

What do i do if my api is working on chrome but it us not displaying on my vscode 😢

@carolynlambert8797 11 ай бұрын

can you add a wordpress development course? Im learning your PHP course its at the core of wordpress thanks!

@minilanjiao Жыл бұрын

Hey bro code, i wanted to ask if you could do a lua coding course too! Ill be very appreciate it because im trying to learn lua and im looking for a very good tutorial like yours videos, i already watched and learn half course of your python!