Cách tạo ứng dụng thời tiết bằng JavaScript từng bước một

0:00 hi guys welcome back to another video

0:02 today in this video we will learn how to

0:04 create a weather app using HTML CSS and

0:07 JavaScript this will be very good

0:09 JavaScript project for your resume or

0:12 portfolio here you can see we have this

0:14 search box where we can enter this city

0:17 name let me write another city name here

0:21 and click on the search icon you can see

0:23 it will update the weather icon

0:26 and temperature city name and

0:30 humidity and wind speed

0:33 let me write another city name here

0:36 you can see it is changing

0:39 let me write another city name

0:43 you can see this icon is also updating

0:46 and you can see the current temperature

0:50 and humidity and wind speed we will

0:54 create this beautiful weather app using

0:56 HTML CSS and JavaScript so keep watching

0:59 this video till the end and before

1:01 starting this video please hit the like

1:03 button and also subscribe my channel

1:05 easy tutorials now let's start the video

1:11 here I have this folder and in this

1:13 folder I have added one HTML file one

1:15 CSS file and another folder called

1:17 images and in this one you can see some

1:20 icons

1:21 you can find all these icons download

1:23 link in the video description

1:26 and let me open these files with my code

1:29 editor which is Visual Studio code you

1:31 can use any code editor

1:33 so this is the HTML file where I have

1:35 added the basic HTML structure

1:37 and this one is a CSS file here I have

1:41 added the margin padding font family and

1:43 box sizing these CSS properties are

1:46 applicable for all the htfl element in

1:49 this HTML file I have added this link

1:51 tag with the file name style.css so it

1:55 will connect the HTML and CSS file and

1:57 here we have the web page title whether

2:00 app easy tutorials now we will add the

2:03 CSS so let's come back to the CSS file

2:06 and here let's add body

2:10 and here we will change the background

2:12 so let's add one background color here

2:16 after adding this let's come back to the

2:18 folder and open this HTML file with any

2:21 web browser

2:23 so you can see this dark color on the

2:25 complete web page let me close this

2:27 browser and I will open it with the

2:30 Visual Studio code extension called live

2:33 server

2:35 so you can see the same webpage again

2:37 which is in dark color so this webpage

2:40 will be refreshed automatically whenever

2:42 we will add any changes in the code file

2:44 after that let's come back to the code

2:46 file and in this HTML file within this

2:49 body tag let's create one div with the

2:51 class name card

2:53 within this card we have to create one

2:55 search box so here we will add one div

2:57 with the class name search

3:01 and within this search we have to add

3:03 one input box and one search button so

3:07 here we will add the input field

3:09 input type will be text and here we will

3:12 add the placeholder so in this

3:15 placeholder I will write the text

3:18 enter city name

3:21 and here we will add

3:25 spell check false

3:27 now in the next line we will add one

3:30 button so here we will add button and in

3:34 this button we have to add one icon so

3:37 let's add the IMG tag and file path of

3:40 the search icon so it is Images slash

3:44 file name

3:46 search dot PNG

3:50 after adding this let me come back to

3:53 the website

3:54 and here you can see this

3:56 input field and this search icon

4:00 after that we have to add some CSS so

4:02 here you can see we have the class name

4:04 called card so write this class name

4:06 here

4:08 in this CSS file and here we will add

4:10 some CSS properties for this card

4:32 in this card I have added the max width

4:34 and width then we have added the

4:37 background in this background I have

4:38 added the linear gradient color and this

4:41 is the colored white that will be the

4:44 text color inside this card and after

4:46 that we have added the margin 100 pixel

4:49 from top and 0 from bottom left right

4:52 Auto then we have added the Border

4:54 radius that will make the corners round

4:55 and we have added some padding that will

4:57 be a space inside the card and text

5:00 align center now you can see this

5:02 gradient color in this box and this box

5:04 is in the center and now we will add the

5:08 CSS for this search so let's come back

5:10 and here you can see we have the class

5:12 name search

5:14 so write this class name here

5:17 and for this search we will add width

5:21 width will be 100 percent

5:23 then we will add the display flex and

5:27 align items

5:30 Center

5:31 then we will add justify content

5:34 this will be space between

5:37 so the

5:40 input field and search button will be

5:42 aligned horizontally side by side

5:45 after that we will add the same class

5:47 name and in this one we have added the

5:49 input field so write input

5:52 and now we will add the CSS for this

5:54 input field

6:09 for the input field I have added border

6:11 0 outline 0 and background color then

6:14 color then I have added some padding and

6:17 height and the Border radius then Flex 1

6:21 and margin right and font size after

6:24 that you can see this input box is

6:27 looking good next we have to design this

6:29 button so let's come back and here we

6:32 will add the same class name search

6:34 and in this one we have the button

6:38 so let's add the CSS for the button here

6:41 also we will add the same thing

6:43 border 0 outline 0 and background after

6:46 that we will add the bottom radius

6:49 so the Border radius will be 50 it will

6:52 be Circle

6:54 next we will add the width

6:56 60 pixel and height also 60 pixel

7:01 and cursor

7:03 pointer

7:07 in this button we have the search icon

7:10 with the IMG tag so write IMG

7:13 and for this search icon we will add

7:17 width so divids will be 16 pixel after

7:21 adding this let's come back to the

7:23 website

7:23 and now you can see this input field and

7:27 search button is also looking good

7:31 next we have to display the weather

7:34 detail of any City so first we will add

7:36 some random details then we will update

7:39 it using the API so let's come back and

7:42 in this HTML file

7:44 after this search we will add another

7:47 div with the class name weather

7:54 and in this one let's add the IMG tag

7:58 file path of the image so here we will

8:01 add any random image so let's add rain

8:07 dot PNG

8:11 and here we will add the class name so

8:13 the class name is weather icon

8:19 after that we have to display the

8:20 temperature so here we will add the

8:23 temperature in H1 tag and we will add

8:25 one class name also so let's add the

8:27 class name temp

8:29 and here we will add the temperature 22

8:34 degree celsius so let's copy the degree

8:37 celsius from Google

8:41 we will copy from here

8:47 so you can right click this

8:49 22 degree celsius and after that we will

8:52 add

8:53 the city name in h2 tag so in this one

8:57 we will add one class name City

9:01 and here we will add any city name

9:13 and after adding this let's come back to

9:16 the website

9:17 you can see this weather icon with a

9:20 temperature and city name

9:22 so next we have to display the humidity

9:26 icon and wind icon and the value so

9:30 let's come back

9:32 after this H2 let's create another div

9:35 with the class name details

9:39 in this details we have to create two

9:41 columns so let's add

9:43 call

9:44 this is for the first column

9:46 and in the first one let's add one image

9:51 so I will add the IMG

9:54 file path

10:01 humidity dot PNG and after that we will

10:04 add

10:05 the text in div so let's create one div

10:09 and in this one we will add P tag and

10:12 one class name

10:18 and let's add 50 percent

10:24 and here we'll add another text

10:30 now we will duplicate this column

