{"id":2825,"date":"2024-11-10T12:58:59","date_gmt":"2024-11-10T05:58:59","guid":{"rendered":"https:\/\/fstack.io.vn\/?p=2825"},"modified":"2024-11-10T13:12:31","modified_gmt":"2024-11-10T06:12:31","slug":"1-xay-dung-ung-dung-thoi-tiet-voi-javascript-cuc-ky-de-hieu","status":"publish","type":"post","link":"https:\/\/fstack.io.vn\/blog\/1-xay-dung-ung-dung-thoi-tiet-voi-javascript-cuc-ky-de-hieu\/","title":{"rendered":"#1 X\u00e2y D\u1ef1ng \u1ee8ng D\u1ee5ng Th\u1eddi Ti\u1ebft V\u1edbi JavaScript C\u1ef1c K\u1ef3 D\u1ec5 Hi\u1ec3u."},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2825\" class=\"elementor elementor-2825\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d28a37 e-flex e-con-boxed e-con e-parent\" data-id=\"4d28a37\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-866a3e7 elementor-widget elementor-widget-text-editor\" data-id=\"866a3e7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/fstack.io.vn\/blog\/mot-so-cau-hoi-phong-van-javascript-tu-co-ban-den-nang-cao\/\">JavaScript<\/a> l\u00e0 m\u1ed9t ng\u00f4n ng\u1eef <a href=\"https:\/\/fstack.io.vn\/blog\/lap-trinh-la-gi-mot-so-dac-diem-cua-lap-trinh-ma-ban-nen-biet\/\">l\u1eadp tr\u00ecnh<\/a> d\u1ec5 h\u1ecdc v\u00e0 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 th\u1ef1c hi\u1ec7n nhi\u1ec1u t\u00e1c v\u1ee5 kh\u00e1c nhau tr\u00ean trang web. V\u00ed d\u1ee5, n\u00f3 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 thay \u0111\u1ed5i n\u1ed9i dung c\u1ee7a trang web, t\u01b0\u01a1ng t\u00e1c v\u1edbi ng\u01b0\u1eddi d\u00f9ng, th\u1ef1c hi\u1ec7n ki\u1ec3m tra d\u1eef li\u1ec7u tr\u00ean m\u1eabu, v\u00e0 nhi\u1ec1u h\u01a1n n\u1eefa.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea24fde elementor-widget elementor-widget-text-editor\" data-id=\"ea24fde\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Trong b\u00e0i vi\u1ebft n\u00e0y, ch\u00fang ta s\u1ebd c\u00f9ng nhau x\u00e2y d\u1ef1ng m\u1ed9t \u1ee9ng d\u1ee5ng \u0111\u01a1n gi\u1ea3n v\u1ec1 th\u1eddi ti\u1ebft b\u1eb1ng JavaScript. \u0110i\u1ec1u n\u00e0y s\u1ebd gi\u00fap ch\u00fang ta hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng JavaScript \u0111\u1ec3 t\u1ea1o ra c\u00e1c \u1ee9ng d\u1ee5ng web \u0111\u1ed9ng.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33459d1 elementor-widget elementor-widget-heading\" data-id=\"33459d1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Danh m\u1ee5c b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/fstack.io.vn\/blog\/1-xay-dung-ung-dung-thoi-tiet-voi-javascript-cuc-ky-de-hieu\/#Buoc_1_Chuan_Bi_Moi_Truong_va_Cong_Cu\" >B\u01b0\u1edbc 1: Chu\u1ea9n B\u1ecb M\u00f4i Tr\u01b0\u1eddng v\u00e0 C\u00f4ng C\u1ee5<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/fstack.io.vn\/blog\/1-xay-dung-ung-dung-thoi-tiet-voi-javascript-cuc-ky-de-hieu\/#Tao_tep_HTML_va_JavaScript\" >T\u1ea1o t\u1ec7p HTML v\u00e0 JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/fstack.io.vn\/blog\/1-xay-dung-ung-dung-thoi-tiet-voi-javascript-cuc-ky-de-hieu\/#Dang_ky_API_Key_cho_OpenWeatherMap\" >\u0110\u0103ng k\u00fd API Key cho OpenWeatherMap:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/fstack.io.vn\/blog\/1-xay-dung-ung-dung-thoi-tiet-voi-javascript-cuc-ky-de-hieu\/#Buoc_2_Cau_Truc_HTML\" >B\u01b0\u1edbc 2: C\u1ea5u Tr\u00fac HTML<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/fstack.io.vn\/blog\/1-xay-dung-ung-dung-thoi-tiet-voi-javascript-cuc-ky-de-hieu\/#Ung_Dung_Thoi_Tiet\" >\u1ee8ng D\u1ee5ng Th\u1eddi Ti\u1ebft<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/fstack.io.vn\/blog\/1-xay-dung-ung-dung-thoi-tiet-voi-javascript-cuc-ky-de-hieu\/#Buoc_3_Thiet_Ke_Giao_Dien_voi_CSS\" >B\u01b0\u1edbc 3: Thi\u1ebft K\u1ebf Giao Di\u1ec7n v\u1edbi CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/fstack.io.vn\/blog\/1-xay-dung-ung-dung-thoi-tiet-voi-javascript-cuc-ky-de-hieu\/#Buoc_4_Logic_JavaScript_De_Goi_API\" >B\u01b0\u1edbc 4: Logic JavaScript \u0110\u1ec3 G\u1ecdi API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/fstack.io.vn\/blog\/1-xay-dung-ung-dung-thoi-tiet-voi-javascript-cuc-ky-de-hieu\/#name\" >${name}<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/fstack.io.vn\/blog\/1-xay-dung-ung-dung-thoi-tiet-voi-javascript-cuc-ky-de-hieu\/#Buoc_5_Giai_Thich_Logic\" >B\u01b0\u1edbc 5: Gi\u1ea3i Th\u00edch Logic<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/fstack.io.vn\/blog\/1-xay-dung-ung-dung-thoi-tiet-voi-javascript-cuc-ky-de-hieu\/#Ket_luan_va_bai_viet\" >K\u1ebft lu\u1eadn v\u00e0 b\u00e0i vi\u1ebft<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Buoc_1_Chuan_Bi_Moi_Truong_va_Cong_Cu\"><\/span>B\u01b0\u1edbc 1: Chu\u1ea9n B\u1ecb M\u00f4i Tr\u01b0\u1eddng v\u00e0 C\u00f4ng C\u1ee5<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2092f51 elementor-widget elementor-widget-heading\" data-id=\"2092f51\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Tao_tep_HTML_va_JavaScript\"><\/span>T\u1ea1o t\u1ec7p HTML v\u00e0 JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dfb2b15 elementor-widget elementor-widget-text-editor\" data-id=\"dfb2b15\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>T\u1ea1o m\u1ed9t th\u01b0 m\u1ee5c m\u1edbi cho d\u1ef1 \u00e1n.<\/li><li>T\u1ea1o c\u00e1c t\u1ec7p sau trong th\u01b0 m\u1ee5c:<ul><li><code>index.html<\/code>: T\u1ec7p HTML ch\u00ednh.<\/li><li><code>style.css<\/code>: T\u1ec7p CSS \u0111\u1ec3 l\u00e0m \u0111\u1eb9p <a href=\"https:\/\/fstack.io.vn\/blog\/du-an\/\">giao di\u1ec7n<\/a>.<\/li><li><code>app.js<\/code>: T\u1ec7p JavaScript \u0111\u1ec3 x\u1eed l\u00fd logic \u1ee9ng d\u1ee5ng.<\/li><\/ul><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41c0904 elementor-widget elementor-widget-heading\" data-id=\"41c0904\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Dang_ky_API_Key_cho_OpenWeatherMap\"><\/span>\u0110\u0103ng k\u00fd API Key cho OpenWeatherMap:<span class=\"ez-toc-section-end\"><\/span><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c4939b elementor-widget elementor-widget-text-editor\" data-id=\"5c4939b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><ul><li>ruy c\u1eadp <a href=\"https:\/\/openweathermap.org\/\" target=\"_new\" rel=\"noopener nofollow\">OpenWeatherMap<\/a> v\u00e0 t\u1ea1o m\u1ed9t t\u00e0i kho\u1ea3n (n\u1ebfu ch\u01b0a c\u00f3).<\/li><li>Sau khi \u0111\u0103ng k\u00fd, b\u1ea1n s\u1ebd nh\u1eadn \u0111\u01b0\u1ee3c API key \u0111\u1ec3 s\u1eed d\u1ee5ng OpenWeatherMap API.<\/li><\/ul><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf6ecbf elementor-widget elementor-widget-heading\" data-id=\"bf6ecbf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Buoc_2_Cau_Truc_HTML\"><\/span>B\u01b0\u1edbc 2: C\u1ea5u Tr\u00fac HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69ef7f9 elementor-widget elementor-widget-text-editor\" data-id=\"69ef7f9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>T\u1ea1o t\u1ec7p <code>index.html<\/code> v\u1edbi <a href=\"https:\/\/fstack.io.vn\/blog\/4-cau-truc-du-lieu-va-giai-thuat-la-gi\/\">c\u1ea5u tr\u00fac<\/a> nh\u01b0 sau:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0f4a63a elementor-widget elementor-widget-code-highlight\" data-id=\"0f4a63a\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u1ee8ng D\u1ee5ng Th\u1eddi Ti\u1ebft<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n    <div class=\"weather-app\">\n        <h1><span class=\"ez-toc-section\" id=\"Ung_Dung_Thoi_Tiet\"><\/span>\u1ee8ng D\u1ee5ng Th\u1eddi Ti\u1ebft<span class=\"ez-toc-section-end\"><\/span><\/h1>\n        <input type=\"text\" id=\"cityInput\" placeholder=\"Nh\u1eadp t\u00ean th\u00e0nh ph\u1ed1...\">\n        <button onclick=\"fetchWeather()\">Xem Th\u1eddi Ti\u1ebft<\/button>\n        <div id=\"weatherResult\"><\/div>\n    <\/div>\n\n    <script src=\"app.js\"><\/script>\n<\/body>\n<\/html>\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a498517 elementor-widget elementor-widget-heading\" data-id=\"a498517\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Buoc_3_Thiet_Ke_Giao_Dien_voi_CSS\"><\/span>B\u01b0\u1edbc 3: Thi\u1ebft K\u1ebf Giao Di\u1ec7n v\u1edbi CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-828ea51 elementor-widget elementor-widget-text-editor\" data-id=\"828ea51\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Trong t\u1ec7p <code>style.css<\/code>, th\u00eam m\u00e3 sau \u0111\u1ec3 t\u1ea1o giao di\u1ec7n c\u01a1 b\u1ea3n cho \u1ee9ng d\u1ee5ng:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d2fc31 elementor-widget elementor-widget-code-highlight\" data-id=\"6d2fc31\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>body {\n    font-family: Arial, sans-serif;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100vh;\n    margin: 0;\n    background-color: #f0f0f0;\n}\n\n.weather-app {\n    text-align: center;\n    background: #ffffff;\n    padding: 20px;\n    border-radius: 10px;\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n}\n\n#cityInput {\n    padding: 10px;\n    font-size: 16px;\n    border: 1px solid #ddd;\n    border-radius: 5px;\n    margin-bottom: 10px;\n}\n\nbutton {\n    padding: 10px 20px;\n    font-size: 16px;\n    background-color: #4CAF50;\n    color: white;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n}\n\nbutton:hover {\n    background-color: #45a049;\n}\n\n#weatherResult {\n    margin-top: 20px;\n    font-size: 18px;\n}\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1fc3b6 elementor-widget elementor-widget-heading\" data-id=\"c1fc3b6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Buoc_4_Logic_JavaScript_De_Goi_API\"><\/span>B\u01b0\u1edbc 4: Logic JavaScript \u0110\u1ec3 G\u1ecdi API\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-97960e1 elementor-widget elementor-widget-text-editor\" data-id=\"97960e1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Trong t\u1ec7p <code>app.js<\/code>, th\u00eam m\u00e3 sau \u0111\u1ec3 x\u1eed l\u00fd c\u00e1c thao t\u00e1c l\u1ea5y d\u1eef li\u1ec7u th\u1eddi ti\u1ebft t\u1eeb API:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8009ef9 elementor-widget elementor-widget-code-highlight\" data-id=\"8009ef9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const apiKey = 'YOUR_API_KEY'; \/\/ Thay YOUR_API_KEY b\u1eb1ng API key c\u1ee7a b\u1ea1n\n\nfunction fetchWeather() {\n    const city = document.getElementById(\"cityInput\").value;\n    const url = `https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${city}&appid=${apiKey}&units=metric&lang=vi`;\n\n    fetch(url)\n        .then(response => {\n            if (!response.ok) {\n                throw new Error(\"Kh\u00f4ng t\u00ecm th\u1ea5y th\u00e0nh ph\u1ed1!\");\n            }\n            return response.json();\n        })\n        .then(data => {\n            displayWeather(data);\n        })\n        .catch(error => {\n            document.getElementById(\"weatherResult\").innerText = error.message;\n        });\n}\n\nfunction displayWeather(data) {\n    const { name } = data;\n    const { temp, humidity } = data.main;\n    const { description, icon } = data.weather[0];\n    const { speed } = data.wind;\n\n    document.getElementById(\"weatherResult\").innerHTML = `\n        <h2><span class=\"ez-toc-section\" id=\"name\"><\/span>${name}<span class=\"ez-toc-section-end\"><\/span><\/h2>\n        <p>${description}<\/p>\n        <img decoding=\"async\" src=\"https:\/\/openweathermap.org\/img\/wn\/${icon}@2x.png\" alt=\"icon\" title=\"\">\n        <p>Nhi\u1ec7t \u0111\u1ed9: ${temp}\u00b0C<\/p>\n        <p>\u0110\u1ed9 \u1ea9m: ${humidity}%<\/p>\n        <p>T\u1ed1c \u0111\u1ed9 gi\u00f3: ${speed} m\/s<\/p>\n    `;\n}\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9202757 elementor-widget elementor-widget-text-editor\" data-id=\"9202757\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>L\u01b0u \u00fd:<\/strong> Thay th\u1ebf <code>YOUR_API_KEY<\/code> b\u1eb1ng API key b\u1ea1n \u0111\u00e3 nh\u1eadn \u0111\u01b0\u1ee3c t\u1eeb OpenWeatherMap.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-79496a0 elementor-widget elementor-widget-heading\" data-id=\"79496a0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Buoc_5_Giai_Thich_Logic\"><\/span>B\u01b0\u1edbc 5: Gi\u1ea3i Th\u00edch Logic<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dff5770 elementor-widget elementor-widget-text-editor\" data-id=\"dff5770\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ol><li><p><strong>fetchWeather()<\/strong>:<\/p><ul><li>L\u1ea5y t\u00ean th\u00e0nh ph\u1ed1 t\u1eeb input.<\/li><li>G\u1ecdi API t\u1eeb OpenWeatherMap v\u1edbi t\u00ean th\u00e0nh ph\u1ed1 v\u00e0 API key.<\/li><li>API tr\u1ea3 v\u1ec1 d\u1eef li\u1ec7u th\u1eddi ti\u1ebft d\u01b0\u1edbi d\u1ea1ng JSON. N\u1ebfu kh\u00f4ng t\u00ecm th\u1ea5y th\u00e0nh ph\u1ed1, tr\u1ea3 v\u1ec1 l\u1ed7i v\u00e0 hi\u1ec3n th\u1ecb th\u00f4ng b\u00e1o.<\/li><\/ul><\/li><li><p><strong>displayWeather(data)<\/strong>:<\/p><ul><li>H\u00e0m n\u00e0y hi\u1ec3n th\u1ecb th\u00f4ng tin th\u1eddi ti\u1ebft nh\u1eadn t\u1eeb API nh\u01b0 t\u00ean th\u00e0nh ph\u1ed1, m\u00f4 t\u1ea3 th\u1eddi ti\u1ebft, nhi\u1ec7t \u0111\u1ed9, \u0111\u1ed9 \u1ea9m, v\u00e0 t\u1ed1c \u0111\u1ed9 gi\u00f3.<\/li><li>S\u1eed d\u1ee5ng bi\u1ec3u t\u01b0\u1ee3ng th\u1eddi ti\u1ebft \u0111\u01b0\u1ee3c cung c\u1ea5p t\u1eeb API \u0111\u1ec3 t\u0103ng t\u00ednh tr\u1ef1c quan cho \u1ee9ng d\u1ee5ng.<\/li><\/ul><\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8247a28 elementor-widget elementor-widget-heading\" data-id=\"8247a28\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Ket_luan_va_bai_viet\"><\/span>K\u1ebft lu\u1eadn v\u00e0 b\u00e0i vi\u1ebft<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a3e84c3 elementor-widget elementor-widget-text-editor\" data-id=\"a3e84c3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Nh\u01b0 v\u1eady, ch\u00fang ta \u0111\u00e3 c\u00f9ng nhau x\u00e2y d\u1ef1ng m\u1ed9t \u1ee9ng d\u1ee5ng \u0111\u01a1n gi\u1ea3n v\u1ec1 th\u1eddi ti\u1ebft b\u1eb1ng ng\u00f4n ng\u1eef javaScript m\u1ed9t c\u00e1ch d\u1ec5 hi\u1ec3u v\u00e0 \u0111\u01a1n gi\u1ea3n cho ng\u01b0\u1eddi m\u1edbi h\u1ecdc.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>JavaScript l\u00e0 m\u1ed9t ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh d\u1ec5 h\u1ecdc v\u00e0 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 th\u1ef1c hi\u1ec7n nhi\u1ec1u t\u00e1c v\u1ee5 kh\u00e1c nhau tr\u00ean trang web. V\u00ed d\u1ee5, n\u00f3 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 thay \u0111\u1ed5i n\u1ed9i dung c\u1ee7a trang web, t\u01b0\u01a1ng t\u00e1c v\u1edbi ng\u01b0\u1eddi d\u00f9ng, th\u1ef1c hi\u1ec7n ki\u1ec3m tra d\u1eef li\u1ec7u tr\u00ean m\u1eabu, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2828,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[48,1],"tags":[65],"class_list":["post-2825","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lap-trinh","category-cong-nghe","tag-javascript"],"acf":[],"jetpack_featured_media_url":"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/11\/haha-4975.gif","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/comments?post=2825"}],"version-history":[{"count":7,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2825\/revisions"}],"predecessor-version":[{"id":2834,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2825\/revisions\/2834"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media\/2828"}],"wp:attachment":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media?parent=2825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/categories?post=2825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/tags?post=2825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}