If you want to display real-time temperature<\/b>, humidity, weather description, and day\/night status on your website, this tutorial will help you build a fully functional Temperature Widget using JavaScript and PHP<\/b>.<\/p>\n
This widget:<\/b> We\u2019ll use:<\/p>\n Let\u2019s start by creating the necessary files for our temperature widget. Below is the directory structure we will be working with:<\/p>\n The widget will fetch weather data from the Open-Meteo API and display it in a user-friendly format. Below are the steps to create this widget:<\/u><\/p>\n First, we will create the basic HTML structure for our temperature widget. This will include a container for the widget, sections for the header, main content, and footer where we will display the weather information.<\/p>\n Include JavaScript ( Next, we will add CSS styles to make our temperature widget visually appealing and responsive. We will use a clean and modern design with a color scheme that complements the weather data being displayed. The CSS will also ensure that the widget looks good on both desktop and mobile devices.<\/p>\n Finally, we will write the JavaScript code to fetch weather data from our PHP backend ( In the
\n\u2714 Detects user location automatically via IP
\n\u2714 Fetches live weather data using the Open-Meteo API (no API key required)
\n\u2714 Displays:<\/p>\n\n
\n
\n
\n
\ud83d\udcc1 Project Structure Overview<\/h2>\n
temperature-widget\/\r\n\u251c\u2500\u2500 index.html\r\n\u251c\u2500\u2500 script.js\r\n\u251c\u2500\u2500 weather.php\r\n\u2514\u2500\u2500 style.css\r\n<\/pre>\n
\n
Step 1: Create the HTML Structure (index.html)<\/h2>\n
<div<\/span> class<\/span>=\"temp-widget\"<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"widget-header\"<\/span>><\/span>\r\n <span<\/span> class<\/span>=\"location\"<\/span>><\/span>Loading...<\/span<\/span>><\/span>\r\n <span<\/span> class<\/span>=\"day-night\"<\/span>><\/span>\ud83c\udf1e<\/span<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"widget-main\"<\/span>><\/span>\r\n <span<\/span> class<\/span>=\"temperature\"<\/span>><\/span>--<sup<\/span>><\/span>\u00b0C<\/sup<\/span>><\/span><\/span<\/span>><\/span>\r\n <span<\/span> class<\/span>=\"weather\"<\/span>><\/span>--<\/span<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"widget-footer\"<\/span>><\/span>\r\n <span<\/span> class<\/span>=\"humidity\"<\/span>><\/span>Humidity: --%<\/span<\/span>><\/span>\r\n <span<\/span> class<\/span>=\"datetime\"<\/span>><\/span>--<\/span<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n<\/div<\/span>><\/span><\/pre>\nscript.js<\/code>) to fetch and display weather data:<\/p>\n<script<\/span> src<\/span>=\"script.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\nStep 2: Style the Widget with CSS (style.css)<\/h2>\n
.temp-widget<\/span> {\r\n background<\/span>: #ffffff<\/span>;\r\n width<\/span>: 280px<\/span>;\r\n padding<\/span>: 20px<\/span>;\r\n border-radius<\/span>: 15px<\/span>;\r\n box-shadow<\/span>: 0<\/span> 8px<\/span> 20px<\/span> rgba<\/span>(0,0,0,0.15);\r\n}\r\n\r\n.widget-header<\/span> {\r\n display<\/span>: flex;\r\n justify-content<\/span>: space-between;\r\n font-weight<\/span>: bold;\r\n}\r\n\r\n.widget-main<\/span> {\r\n text-align<\/span>: center;\r\n margin<\/span>: 20px<\/span> 0<\/span>;\r\n}\r\n\r\n.temperature<\/span> {\r\n font-size<\/span>: 40px<\/span>;\r\n font-weight<\/span>: bold;\r\n}\r\n\r\n.weather<\/span> {\r\n display<\/span>: block;\r\n margin-top<\/span>: 5px<\/span>;\r\n color<\/span>: #555<\/span>;\r\n}\r\n\r\n.widget-footer<\/span> {\r\n display<\/span>: flex;\r\n justify-content<\/span>: space-between;\r\n font-size<\/span>: 14px<\/span>;\r\n}<\/pre>\nStep 3: Fetch and Display Weather Data with JavaScript (script.js)<\/h2>\n
weather.php<\/code>) and update the widget dynamically. The JavaScript will make an AJAX request to the PHP script, which will return the weather data in JSON format. We will then parse this data and update the HTML elements in our widget accordingly.<\/p>\ndocument<\/span>.addEventListener('DOMContentLoaded'<\/span>, () => {\r\n fetch('weather.php'<\/span>)\r\n .then(response => response.json())\r\n .then(data => {\r\n document<\/span>.querySelector('.location'<\/span>).textContent = data.location || 'Unknown'<\/span>;\r\n document<\/span>.querySelector('.temperature'<\/span>).innerHTML = `${data.temperature ?? '--'}<\/span><sup>\u00b0C<\/sup>`<\/span>;\r\n document<\/span>.querySelector('.weather'<\/span>).textContent = data.weather || '--'<\/span>;\r\n document<\/span>.querySelector('.humidity'<\/span>).textContent = `Humidity: ${data.humidity ?? '--'}<\/span>%`<\/span>;\r\n document<\/span>.querySelector('.datetime'<\/span>).textContent = data.datetime || '--'<\/span>;\r\n document<\/span>.querySelector('.day-night'<\/span>).textContent = data.is_day ? '\ud83c\udf1e'<\/span> : '\ud83c\udf1c'<\/span>;\r\n })\r\n .catch(() => {\r\n document<\/span>.querySelector('.location'<\/span>).textContent = 'Error'<\/span>;\r\n document<\/span>.querySelector('.temperature'<\/span>).innerHTML = '--<sup>\u00b0C<\/sup>'<\/span>;\r\n document<\/span>.querySelector('.weather'<\/span>).textContent = '--'<\/span>;\r\n document<\/span>.querySelector('.humidity'<\/span>).textContent = 'Humidity: --%'<\/span>;\r\n document<\/span>.querySelector('.datetime'<\/span>).textContent = '--'<\/span>;\r\n document<\/span>.querySelector('.day-night'<\/span>).textContent = '\u2753'<\/span>;\r\n });\r\n});<\/pre>\nStep 4: Fetch Weather Data with PHP (weather.php)<\/h2>\n
weather.php<\/code> file, we will write the PHP code to fetch weather data from the Open-Meteo API based on the user’s location. We will use the user’s IP address to determine their location and then make a request to the Open-Meteo API to retrieve the current weather data. Finally, we will return this data as JSON to be consumed by our JavaScript code in script.js<\/code>.<\/p>\n\n
<?php
<\/span>\/\/ Auto-detect IP address
<\/span>$ip <\/span>= <\/span>$_SERVER<\/span>[<\/span>'REMOTE_ADDR'<\/span>];
<\/span>\/\/ Get location info from ip-api.com (free, no API key required)
<\/span>$geo_url <\/span>= <\/span>\"http:\/\/ip-api.com\/json\/<\/span>{<\/span>$ip<\/span>}<\/span>?fields=status,message,country,regionName,city,lat,lon\"<\/span>;
<\/span>$geo_response <\/span>= @<\/span>file_get_contents<\/span>(<\/span>$geo_url<\/span>);
<\/span>$geo_data <\/span>= <\/span>$geo_response <\/span>? <\/span>json_decode<\/span>(<\/span>$geo_response<\/span>, <\/span>true<\/span>) : <\/span>null<\/span>;
if (<\/span>$geo_data <\/span>&& <\/span>$geo_data<\/span>[<\/span>'status'<\/span>] === <\/span>'success'<\/span>) {
<\/span>$lat <\/span>= <\/span>$geo_data<\/span>[<\/span>'lat'<\/span>];
<\/span>$lon <\/span>= <\/span>$geo_data<\/span>[<\/span>'lon'<\/span>];
<\/span>$location <\/span>= <\/span>$geo_data<\/span>[<\/span>'city'<\/span>] . <\/span>', ' <\/span>