10:35 here we will update the image it will be

10:39 wind

10:43 here also will change the class name

10:46 it will be wind

10:49 and here we will update the text

10:52 wind speed

10:56 here we'll add

10:59 15

11:00 kilometer per hour

11:06 foreign

11:08 so in this weather we have the image

11:12 with the class name weather icon so

11:14 let's copy this one

11:16 and add it here

11:19 for this weather icon we will add the

11:21 width it will be 170 pixel

11:24 then we will add the margin from the top

11:28 30 pixel

11:29 after that we have the

11:32 title in H1 H2 so

11:35 within this

11:38 weather we will add H1

11:41 for this H1 let's add the font size it

11:45 will be 80 pixel

11:47 and font weight

11:50 500.

11:54 let's duplicate it and here we will add

11:57 H2

11:58 and for this S2 we will update the font

12:03 size it will be 45 pixel

12:05 then font weight is 400

12:08 and next we will add the margin top

12:12 minus 10 pixel

12:16 now the size for the

12:19 weather icon and text is perfect

12:23 now let's come back and here we have the

12:26 class name details let's copy this and

12:29 add it here in this CSS file for this

12:31 detail we have to add

12:34 display Flex because we have to create

12:37 two column align items Center

12:40 and justify content space between

12:44 then we will add some padding

12:47 padding will be 0 and 20 pixel 20 pixel

12:51 from left and right side then we will

12:53 add the margin from the top to add space

12:56 from the top

12:57 so margin top 50 pixel

13:02 so now you can see this humidity in the

13:05 left side and wind speed in the right

13:07 side

13:08 next we have to update the size of these

13:11 icons and text so let's come back and

13:14 within this details we have created

13:17 columns so let's add that class name

13:19 call and in this one we will add display

13:21 Flex

13:25 align items Center and

13:28 text align

13:30 left

13:33 and

13:35 then we will add call IMG because we

13:38 have added the icons with the IMG tag

13:40 width will be 40 pixel

13:47 then margin from the right side

13:50 it will be

13:52 10 pixel

13:56 now you can see perfect size for these

13:58 icons next we will add the CSS for this

14:00 text which is 50 and

14:02 15 kilometer per hour so let's come back

14:05 and here we have the class name for this

14:07 text which is humidity

14:10 and wind so at this class name here

14:15 comma wind

14:19 here we will update the font size

14:22 font size is

14:24 28 pixel and margin top will be minus 6

14:29 pixel

14:30 now this design is looking perfect next

14:33 we have to update this weather

14:35 information whenever you will enter any

14:38 city name for that we will use the API

14:40 so let's open Google and

14:46 open this website

14:48 open weather map dot org

14:50 here you will get the free API here you

14:53 have to create an account

14:55 so let's click on this sign in

15:00 here we will click on create an account

15:03 create a new account enter the username

15:05 email ID password and repeat password

15:12 here in this company field I will add my

15:14 name and purpose is education save it

15:19 will send you a verification email open

15:21 your email ID and verify the email then

15:24 click on API keys

15:26 here you will get this API

15:29 and we have to use this API in our code

15:32 file

15:33 here in this navigation menu you can see

15:36 API let's open this page in new tab

15:41 scroll down and click here

15:44 current weather data API doc let's click

15:47 on this link

15:50 here to scroll down and come here

15:53 built-in API request by city name so

15:57 just copy this one

15:59 and paste it in the URL

16:03 here you can add any city name let's add

16:08 Germany and here you have to enter the

16:11 API key so let's add this API key

16:16 here and click enter

16:18 here it is displaying the error message

16:21 invalid API key it means the API is not

16:26 activated now it may take couple of

16:29 hours to activate the API key so wait

16:33 for some time let the API key activated

16:36 after activation of the API key you will

16:39 see the weather information in this Json

16:41 format here you can see the CD name that

16:45 we have added in the URL then you can

16:48 see the temperature here it is not in

16:51 the degree Celsius

16:52 so to get the temperature in degree

16:55 celsius let's come back and here you

16:58 will see

16:59 option to add the unit

17:04 you can see we have the standard metric

17:08 and Imperial and the by default unit is

17:13 standard so we have to add the metric

17:16 unit so

17:18 let's come to this URL and here we will

17:20 add

17:23 units equal to

17:27 metric

17:33 after that you will see the temperature

17:36 information in degree Celsius

17:39 and if I change the

17:42 city name here

17:47 you can see

17:49 temperature is changing and the city

17:51 name is changing

17:53 so we have to display these data on our

17:56 app so let's copy this and come back to

18:01 the code file in this HTML file Above

18:04 This closing body tag here we will add

18:07 script

18:09 script open and closing tag and within

18:13 this let's create one

18:16 variable with the const keyword

18:21 let's add the name

18:24 API key

18:27 here we will add the API key

18:32 and next we will add one more

18:35 const and it will be API

18:40 URL

18:46 here we will add the API URL

18:50 so let me add the complete URL in this

18:54 one and from here we will remove this

18:58 API key

19:00 this one

19:02 let me remove this

19:05 and add it here we have added the API

19:08 key in this variable

19:10 and remove this app ID

19:18 and remove this city also

19:21 so

19:23 in this one we have the

19:27 URL and we have added the unit metric in

19:33 this URL we have just added the

19:36 unit metric and let's add DCd also for

19:39 now here we will add and Q equal to and

19:44 let me add one city name

19:50 Bangalore

19:52 and after that

19:54 here we will add one async function

20:01 and we will add the name for this

20:03 function

20:04 it will be check whether

20:20 const response equal to await Fetch and

20:23 in this fetch we will add the URL which

20:28 is API URL

20:30 so at this API URL in this one

20:36 and at the end of this

20:39 API URL we have to add the API key also

20:44 so to add that API key we will add this

20:47 backtick

20:50 this is not code this is back tick

20:53 and in this one let's add

20:56 and

20:58 app ID

21:00 equal to

21:10 this API key

21:14 like this

21:16 in the next line we will add

21:19 Val

21:21 data equal to

21:24 a weight response

21:27 dot Json

21:32 now this data will have all the

21:34 information about the weather

21:36 from this particular city which is

21:38 Bangalore so let's display this data on

21:42 our web page so let me display it in our

21:46 console so for that we will add console

21:49 DOT log

21:51 and data

21:54 that's it after adding this let's come

21:57 back to the website

21:59 and

22:01 inspect

22:03 then click on console

22:09 here it is not displaying anything so

22:11 first we have to call this function so

22:14 just copy this one

22:16 and add it here just above this closing

22:19 script tag

22:22 so whenever the web page will be loaded

22:24 it will call this function so now again

22:28 come back to the website

22:32 you can see it is displaying the weather

22:35 information in this Json format in our

22:37 browser console

22:39 so let's expand this one here we have

22:43 the

22:44 Main and in this main we have the temp

22:47 which is temperature

22:49 we have the name Bengaluru then we have

22:53 the weather and in this weather

22:56 we have the added one and in the first

22:59 array which is index 0 we have the

