{"id":682,"date":"2024-11-01T08:09:06","date_gmt":"2024-11-01T08:09:06","guid":{"rendered":"https:\/\/codingtutorials.in\/?p=682"},"modified":"2024-12-14T06:04:02","modified_gmt":"2024-12-14T06:04:02","slug":"build-weather-app-in-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/","title":{"rendered":"Build Weather App in HTML CSS and JavaScript"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"682\" class=\"elementor elementor-682\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d58bef4 e-flex e-con-boxed e-con e-parent\" data-id=\"d58bef4\" 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-7f4e43d elementor-widget elementor-widget-text-editor\" data-id=\"7f4e43d\" 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>The JavaScript API provides a powerful way to integrate external services into websites, enabling developers to bring dynamic data into their applications. A popular example is using the Weather API in JavaScript to get real-time weather information for specific cities. In this tutorial, we will learn the basics of building a simple weather app with a clean, user-friendly interface that receives live weather data based on city inputs.<\/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-19e6246 elementor-widget elementor-widget-video\" data-id=\"19e6246\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=fOqpef8Pvso&quot;,&quot;start&quot;:1,&quot;autoplay&quot;:&quot;yes&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\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-c9ed9f5 elementor-widget elementor-widget-heading\" data-id=\"c9ed9f5\" 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\">What is a JavaScript API?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4c103a5 elementor-widget elementor-widget-text-editor\" data-id=\"4c103a5\" 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>An API (Application Programming Interface) allows different software applications to communicate with each other. In JavaScript, APIs are widely used to access data from external services like weather, location or even social media platforms. JavaScript APIs are incredibly flexible, and they allow developers to fetch data, manipulate it, and display it in web applications.<\/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-e461c0d elementor-widget elementor-widget-heading\" data-id=\"e461c0d\" 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\">Why Use a Weather API in JavaScript?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ee6b5a elementor-widget elementor-widget-text-editor\" data-id=\"1ee6b5a\" 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>Weather APIs provide valuable data that can be updated in real time, making them perfect for applications that need up-to-the-minute information. Weather APIs often provide data on temperature, humidity, visibility, and more. With JavaScript, developers can use fetch() or other HTTP request libraries to call these APIs and handle the returned data in a variety of ways.<\/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-e81d217 elementor-widget elementor-widget-heading\" data-id=\"e81d217\" 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\">How to Set Up a Weather API in JavaScript<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f87c0e elementor-widget elementor-widget-text-editor\" data-id=\"3f87c0e\" 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>To build a <a href=\"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/\"><strong>weather app using JavaScript<\/strong><\/a>, you first need to select a weather API provider. There are several popular options available, such as:<\/p><ul><li>OpenWeatherMap<\/li><li>WeatherAPI<\/li><li>AccuWeather API<\/li><\/ul><p>For this example, we are using the WeatherAPI service. WeatherAPI offers a free tier, making it a good choice for beginners or those building basic applications.<\/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-115e76d elementor-widget elementor-widget-heading\" data-id=\"115e76d\" 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<h4 class=\"elementor-heading-title elementor-size-default\">Get an API Key<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ff7244 elementor-widget elementor-widget-text-editor\" data-id=\"1ff7244\" 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>To use WeatherAPI, you need to register on their website and obtain an API key. This unique key is required to access the API&#8217;s data. Make sure to keep it secure and not expose it to unauthorized users, as it is linked to your account.<\/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-29ddd5b elementor-widget elementor-widget-heading\" data-id=\"29ddd5b\" 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<h4 class=\"elementor-heading-title elementor-size-default\">Set Up Your HTML Structure<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8adfb0d elementor-widget elementor-widget-text-editor\" data-id=\"8adfb0d\" 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>In the provided HTML example, the structure includes an input field for users to type the city name, a search button, and fields to display the city name, local time, and temperature. This basic structure creates a straightforward user interface, ensuring that the application is easy to use.<\/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-914b8e4 elementor-widget elementor-widget-code-highlight\" data-id=\"914b8e4\" 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-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><input type=\"text\" placeholder=\"Enter City\" id=\"city-input\">\n<button type=\"button\" id=\"search-button\" class=\"btn btn-success\">Search<\/button>\n<p id=\"city-name\"><\/p>\n<p id=\"city-time\"><\/p>\n<p id=\"city-temp\"><\/p><\/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-923bf7b elementor-widget elementor-widget-heading\" data-id=\"923bf7b\" 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<h4 class=\"elementor-heading-title elementor-size-default\">Create script.js Fetch Data Using JavaScript API<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a815100 elementor-widget elementor-widget-text-editor\" data-id=\"a815100\" 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>With JavaScript, we use the fetch() function to retrieve data from the Weather API based on user input. This data is then displayed on the page using JavaScript DOM manipulation.<\/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-dd16dc8 elementor-widget elementor-widget-code-highlight\" data-id=\"dd16dc8\" 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-default 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>document.getElementById(\"search-button\").addEventListener(\"click\", function(event) {\r\n    event.preventDefault();\r\n    Myfunction();\r\n});\r\n\r\nvar city = document.getElementById(\"city-input\");\r\nvar cityName = document.getElementById(\"city-name\");\r\nvar cityTime = document.getElementById(\"city-time\");\r\nvar cityTemp = document.getElementById(\"city-temp\");\r\n\r\nasync function getData(CityName) {\r\n    const promise = await fetch(\r\n        `http:\/\/api.weatherapi.com\/v1\/current.json?key=189543c713b2426e96d174757241807&q=${CityName}&aqi=yes`\r\n    );\r\n    return await promise.json();\r\n}\r\n\r\nasync function Myfunction() {\r\n    const value = city.value;\r\n    const result = await getData(value);\r\n    cityName.innerText = `${result.location.name}, ${result.location.region} - ${result.location.country}`;\r\n    cityTime.innerText = result.location.localtime;\r\n    cityTemp.innerText = `Temperature: ${result.current.temp_c}\u00b0C`; \r\n    \r\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-c4db2d2 elementor-widget elementor-widget-heading\" data-id=\"c4db2d2\" 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<h4 class=\"elementor-heading-title elementor-size-default\">Displaying Weather Information<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07fb8f1 elementor-widget elementor-widget-text-editor\" data-id=\"07fb8f1\" 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>The JavaScript API receives data and parses the JSON response, allowing developers to access specific parts of the data. Here, we display the city name, local time and temperature in Celsius. You can extend it to include other data like weather conditions, humidity or wind speed.<\/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-4db4790 elementor-widget elementor-widget-heading\" data-id=\"4db4790\" 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<h4 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57f0d62 elementor-widget elementor-widget-text-editor\" data-id=\"57f0d62\" 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>Integrating the Weather API in JavaScript can be a practical project to enhance your web development skills. The use of APIs in JavaScript allows for more interactive and useful applications by delivering real-world data directly to users. As you develop more with the JavaScript API, you&#8217;ll find a variety of applications for real-time data, from finance to social media and beyond.<\/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-87db1b1 elementor-widget elementor-widget-shortcode\" data-id=\"87db1b1\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style type=\"text\/css\">\r\n\t\t#dae-shortcode700-download-wrapper {\r\n\t\t\tbackground: url() !important;\r\n\t\t\tbackground-attachment: scroll !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-download-file-image {\r\n\t\t\twidth: 40% !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-file-image {\r\n\t\t\twidth: 20% !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-download-title {\r\n\t\t\tfont-size: 40px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-download-text {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-download-text h1,\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-download-text h2,\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-download-text h3,\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-download-text h4,\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-download-text h5 {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-download-button {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t\tbackground: none !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-download-button:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-label {\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-icon {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px 0 0 10px !important;\r\n\t\t\t-moz-border-radius: 10px 0 0 10px !important;\r\n\t\t\t-webkit-border-radius: 10px 0 0 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-field {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tbackground: #f9f9f9 !important;\r\n\t\t\tborder-radius: 0 10px 10px 0 !important;\r\n\t\t\t-moz-border-radius: 0 10px 10px 0 !important;\r\n\t\t\t-webkit-border-radius: 0 10px 10px 0 !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-select-icon {\r\n\t\t\ttop: calc(50% - 7.5px) !important;\r\n\t\t\tright: 15px !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-field::-webkit-input-placeholder,\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-field::placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-field::-ms-input-placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-checkbox-text {\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tfont-size: 12px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-checkbox-text a {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-checkbox-text a:hover {\r\n\t\t\tcolor: #0081c1 !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-submit {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-submit:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0081c1 !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-loading {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-message {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-error {\r\n\t\t\tcolor: #dd1111 !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-success {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-category-interests h4,\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-input-wrap-interest label {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: flex-start !important;\r\n\t\t\t-webkit-justify-content: flex-start !important;\r\n\t\t\t-moz-justify-content: fle-start !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-download-title,\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-download-text,\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-label,\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-message,\r\n\t\t#dae-shortcode700-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper.dae-shortcode-download-wrapper-wide {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode700-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-title,\r\n\t\t#dae-shortcode700-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-text,\r\n\t\t#dae-shortcode700-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode700-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode700-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-label,\r\n\t\t#dae-shortcode700-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-message,\r\n\t\t#dae-shortcode700-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t<\/style>\r\n\t\t<div id=\"dae-shortcode700-download-wrapper\" class=\"dae-shortcode-download-wrapper\">\r\n\t\t\t\r\n\t\t\t<div class=\"dae-shortcode-download-content-wrapper\">\r\n\t\t\t\t<h2 class=\"dae-shortcode-download-title\">Weather app source code<\/h2>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"dae-shortcode-download-button\">\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-icon\"><i class=\"fas fa-download\"><\/i><\/span>\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-text\">FREE DOWNLOAD<\/span>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-register-wrapper\">\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-label\">Send download link to:<\/p>\r\n\t\t\t\t\t<form class=\"dae-shortcode-register-form\" method=\"post\" novalidate=\"novalidate\">\r\n\t\t\t\t\t\t<input type=\"hidden\" name=\"file\" value=\"javascript-weather-code.zip\" \/>\r\n\t\t\t\t\t\t<div class=\"dae-shortcode-register-field-wrap\"><div class=\"dae-shortcode-register-icon\"><i class=\"fas fa-envelope\"><\/i><\/div><div class=\"dae-shortcode-register-input-wrap\"><input class=\"dae-shortcode-register-field\" type=\"email\" name=\"email\" placeholder=\"Email\" autocomplete=\"off\" \/><\/div><\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<p>\r\n\t\t\t\t\t\t\t<input class=\"dae-shortcode-register-submit\" type=\"submit\" value=\"Send link\" \/>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t<p class=\"dae-shortcode-register-loading\">\r\n\t\t\t\t\t\t\t<i class=\"fas fa-spinner fa-spin\"><\/i>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<\/form>\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-message\"><\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\n\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>The JavaScript API provides a powerful way to integrate external services into websites, enabling developers to bring dynamic<\/p>\n","protected":false},"author":1,"featured_media":683,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,4],"tags":[55,60,57,53,61,56,54,59,58],"class_list":["post-682","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-htmlcss","category-javascript","tag-api-integration","tag-dynamic-data","tag-fetch-api","tag-javascript","tag-javascript-tutorial","tag-real-time-data","tag-weather-api","tag-weather-app","tag-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create weather app in html, css and javascript<\/title>\n<meta name=\"description\" content=\"Learn how to build a weather app with JavaScript using the Weather API. This tutorial covers API integration, fetching real-time data, and displaying weather information dynamically on your web application.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create weather app in html, css and javascript\" \/>\n<meta property=\"og:description\" content=\"Learn how to build a weather app with JavaScript using the Weather API. This tutorial covers API integration, fetching real-time data, and displaying weather information dynamically on your web application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100040911374714\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T08:09:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-14T06:04:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/weather-image.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1352\" \/>\n\t<meta property=\"og:image:height\" content=\"612\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"coding2w_newspaper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:site\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"coding2w_newspaper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create weather app in html, css and javascript","description":"Learn how to build a weather app with JavaScript using the Weather API. This tutorial covers API integration, fetching real-time data, and displaying weather information dynamically on your web application.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Create weather app in html, css and javascript","og_description":"Learn how to build a weather app with JavaScript using the Weather API. This tutorial covers API integration, fetching real-time data, and displaying weather information dynamically on your web application.","og_url":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100040911374714","article_published_time":"2024-11-01T08:09:06+00:00","article_modified_time":"2024-12-14T06:04:02+00:00","og_image":[{"width":1352,"height":612,"url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/weather-image.webp","type":"image\/webp"}],"author":"coding2w_newspaper","twitter_card":"summary_large_image","twitter_creator":"@_CodingAcademy_","twitter_site":"@_CodingAcademy_","twitter_misc":{"Written by":"coding2w_newspaper","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/#article","isPartOf":{"@id":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/"},"author":{"name":"coding2w_newspaper","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10"},"headline":"Build Weather App in HTML CSS and JavaScript","datePublished":"2024-11-01T08:09:06+00:00","dateModified":"2024-12-14T06:04:02+00:00","mainEntityOfPage":{"@id":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/"},"wordCount":527,"commentCount":0,"publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"image":{"@id":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/weather-image.webp","keywords":["API integration","dynamic data","fetch API","JavaScript","JavaScript tutorial","real-time data","Weather API","weather app","web development"],"articleSection":["HTML&amp;CSS","Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/","url":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/","name":"Create weather app in html, css and javascript","isPartOf":{"@id":"https:\/\/codingtutorials.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/weather-image.webp","datePublished":"2024-11-01T08:09:06+00:00","dateModified":"2024-12-14T06:04:02+00:00","description":"Learn how to build a weather app with JavaScript using the Weather API. This tutorial covers API integration, fetching real-time data, and displaying weather information dynamically on your web application.","breadcrumb":{"@id":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/#primaryimage","url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/weather-image.webp","contentUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/weather-image.webp","width":1352,"height":612,"caption":"weather app"},{"@type":"BreadcrumbList","@id":"https:\/\/codingtutorials.in\/build-weather-app-in-html-css-and-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingtutorials.in\/"},{"@type":"ListItem","position":2,"name":"Build Weather App in HTML CSS and JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codingtutorials.in\/#website","url":"https:\/\/codingtutorials.in\/","name":"Coding Tutorials","description":"","publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"alternateName":"Coding Tutorial for Beginners","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingtutorials.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingtutorials.in\/#organization","name":"Coding Tutorials","url":"https:\/\/codingtutorials.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Coding Tutorials"},"image":{"@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100040911374714","https:\/\/x.com\/_CodingAcademy_","https:\/\/www.instagram.com\/coder_ranjeet\/","https:\/\/www.threads.net\/@coder_ranjeet"]},{"@type":"Person","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10","name":"coding2w_newspaper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","caption":"coding2w_newspaper"},"sameAs":["https:\/\/codingtutorials.in\/"],"url":"https:\/\/codingtutorials.in\/author\/coding2w_newspaper\/"}]}},"_links":{"self":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/comments?post=682"}],"version-history":[{"count":33,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/682\/revisions"}],"predecessor-version":[{"id":1553,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/682\/revisions\/1553"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media\/683"}],"wp:attachment":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media?parent=682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/categories?post=682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/tags?post=682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}