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

Показать описание

This is a sample project to learn and practice how to fetch data from an API and display it

/data/2.5/weather?q={city name}&appid={API key}

00:00:00 API Key
00:00:50 HTML PART 1
00:03:59 CSS
00:13:25 HTML PART 2
00:13:55 JavaScript
00:16:52 EventListener PART 1
00:18:02 displayError()
00:19:58 EventListener PART 2
00:21:30 getWeatherData()
00:24:12 displayWeatherInfo()
00:34:07 getWeatherEmoji()

#javascript #tutorial #course

Рекомендации по теме

Комментарии

// WEATHER APP

const weatherForm =
const cityInput =
const 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);

}
catch(error){
console.error(error);
displayError(error);
}
}
else{
displayError("Please enter a city");
}
});

async function getWeatherData(city){

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 =
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);

}

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;

card.textContent = "";
card.style.display = "flex";

}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<form class="weatherForm">
<input type="text" class="cityInput" placeholder="Enter city">
<button type="submit">Get Weather</button>
</form>

<div class="card" style="display: none">
</div>

<script src="index.js"></script>
</body>
</html>

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);
}

BroCodez

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

carolynlambert

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

ethanmccall

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

tzbcpni

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.

joshuacanapi

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 👌🏻

fet_

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

imadmb

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

twenty-fifth

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

jiyoungkim

Really that is amazing course I highly recommend it

nordgaming

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

AbirAz

You are amazing! I finished the course

kaan

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

Reedditt

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

kanak

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

tthamil

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

scrubbedem

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!

mrneedful

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!🤗🤗🥰🥰😘😘

Verakissyou

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

natnaeltaye

This was so much for me ! Anyways Thank you <3

Rose-gbku

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

How To Make Weather App Using JavaScript Step By Step Explained

Build a Simple Weather App with HTML CSS and JavaScript | Beginner Tutorial

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

Build A Weather App in HTML CSS and JavaScript | Weather App Project HTML CSS and JavaScript

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

Weather App using HTML CSS & Javascript | Weather App Javascript

Build a Weather App with HTML, CSS & JavaScript

Advanced Weather App with Javascript and Weather API | Complete Weather Application

Weather app by using HTML | CSS | JAVASCRIPT tutorial step by step

Build A Weather App with JavaScript - Step By Step | JavaScript Tutorial for Beginners

How to make Weather App using Openweathermap API | Javascript - Responsive Website

Build a Weather App With JavaScript

Create complete weather app javascript | Full weather app javascript | How to weather app javascript

Build a Realtime Weather App Using Open Weather API in Vanilla Javascript Full Project For Beginners

Build a Weather App using HTML CSS & JavaScript | Weather API JavaScript Project

Build a Weather App with Vanilla Javascript | Javascript Project for Beginners

ASMR Programming - Weather App With Javascript - No Talking

Weather App using HTML CSS and JavaScript

Creating a Weather App Using HTML, CSS and JavaScript 🔥

Simple Weather App using JavaScript | Build a Weather App with HTML, CSS & JavaScript

How To Make Weather App Using React JS 2024 | Weather API React Project Tutorial

Real-time Weather App Using Vanilla JavaScript and API

Creating a Weather app using OpenWeatherMap API in HTML, CSS, Javascript tutorial (Source code)

Build a Weather app using HTML, CSS & JavaScript in 2020