23:01 weather condition like clouds and here

23:04 we have the wind and in this wind we

23:07 have the wind speed

23:08 and we need the humidity it will be

23:13 there in this one let's open this Main

23:16 and in this Main

23:19 you can see humidity 32 so we got all

23:23 the informations now we have to display

23:26 this information on our app so let's

23:29 come back we have to update this temp

23:32 City humidity and wind information

23:36 according to the data coming from the

23:38 API so we will select all these element

23:42 and we will update the data so

23:44 we will add

23:50 document dot query selector dot CT so it

23:54 will select the CT element and inner

23:57 HTML will update the text written in

24:00 this element and here we will add the

24:04 data

24:05 which is here this data then Dot and in

24:10 this data let's come back to the web

24:13 page and you can see we have

24:18 name

24:20 directly we have the name

24:22 so let's come back and here we will add

24:24 data dot name

24:27 so it will update the

24:29 city name now duplicate it and here we

24:32 will add

24:34 the next one which is temp

24:37 and to get the temp data temperature

24:40 data let's come back and here you can

24:42 see we have the temperature inside this

24:45 Main

24:46 first we have the main and in this main

24:48 we have the

24:50 temp so let's come back and here we will

24:54 add data dot main Dot

24:57 temp

25:00 now again duplicate it here we will add

25:03 humidity

25:06 and here also we have the main and

25:10 humidity

25:14 it is here Main and humidity next we

25:18 need the wind information so it is here

25:23 wind then speed

25:25 so again come back let's duplicate it

25:29 here we will add wind

25:34 class name and here we will add data dot

25:39 wind dot speed

25:45 after adding this

25:46 now we will come back to the website

25:49 and you can see it is displaying the

25:52 correct data which is

25:55 26.7 then Bengaluru

25:58 humidity 31 and wind speed 4.63

26:04 but we need the percentage degree

26:07 celsius and kilometer per hour so let's

26:10 come back and after this step we will

26:13 add Plus

26:17 and copy this degree Celsius

26:26 in this humidity we will add plus colon

26:30 percentage

26:36 and in this speed let's add the Plus

26:39 and column a space

26:43 kilometer per hour

26:47 so you can see this one

26:50 degree Celsius

26:52 then 31 percent and

26:55 4.63 kilometer per hour wind speed next

26:58 we have to round off this

27:01 temperature so it will display only the

27:04 integer either 26 or 27 degree celsius

27:07 so let's come back and here in this stem

27:12 let's add

27:15 math dot round

27:20 and in this one add this data main temp

27:30 that's it round dot math data main temp

27:34 after that you can see 27 degree Celsius

27:38 right now it is displaying the

27:39 information of the particular City that

27:42 we have added here in this

27:46 API link but we need to enter the city

27:50 name in this input box and that City

27:53 information will be displayed in this

27:55 app so let's come back and here we will

27:58 remove this

27:59 Bangalore remove the city name

28:03 we will add the city name through this

28:04 check weather function so here we will

28:06 add

28:07 City and in this fetch we will add API

28:11 URL plus and

28:16 City Plus

28:18 we are adding this city here

28:22 now whenever we will call this check

28:25 weather function we have to pass the

28:27 city name so this city name will come

28:30 from the input field

28:33 so after this

28:36 const here we'll add two other variables

28:39 so let's add

28:41 const

28:44 search box

28:48 equal to

28:50 document Dot query selector

28:57 this class name

28:59 search and in this search we have the

29:01 input and button so write this one

29:05 dot search

29:08 input so it will select the input field

29:12 duplicate this line and here we will add

29:17 search BTN

29:22 and it will be button

29:27 when people will click on the search

29:29 button it should send the city

29:31 information in this check whether

29:33 function so

29:35 search BTN dot add event listener

29:40 and the event is Click

29:45 comma

29:48 Arrow function

29:54 in this function we will call this check

29:57 weather so add this here

29:59 and this check weather

30:01 will have the city information written

30:05 in the input field so to get the data

30:08 written in the input field We'll add the

30:12 search box Dot

30:15 value so this search box dot value will

30:19 give the city name written in the input

30:22 field and it will pass the city name in

30:25 this

30:27 check whether and it will be added in

30:30 this

30:33 API and it will give the information of

30:36 the particular city after updating all

30:39 these things let's come back to the

30:41 website and here it is displaying the

30:43 default information that we have added

30:45 in the HTML code but if I write any city

30:48 name here

30:52 and click on the search icon you can see

30:54 it is updating the

30:57 weather information 27 degree celsius

31:00 Bangalore to 30 percent and 5.66 let me

31:04 write another city name

31:09 New York

31:11 it is displaying the correct weather

31:14 information

31:15 right now it is not updating the

31:18 image here because we have not added any

31:21 code to update the weather icon or

31:24 weather image so to update this weather

31:27 image let's come back and after updating

31:30 these text we have to update the image

31:33 so we will update the image according to

31:36 the weather condition so let me come

31:39 back and if I open this here you can see

31:43 we have the weather and in this weather

31:46 we have the main this main is the

31:49 weather condition right now the weather

31:51 condition is clear

31:52 and if I open this one

31:55 and here you can see weather condition

31:57 is clouds so they are multiple weather

32:01 conditions

32:02 you can check on this website so I

32:05 already have the images for all the

32:07 weather conditions which is this one

32:10 so we will update these images according

32:13 to the weather condition now let's come

32:15 back and here we will add if

32:20 data dot weather

32:26 zero

32:31 you can see this weather in this zero

32:34 index then we have main so let's come

32:36 back and here we are adding data dot

32:39 weather 0 dot Main

32:43 so this main will keep the weather

32:45 condition

32:47 we will check if it is clouds

32:53 like this so if it is clouds then we

32:56 have to add the cloud image so we will

33:01 fetch this element

33:03 where it is

33:05 this one weather icon

33:09 so here we will add

33:11 const

33:13 weather icon

33:19 equal to

33:21 document dot query selector

33:26 wither icon

33:28 and

33:30 add it here wither icon

33:33 dot SRC it will update the source file

33:37 equal to

33:38 the exact file path

33:41 Images slash

33:45 clouds dot PNG

33:50 you can see in this images folder I have

33:53 the

33:54 clouds.png so when the weather condition

33:57 is clouds it will display the clouds

34:00 image now let me add the other images

34:02 for other weather condition

34:22 so we have added different image for

34:25 different weather condition clear then

34:27 missed drizzle so after adding this

34:30 let's come back to the website

34:33 and here if I write

34:37 Bangalore

34:39 it is giving an error so let's come back

34:42 and

34:43 here

34:45 we have added the class names so we will

34:47 add one dot also after adding this dot

34:50 wizard icon let's come back and if I

34:53 enter the city name

34:56 search you can see the weather icon is

35:00 also changing let's add another city

35:02 name

35:07 here also we have this same icon

35:17 we have the same cloudy icon

35:20 then New York

35:26 you can see this icon so it is updating

35:29 all the information when we entered the

35:32 city name and click on the search icon

35:34 now let's refresh the website and by

35:36 default we are getting all these

35:38 information so we have to hide this

35:40 information and it will be displayed

35:42 when you will enter any city name so

35:46 let's come back and here we have the

35:49 weather

35:50 so let's copy this one add it here in

35:52 the CSS file and for this weather we

35:55 will add display display will be none so

35:58 it will be hidden you can see we have

36:00 only the search bar and this search icon

36:04 and if I enter any city name here and

36:07 click on search icon it will not display

36:09 the detail because we have added the

36:11 display none so we have to make this

36:14 display block when we will enter the

36:18 city name so let's come back here we can

36:20 remove this console

36:24 and after this

36:26 image

36:28 let's add document

36:32 dot query selector

36:36 dot weather

36:42 dot Style

36:49 dot display

36:54 so it will be block

36:58 so after adding this if I write the city

37:00 name here

37:04 click on search icon it is displaying

37:06 the information

37:07 zero degree Celsius

37:10 and we have the icon here

37:14 website it is hidden and if I enter the

37:17 another city name

37:21 you can see it is just playing different

37:22 icon

37:24 temperature city name and other

37:26 informations

37:28 next we have to add one more thing

37:30 suppose we enter the wrong city name

37:33 and click on the search icon so it is

37:37 displaying undefined and the previous

37:39 data so it should display one error

37:42 message so let's come back and

37:45 here we have the search and after the

37:48 search we will add one div

37:51 with the class name error

37:54 in this one we will add one message

37:59 invalid

38:01 city name

38:04 like this so you can see this message

38:06 here invalid city name

38:09 so first we will add the CSS for this

38:11 error let's copy this one

38:15 add it here in the CSS file

38:18 and here we'll add

38:20 text

38:22 align left

38:24 then margin left

38:28 it will be 10 pixel

38:31 then

38:32 font size will be 14 pixel

38:35 and margin top

38:38 10 pixel

38:41 so it is displaying here so if I refresh

38:44 the website this error message is

38:46 displaying by default so we have to hide

38:49 this error message and it will be

38:50 displayed whenever user will enter any

38:53 wrong city name so

38:56 let's come back and here also we will

38:58 add display

38:59 none so it is hidden you can see we have

39:02 only search bar and search icon there is

39:05 no error message but if I enter any

39:07 wrong city name here

39:09 it is not displaying anything so let's

39:12 come back we have to display the error

39:15 message here we have added const

39:16 response await fetch URL so

39:20 here we have to check the Response Code

39:22 so we will add if

39:27 response dot status

39:32 equal to 4 not 4. it means if the city

39:36 name is invalid it will give the status

39:38 404 then we have to display the error

39:41 message and we have to hide the weather

39:43 information we will add

39:45 document dot query selector

39:52 error

39:54 dot Style

39:55 dot display

39:59 equal to

40:01 block

40:04 so that error message will be displayed

40:06 let's duplicate it and it will be

40:09 weather and it will be none

40:12 so whether information will be none that

40:15 will be hidden here we are adding if so

40:18 again we will add else

40:23 and let's add the remaining thing in

40:25 this else condition

40:30 copy this one

40:39 and paste it inside this else

40:46 so when the status code is not equal to

40:49 404 then only it will update the data

40:53 and we need one more thing just copy

40:55 this

40:57 display block and add it here

41:00 and here we will add

41:02 display none so that error message will

41:06 be hidden when it is displaying the data

41:08 after adding this again come back to the

41:10 website and if I enter the

41:13 city name

41:17 click on the search icon it is

41:19 displaying the correct information if I

41:21 enter the wrong city name here

41:25 and click on the search icon you can see

41:29 it is displaying invalid city name

41:31 let's add another city name

41:35 search

41:37 so finally we have completed this

41:39 beautiful weather app using HTML CSS and

41:42 JavaScript I hope this video will be

41:44 helpful for you if you have any question

41:46 you can ask me in the comment section

41:48 please like and share this video and

41:50 also subscribe my channel easy tutorials

41:52 to watch more videos like this one thank

41:54 you so much for watching this video

0:00 Xin chào các bạn, chào mừng trở lại với một video nữa trên kênh. Hôm nay, chúng ta sẽ cùng nhau tạo một ứng dụng thời tiết bằng HTML, CSS và JavaScript. Đây sẽ là một dự án JavaScript rất tốt để bạn đưa vào CV hoặc portfolio của mình đấy.

0:12 Như các bạn thấy, chúng ta có một ô tìm kiếm để nhập tên thành phố. Để mình thử nhập một thành phố khác và nhấn vào biểu tượng tìm kiếm nhé. Các bạn có thể thấy biểu tượng thời tiết, nhiệt độ, tên thành phố, độ ẩm và tốc độ gió đã được cập nhật.

0:33 Để mình nhập một thành phố khác xem sao. Đó, nó lại thay đổi rồi. Thử một thành phố nữa nhé. Các bạn thấy không, biểu tượng cũng thay đổi theo, và nhiệt độ, độ ẩm, tốc độ gió hiện tại cũng được cập nhật.

0:54 Chúng ta sẽ tạo ứng dụng thời tiết tuyệt vời này bằng HTML, CSS và JavaScript, nên hãy xem hết video này nhé. Trước khi bắt đầu, đừng quên nhấn nút thích và đăng ký kênh Easy Tutorials của mình nha. Giờ thì bắt đầu thôi nào!

1:11 Ở đây mình có một thư mục, trong đó có một file HTML, một file CSS và một thư mục "images" chứa các biểu tượng. Các bạn có thể tìm thấy link tải tất cả các biểu tượng này trong phần mô tả video nhé.

1:26 Mình sẽ mở các file này bằng trình soạn thảo code Visual Studio Code. Các bạn có thể dùng bất kỳ trình soạn thảo nào quen thuộc. Đây là file HTML với cấu trúc HTML cơ bản, còn đây là file CSS.

1:41 Trong file CSS này, mình đã thêm margin, padding, font chữ và box-sizing. Các thuộc tính CSS này sẽ áp dụng cho tất cả các phần tử HTML trong file HTML. Mình cũng đã thêm thẻ link để kết nối file HTML và CSS bằng cách trỏ đến file "style.css". Tiêu đề của trang web là "Weather App - Easy Tutorials".

2:00 Bây giờ chúng ta sẽ thêm CSS, vậy hãy quay lại file CSS và thêm thuộc tính cho thẻ "body". Ở đây, mình sẽ thay đổi màu nền.

2:16 Sau khi thêm xong, hãy quay lại thư mục và mở file HTML bằng trình duyệt web bất kỳ.

2:23 Các bạn có thể thấy trang web có màu tối. Để mình đóng trình duyệt này và mở lại bằng extension Live Server của Visual Studio Code nhé.

2:35 Các bạn thấy đó, trang web vẫn có màu tối. Ưu điểm của Live Server là trang web sẽ tự động refresh mỗi khi chúng ta thay đổi code.

2:44 Tiếp theo, quay lại file code và trong thẻ "body" của file HTML, tạo một thẻ "div" với class là "card".

2:53 Bên trong thẻ này, chúng ta sẽ tạo một ô tìm kiếm. Vậy nên, mình sẽ thêm một thẻ "div" với class là "search". Trong ô tìm kiếm này, chúng ta cần một ô nhập liệu và một nút tìm kiếm.

3:07 Mình sẽ thêm một trường nhập liệu ("input"), với type là "text". Mình cũng sẽ thêm placeholder để hiển thị gợi ý, ví dụ "Nhập tên thành phố". Và mình sẽ tắt kiểm tra chính tả ("spellcheck").

3:27 Tiếp theo, mình sẽ thêm một nút ("button"). Bên trong nút này, mình sẽ thêm một biểu tượng bằng thẻ "img" và trỏ đến đường dẫn của biểu tượng tìm kiếm: "Images/search.PNG".

3:50 Sau khi thêm xong, mình sẽ quay lại trang web để xem. Các bạn có thể thấy ô nhập liệu và biểu tượng tìm kiếm đã xuất hiện.

4:00 Bây giờ, chúng ta cần thêm CSS để trang trí. Các bạn thấy class của thẻ là "card", vậy mình sẽ viết class này trong file CSS và thêm các thuộc tính CSS cho nó.

4:32 Trong thẻ "card", mình đã thêm "max-width", "width", và "background". Màu nền là một gradient tuyến tính. Màu chữ bên trong thẻ sẽ là màu trắng.

4:46 Mình cũng thêm "margin: 100px 0 auto", "border-radius" để bo tròn góc, "padding" để tạo khoảng trống bên trong và "text-align: center" để căn giữa chữ.

5:00 Các bạn có thể thấy hộp đã có màu gradient và nằm ở giữa trang. Bây giờ, chúng ta sẽ thêm CSS cho ô tìm kiếm. Quay lại file HTML, các bạn thấy class của ô tìm kiếm là "search", vậy mình sẽ viết class này trong file CSS.

5:17 Cho ô tìm kiếm, mình sẽ thêm "width: 100%", "display: flex", "align-items: center" để căn giữa các phần tử theo chiều dọc, và "justify-content: space-between" để trường nhập liệu và nút tìm kiếm nằm ở hai đầu.

5:45 Tiếp theo, mình sẽ thêm CSS cho trường nhập liệu. Trong class "search", mình sẽ viết "input" và thêm các thuộc tính CSS cho nó.

6:09 Cho trường nhập liệu, mình đã thêm "border: 0", "outline: 0", "background-color", "color", "padding", "height", "border-radius", "flex: 1", "margin-right" và "font-size".

6:24 Các bạn thấy trường nhập liệu đã đẹp hơn rồi đó. Tiếp theo, chúng ta sẽ thiết kế nút tìm kiếm. Quay lại file HTML, trong class "search", chúng ta có thẻ "button", vậy mình sẽ thêm CSS cho nút ở đây.

6:41 Mình sẽ thêm các thuộc tính tương tự: "border: 0", "outline: 0" và "background-color". Sau đó, mình sẽ thêm "border-radius: 50%" để tạo hình tròn.

6:54 Tiếp theo, mình sẽ thêm "width: 60px", "height: 60px" và "cursor: pointer".

7:07 Trong nút này, chúng ta có biểu tượng tìm kiếm bằng thẻ "img", vậy mình sẽ viết "img" và thêm "width: 16px" cho biểu tượng tìm kiếm.

7:21 Sau khi thêm xong, hãy quay lại trang web. Bây giờ, trường nhập liệu và nút tìm kiếm trông đã đẹp hơn nhiều rồi.

7:31 Tiếp theo, chúng ta cần hiển thị thông tin thời tiết của thành phố. Trước tiên, mình sẽ thêm một vài thông tin ngẫu nhiên, sau đó chúng ta sẽ cập nhật nó bằng API. Quay lại file HTML, sau thẻ "search", mình sẽ thêm một thẻ "div" khác với class là "weather".

7:54 Bên trong thẻ này, mình sẽ thêm thẻ "img" và trỏ đến đường dẫn của một hình ảnh bất kỳ, ví dụ "rain.PNG". Mình cũng sẽ thêm class "weather-icon".

8:19 Sau đó, chúng ta cần hiển thị nhiệt độ. Mình sẽ thêm nhiệt độ vào thẻ "h1" và thêm class "temp". Mình sẽ thêm nhiệt độ là 22°C.

8:34 Mình sẽ copy ký tự độ C từ Google. Mình sẽ copy từ đây. Sau đó, mình sẽ thêm tên thành phố trong thẻ "h2".

8:53 Mình sẽ thêm class "city" và thêm một tên thành phố bất kỳ. Sau khi thêm xong, hãy quay lại trang web.

9:17 Các bạn có thể thấy biểu tượng thời tiết, nhiệt độ và tên thành phố đã hiển thị. Tiếp theo, chúng ta cần hiển thị biểu tượng độ ẩm, biểu tượng gió và giá trị của chúng. Quay lại file HTML.

9:32 Sau thẻ "h2", mình sẽ tạo một thẻ "div" khác với class là "details". Bên trong thẻ "details", chúng ta cần tạo hai cột. Mình sẽ thêm "div" với class "col". Đây là cột đầu tiên. Trong cột đầu tiên, mình sẽ thêm một hình ảnh, ví dụ "humidity.PNG". Sau đó, mình sẽ thêm text trong một thẻ "div".

10:05 Mình sẽ tạo một thẻ "div" và bên trong, mình sẽ thêm thẻ "p" với class "humidity" và giá trị 50%. Sau đó, mình sẽ thêm một dòng text "humidity".

10:30 Bây giờ, mình sẽ copy cột này. Ở đây, mình sẽ cập nhật hình ảnh thành "wind.PNG", thay đổi class thành "wind" và cập nhật text thành "wind speed".

10:56 Ở đây, mình sẽ thêm 15 km/h.

11:08 Trong phần thời tiết này, chúng ta có hình ảnh với class "weather-icon". Mình sẽ copy class này và thêm vào file CSS.

11:19 Cho biểu tượng thời tiết này, mình sẽ thêm "width: 170px" và "margin-top: 30px".

11:29 Tiếp theo, chúng ta có tiêu đề trong thẻ H1 và H2. Trong phần thời tiết này, mình sẽ thêm CSS cho H1.

11:41 Cho H1, mình sẽ thêm "font-size: 80px" và "font-weight: 500".

11:54 Mình sẽ copy đoạn này và thêm CSS cho H2. Mình sẽ cập nhật "font-size" thành 45px, "font-weight" thành 400 và thêm "margin-top: -10px".

12:16 Bây giờ, kích thước của biểu tượng thời tiết và chữ đã hoàn hảo.

12:23 Quay lại file HTML, chúng ta có class "details". Mình sẽ copy class này và thêm vào file CSS. Cho phần "details", mình sẽ thêm "display: flex" để tạo hai cột, "align-items: center" để căn giữa các phần tử và "justify-content: space-between" để tạo khoảng cách giữa chúng.

12:44 Sau đó, mình sẽ thêm "padding: 0 20px" để tạo khoảng trống bên trái và phải, và "margin-top: 50px" để tạo khoảng trống phía trên.

13:02 Bây giờ, các bạn có thể thấy độ ẩm ở bên trái và tốc độ gió ở bên phải.

13:08 Tiếp theo, chúng ta cần cập nhật kích thước của các biểu tượng và chữ này. Quay lại file HTML, trong phần "details", chúng ta đã tạo các cột với class "col". Mình sẽ thêm class này vào file CSS và thêm "display: flex".

13:25 Mình sẽ thêm "align-items: center" và "text-align: left". Sau đó, mình sẽ thêm CSS cho thẻ "img" trong class "col". "width: 40px" và "margin-right: 10px".

13:56 Bây giờ, kích thước của các biểu tượng này đã hoàn hảo. Tiếp theo, chúng ta sẽ thêm CSS cho chữ, là 50% và 15 km/h. Quay lại file HTML, chúng ta có class "humidity" và "wind". Mình sẽ thêm class này vào file CSS, "humidity, wind".

14:19 Ở đây, mình sẽ cập nhật "font-size" thành 28px và "margin-top" thành -6px.

14:30 Bây giờ, thiết kế này trông đã hoàn hảo. Tiếp theo, chúng ta cần cập nhật thông tin thời tiết mỗi khi bạn nhập tên thành phố. Để làm điều đó, chúng ta sẽ sử dụng API. Mở Google và truy cập trang web này.

14:48 Mở openweathermap.org. Ở đây, bạn sẽ nhận được API miễn phí. Bạn cần tạo một tài khoản, vậy hãy nhấp vào "Sign in".

15:00 Ở đây, mình sẽ nhấp vào "Create an Account", nhập tên người dùng, email, mật khẩu và lặp lại mật khẩu.

15:12 Trong trường "Company", mình sẽ nhập tên của mình và chọn mục đích là "Education". Lưu lại.

15:19 Họ sẽ gửi cho bạn một email xác minh. Mở email và xác minh, sau đó nhấp vào "API keys".

15:26 Ở đây, bạn sẽ nhận được API key. Chúng ta sẽ sử dụng API key này trong file code của mình.

15:33 Trong menu điều hướng, bạn có thể thấy "API". Hãy mở trang này trong một tab mới.

15:41 Cuộn xuống và nhấp vào đây: "Current Weather Data API". Nhấp vào liên kết này.

15:50 Cuộn xuống và tìm đến phần "Built-in API request by city name". Sao chép đoạn này và dán vào URL.

16:03 Ở đây, bạn có thể thêm tên thành phố bất kỳ, ví dụ "Germany". Và bạn cần nhập API key vào đây. Dán API key vào và nhấn Enter.

16:18 Nó đang hiển thị thông báo lỗi "Invalid API key". Điều đó có nghĩa là API key chưa được kích hoạt. Có thể mất vài giờ để kích hoạt API key, vậy hãy đợi một lát. Chờ API key được kích hoạt.

16:36 Sau khi API key được kích hoạt, bạn sẽ thấy thông tin thời tiết ở định dạng JSON. Ở đây, bạn có thể thấy tên thành phố mà chúng ta đã thêm vào URL. Bạn cũng có thể thấy nhiệt độ. Nhiệt độ này không ở độ C. Để lấy nhiệt độ ở độ C, hãy quay lại và bạn sẽ thấy tùy chọn thêm đơn vị.

17:04 Các bạn có thể thấy chúng ta có "Standard", "Metric" và "Imperial". Đơn vị mặc định là "Standard", vậy chúng ta cần thêm đơn vị "Metric".

17:18 Vậy, hãy đến URL này và thêm "units=metric".

17:33 Sau đó, bạn sẽ thấy thông tin nhiệt độ ở độ C. Nếu mình thay đổi tên thành phố, bạn có thể thấy nhiệt độ và tên thành phố đang thay đổi.

17:53 Chúng ta cần hiển thị dữ liệu này trên ứng dụng của mình. Sao chép đoạn này và quay lại file code.

18:01 Trong file HTML, phía trên thẻ đóng "body", mình sẽ thêm thẻ "script" mở và đóng. Bên trong, mình sẽ tạo một biến với từ khóa "const".

18:21 Mình sẽ đặt tên là "apiKey".

18:27 Ở đây, mình sẽ thêm API key.

18:32 Tiếp theo, mình sẽ thêm một "const" nữa, là "apiUrl".

18:46 Ở đây, mình sẽ thêm URL API. Để mình thêm URL hoàn chỉnh vào đây và xóa API key này đi.

19:00 Xóa cái này và thêm nó vào đây. Chúng ta đã thêm API key vào biến này. Xóa "appid".

19:18 Và xóa luôn tên thành phố. Trong URL này, chúng ta chỉ cần thêm đơn vị "metric" và "q". Ở đây, mình sẽ thêm "&q=" và để mình thêm một tên thành phố, "Bangalore". Sau đó, mình sẽ thêm một hàm "async".

20:01 Mình sẽ đặt tên cho hàm này là "checkWeather".

20:20 "const response = await fetch". Trong "fetch", mình sẽ thêm URL, là "apiUrl". Vậy hãy thêm "apiUrl" này vào đây. Ở cuối "apiUrl", chúng ta cần thêm API key.

20:44 Để thêm API key, mình sẽ thêm dấu backtick (""). Đây không phải là dấu nháy đơn, đây là dấu backtick. Bên trong, mình sẽ thêm "&appid=" và API key như thế này.

21:16 Ở dòng tiếp theo, mình sẽ thêm "var data = await response.json()".

21:32 Bây giờ, biến "data" này sẽ chứa tất cả thông tin về thời tiết của thành phố "Bangalore". Hãy hiển thị dữ liệu này trên trang web của chúng ta. Để mình hiển thị nó trong console.log.

21:54 Vậy là xong. Sau khi thêm xong, hãy quay lại trang web và kiểm tra, sau đó nhấp vào "Console".

22:09 Ở đây, nó không hiển thị gì cả. Trước tiên, chúng ta cần gọi hàm này. Copy "checkWeather()" và thêm nó vào đây, ngay phía trên thẻ đóng "script".

22:22 Mỗi khi trang web được tải, nó sẽ gọi hàm này. Bây giờ, hãy quay lại trang web.

22:32 Các bạn có thể thấy nó đang hiển thị thông tin thời tiết ở định dạng JSON trong console của trình duyệt.

22:39 Hãy mở rộng cái này. Ở đây, chúng ta có "main" và trong "main", chúng ta có "temp", là nhiệt độ.

22:49 Chúng ta có tên thành phố "Bengaluru". Sau đó, chúng ta có "weather" và trong "weather", chúng ta có một mảng. Trong mảng đầu tiên, là chỉ số 0, chúng ta có điều kiện thời tiết như "clouds". Ở đây, chúng ta có "wind" và trong "wind", chúng ta có tốc độ gió. Chúng ta cần độ ẩm.

23:13 Nó sẽ nằm trong "main". Mở "main" và bạn có thể thấy "humidity: 32". Vậy là chúng ta đã có tất cả thông tin. Bây giờ, chúng ta cần hiển thị thông tin này trên ứng dụng của mình. Quay lại file code.

23:29 Chúng ta cần cập nhật thông tin nhiệt độ, thành phố, độ ẩm và tốc độ gió theo dữ liệu từ API. Mình sẽ chọn tất cả các phần tử này và cập nhật dữ liệu.

23:44 Mình sẽ thêm "document.querySelector(".city")". Nó sẽ chọn phần tử thành phố. "innerHTML" sẽ cập nhật text bên trong phần tử này. Ở đây, mình sẽ thêm "data.name".

24:22 Chúng ta có "name", vậy hãy quay lại và thêm "data.name" vào đây. Nó sẽ cập nhật tên thành phố.

24:29 Bây giờ, hãy copy đoạn này và thêm cái tiếp theo, là "temp". Để lấy dữ liệu nhiệt độ, hãy quay lại và các bạn có thể thấy chúng ta có nhiệt độ bên trong "main".

24:46 Đầu tiên, chúng ta có "main" và trong "main", chúng ta có "temp". Vậy hãy quay lại và thêm "data.main.temp".

25:00 Bây giờ, hãy copy nó một lần nữa. Ở đây, chúng ta sẽ thêm "humidity" và nó cũng nằm trong "main".

25:14 Nó ở đây: "main" và "humidity". Tiếp theo, chúng ta cần thông tin gió. Nó ở đây: "wind" sau đó "speed". Vậy hãy quay lại, copy nó.

25:29 Ở đây, chúng ta sẽ thêm class "wind" và thêm "data.wind.speed".

25:45 Sau khi thêm xong, chúng ta sẽ quay lại trang web và các bạn có thể thấy nó đang hiển thị dữ liệu chính xác: 26.7, Bengaluru, độ ẩm 31 và tốc độ gió 4.63.

26:04 Nhưng chúng ta cần thêm ký hiệu phần trăm, độ C và km/h. Vậy hãy quay lại và sau bước này, chúng ta sẽ thêm dấu cộng và copy ký hiệu độ C này.

26:26 Trong phần độ ẩm, chúng ta sẽ thêm dấu cộng, dấu hai chấm và ký hiệu phần trăm. Trong phần tốc độ, hãy thêm dấu cộng, dấu hai chấm và một khoảng trắng "km/h".

26:47 Vậy là xong. Độ C, 31% và tốc độ gió 4.63 km/h.

26:58 Tiếp theo, chúng ta phải làm tròn nhiệt độ này để nó chỉ hiển thị số nguyên, ví dụ 26 hoặc 27°C. Vậy hãy quay lại và trong phần "temp", hãy thêm "Math.round()" và đặt "data.main.temp" vào bên trong.

27:30 Vậy là xong. "Math.round(data.main.temp)". Sau đó, các bạn có thể thấy 27°C.

27:38 Hiện tại, nó đang hiển thị thông tin của thành phố cụ thể mà chúng ta đã thêm trong liên kết API này. Nhưng chúng ta cần nhập tên thành phố trong ô nhập liệu này và thông tin của thành phố đó sẽ được hiển thị trong ứng dụng. Vậy hãy quay lại và xóa "Bangalore" này đi.

28:03 Xóa tên thành phố. Chúng ta sẽ thêm tên thành phố thông qua hàm "checkWeather". Vậy ở đây, chúng ta sẽ thêm "city" và trong "fetch", chúng ta sẽ thêm "apiUrl + city + ...".

28:18 Chúng ta đang thêm thành phố này ở đây. Bây giờ, mỗi khi chúng ta gọi hàm "checkWeather", chúng ta phải truyền tên thành phố. Tên thành phố này sẽ đến từ trường nhập.

28:33 Vậy, sau "const", ở đây chúng ta sẽ thêm hai biến khác. "const searchBox = document.querySelector(".search input")".

29:12 Copy dòng này và ở đây, chúng ta sẽ thêm "searchBtn" và nó sẽ là "button".

29:27 Khi người dùng nhấp vào nút tìm kiếm, nó sẽ gửi thông tin thành phố vào hàm "checkWeather".

29:35 Vậy, "searchBtn.addEventListener("click", () => { ... })".

29:54 Trong hàm này, chúng ta sẽ gọi "checkWeather". Vậy hãy thêm nó vào đây. Hàm "checkWeather" này sẽ có thông tin thành phố được viết trong trường nhập.

30:08 Để lấy dữ liệu được viết trong trường nhập, chúng ta sẽ thêm "searchBox.value". "searchBox.value" sẽ cung cấp tên thành phố được viết trong trường nhập và nó sẽ truyền tên thành phố vào hàm "checkWeather". Tên thành phố sẽ được thêm vào API và nó sẽ cung cấp thông tin của thành phố cụ thể.

30:36 Sau khi cập nhật tất cả những điều này, hãy quay lại trang web. Ở đây, nó đang hiển thị thông tin mặc định mà chúng ta đã thêm trong code HTML. Nhưng nếu mình viết bất kỳ tên thành phố nào ở đây và nhấp vào biểu tượng tìm kiếm, các bạn có thể thấy nó đang cập nhật thông tin thời tiết: 27°C, Bangalore, độ ẩm 30% và 5.66.

31:04 Để mình viết một tên thành phố khác, "New York". Nó đang hiển thị thông tin thời tiết chính xác.

31:15 Hiện tại, nó không cập nhật hình ảnh ở đây vì chúng ta chưa thêm code để cập nhật biểu tượng thời tiết hoặc hình ảnh thời tiết.

31:24 Để cập nhật hình ảnh thời tiết này, hãy quay lại và sau khi cập nhật các text này, chúng ta phải cập nhật hình ảnh. Chúng ta sẽ cập nhật hình ảnh theo điều kiện thời tiết.

31:36 Để mình quay lại và mở cái này. Ở đây, các bạn có thể thấy chúng ta có "weather" và trong "weather", chúng ta có "main". "Main" này là điều kiện thời tiết.

31:51 Hiện tại, điều kiện thời tiết là "clear". Nếu mình mở cái này, các bạn có thể thấy điều kiện thời tiết là "clouds". Có rất nhiều điều kiện thời tiết.

32:02 Bạn có thể kiểm tra trên trang web này. Mình đã có hình ảnh cho tất cả các điều kiện thời tiết, là cái này. Chúng ta sẽ cập nhật các hình ảnh này theo điều kiện thời tiết.

32:15 Bây giờ, hãy quay lại và ở đây, chúng ta sẽ thêm "if (data.weather[0].main == "Clouds") { ... }".

32:53 Nếu điều kiện thời tiết là "clouds", chúng ta phải thêm hình ảnh "clouds". Chúng ta sẽ tìm nạp phần tử này, là "weather-icon".

33:09 Vậy, ở đây, chúng ta sẽ thêm "const weatherIcon = document.querySelector(".weather-icon")" và thêm nó vào đây.

33:30 "weatherIcon.src = "Images/clouds.PNG"".

33:50 Các bạn có thể thấy trong thư mục "images", mình có "clouds.PNG". Khi điều kiện thời tiết là "clouds", nó sẽ hiển thị hình ảnh "clouds".

34:00 Bây giờ, để mình thêm các hình ảnh khác cho các điều kiện thời tiết khác.

34:22 Chúng ta đã thêm hình ảnh khác nhau cho các điều kiện thời tiết khác nhau: "clear", "mist", "drizzle".

34:30 Sau khi thêm xong, hãy quay lại trang web. Nếu mình viết "Bangalore", nó đang báo lỗi. Vậy hãy quay lại và ở đây, chúng ta đã thêm tên class, vậy chúng ta sẽ thêm một dấu chấm vào trước.

34:47 Sau khi thêm dấu chấm vào trước "weather-icon", hãy quay lại. Nếu mình nhập tên thành phố và tìm kiếm, các bạn có thể thấy biểu tượng thời tiết cũng đang thay đổi.

35:00 Hãy thêm một tên thành phố khác. Ở đây, chúng ta cũng có biểu tượng tương tự, "cloudy". Sau đó, "New York".

35:26 Các bạn có thể thấy biểu tượng này. Nó đang cập nhật tất cả thông tin khi chúng ta nhập tên thành phố và nhấp vào biểu tượng tìm kiếm.

35:34 Bây giờ, hãy refresh trang web. Theo mặc định, chúng ta đang nhận được tất cả thông tin này. Chúng ta phải ẩn thông tin này và nó sẽ được hiển thị khi bạn nhập bất kỳ tên thành phố nào.

35:46 Vậy, hãy quay lại. Ở đây, chúng ta có "weather". Copy cái này, thêm nó vào file CSS. Cho phần "weather", chúng ta sẽ thêm "display: none". Nó sẽ bị ẩn.

35:58 Các bạn có thể thấy chúng ta chỉ có thanh tìm kiếm và biểu tượng tìm kiếm. Nếu mình nhập bất kỳ tên thành phố nào ở đây và nhấp vào biểu tượng tìm kiếm, nó sẽ không hiển thị chi tiết vì chúng ta đã thêm "display: none". Chúng ta phải làm cho "display" thành "block" khi chúng ta nhập tên thành phố.

36:18 Vậy, hãy quay lại. Ở đây, chúng ta có thể xóa "console.log()". Sau phần cập nhật hình ảnh, hãy thêm "document.querySelector(".weather").style.display = "block"".

36:58 Sau khi thêm xong, nếu mình viết tên thành phố, nhấp vào biểu tượng tìm kiếm, nó đang hiển thị thông tin, 0°C và chúng ta có biểu tượng ở đây.

37:14 Trang web bị ẩn. Nếu mình nhập tên thành phố khác, các bạn có thể thấy nó chỉ đang hiển thị biểu tượng khác, nhiệt độ, tên thành phố và các thông tin khác.

37:28 Tiếp theo, chúng ta phải thêm một điều nữa. Giả sử chúng ta nhập sai tên thành phố và nhấp vào biểu tượng tìm kiếm, nó đang hiển thị "undefined" và dữ liệu trước đó. Vậy, nó sẽ hiển thị một thông báo lỗi.

37:42 Vậy, hãy quay lại. Ở đây, chúng ta có "search". Sau "search", chúng ta sẽ thêm một "div" với class "error".

37:54 Bên trong, chúng ta sẽ thêm một thông báo: "Invalid city name".

38:04 Các bạn có thể thấy thông báo "Invalid city name" ở đây.

38:09 Đầu tiên, chúng ta sẽ thêm CSS cho thông báo lỗi này. Copy class "error", thêm nó vào file CSS. Ở đây, mình sẽ thêm "text-align: left", "margin-left: 10px", "font-size: 14px" và "margin-top: 10px".

38:41 Nó đang hiển thị ở đây. Nếu mình refresh trang web, thông báo lỗi này đang hiển thị theo mặc định. Chúng ta phải ẩn thông báo lỗi này và nó sẽ chỉ được hiển thị khi người dùng nhập tên thành phố không hợp lệ.

38:56 Vậy, hãy quay lại và thêm "display: none" để ẩn nó. Các bạn có thể thấy chúng ta chỉ có thanh tìm kiếm và biểu tượng tìm kiếm. Không có thông báo lỗi. Nhưng nếu mình nhập một

39:07 tên thành phố không hợp lệ, nó không hiển thị gì cả. Vậy, hãy quay lại.

39:12 Chúng ta phải hiển thị thông báo lỗi. Ở đây, chúng ta đã thêm "const response = await fetch(apiUrl)". Chúng ta phải kiểm tra mã phản hồi (response code).

39:22 Vậy, mình sẽ thêm "if (response.status == 404) { ... }". Nếu tên thành phố không hợp lệ, nó sẽ trả về trạng thái 404. Sau đó, chúng ta phải hiển thị thông báo lỗi và ẩn thông tin thời tiết.

39:45 Chúng ta sẽ thêm "document.querySelector(".error").style.display = "block"" để thông báo lỗi được hiển thị.

40:06 Copy dòng này và thay đổi thành "weather" và "none" để ẩn thông tin thời tiết.

40:15 Ở đây, chúng ta đang thêm "if", vậy mình sẽ thêm "else" và đặt những thứ còn lại vào bên trong "else".

40:30 Copy đoạn này và dán vào bên trong "else".

40:46 Khi mã trạng thái không phải 404, nó mới cập nhật dữ liệu. Chúng ta cần thêm một điều nữa.

40:53 Copy dòng "display: block" này và thêm nó vào đây. Ở đây, chúng ta sẽ thêm "display: none" để thông báo lỗi bị ẩn khi nó đang hiển thị dữ liệu.

41:08 Sau khi thêm xong, hãy quay lại trang web. Nếu mình nhập tên thành phố và nhấp vào biểu tượng tìm kiếm, nó đang hiển thị thông tin chính xác.

41:21 Nếu mình nhập sai tên thành phố và nhấp vào biểu tượng tìm kiếm, các bạn có thể thấy nó đang hiển thị "Invalid city name".

41:31 Hãy thêm một tên thành phố khác và tìm kiếm.

41:37 Vậy là cuối cùng, chúng ta đã hoàn thành ứng dụng thời tiết tuyệt vời này bằng HTML, CSS và JavaScript.

41:42 Mình hy vọng video này hữu ích cho các bạn. Nếu có bất kỳ câu hỏi nào, các bạn có thể hỏi mình trong phần bình luận.

41:48 Hãy thích và chia sẻ video này. Đừng quên đăng ký kênh Easy Tutorials của mình để xem thêm những video như thế này nhé.

41:54 Cảm ơn các bạn rất nhiều vì đã xem video này.