Javascript, HTML, CSS Code
<html> <head> <script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Weather App</title> <meta name="description" content="Get the current weather and forecast for any location."> <meta name="keywords" content="weather, forecast, location"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Built-In Functions for Apps --> <script type="text/javascript"> var localStoragePrefix = "ct-168110723263073"; var lastSave = 0; // save to localstorage function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } // save to cookie let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } // load from localstorage function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } // get weather data from API function getWeatherData(location) { let api_key = "YOUR_API_KEY"; let url_current = "https://api.openweathermap.org/data/2.5/weather?q=" + location + "&appid=" + api_key + "&units=metric"; let url_forecast = "https://api.openweathermap.org/data/2.5/forecast?q=" + location + "&cnt=5&appid=" + api_key + "&units=metric"; let current_weather = {}; let forecast = []; // get current weather data $.ajax({ async: false, url: url_current, success: function(data) { current_weather = { city: data.name, country: data.sys.country, temp: data.main.temp, weather: data.weather[0].description, icon: "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png", humidity: data.main.humidity, wind_speed: data.wind.speed, wind_direction: data.wind.deg, sunrise: data.sys.sunrise, sunset: data.sys.sunset, timestamp: new Date().getTime() }; }, error: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown); } }); // get forecast data $.ajax({ async: false, url: url_forecast, success: function(data) { for (let i = 0; i < data.list.length; i++) { let forecast_data = { date: data.list[i].dt_txt, temp: data.list[i].main.temp, weather: data.list[i].weather[0].description, icon: "http://openweathermap.org/img/w/" + data.list[i].weather[0].icon + ".png", humidity: data.list[i].main.humidity, wind_speed: data.list[i].wind.speed, wind_direction: data.list[i].wind.deg }; forecast.push(forecast_data); } }, error: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown); } }); return { current_weather: current_weather, forecast: forecast }; } // display weather data in the app function displayWeatherData(weather_data) { // display current weather data $("#city").text(weather_data.current_weather.city + ", " + weather_data.current_weather.country); $("#temp").text(weather_data.current_weather.temp + " °C"); $("#weather").text(weather_data.current_weather.weather); $("#icon").attr("src", weather_data.current_weather.icon); $("#humidity").text("Humidity: " + weather_data.current_weather.humidity + "%"); $("#wind_speed").text("Wind Speed: " + weather_data.current_weather.wind_speed + " km/h"); $("#wind_direction").text("Wind Direction: " + weather_data.current_weather.wind_direction + "°"); $("#sunrise").text("Sunrise: " + new Date(weather_data.current_weather.sunrise * 1000).toLocaleTimeString()); $("#sunset").text("Sunset: " + new Date(weather_data.current_weather.sunset * 1000).toLocaleTimeString()); // display forecast data for (let i = 0; i < weather_data.forecast.length; i++) { $("#forecast-date-" + i).text(new Date(weather_data.forecast[i].date).toLocaleDateString()); $("#forecast-temp-" + i).text(weather_data.forecast[i].temp + " °C"); $("#forecast-weather-" + i).text(weather_data.forecast[i].weather); $("#forecast-icon-" + i).attr("src", weather_data.forecast[i].icon); $("#forecast-humidity-" + i).text("Humidity: " + weather_data.forecast[i].humidity + "%"); $("#forecast-wind_speed-" + i).text("Wind Speed: " + weather_data.forecast[i].wind_speed + " km/h"); $("#forecast-wind_direction-" + i).text("Wind Direction: " + weather_data.forecast[i].wind_direction + "°"); } } // get location input from user and display weather data $("#location-form").submit(function(event) { event.preventDefault(); let location = $("#location-input").val(); let weather_data = getWeatherData(location); displayWeatherData(weather_data); saveLocal(weather_data); }); // load weather data from local storage let weather_data = loadLocal(); if (weather_data) { displayWeatherData(weather_data); } </script> <style> #main-container { padding-top: 20px; } .form-control { width: 100%; } .card { margin-bottom: 20px; } .card-header { font-size: 24px; font-weight: bold; } .card-body { font-size: 18px; } .forecast { display: flex; flex-wrap: wrap; justify-content: center; } .forecast-card { width: 200px; margin-right: 20px; margin-bottom: 20px; } .forecast-card:last-child { margin-right: 0; } .forecast-card-header { font-size: 20px; font-weight: bold; } .forecast-card-body { font-size: 16px; } .forecast-icon { width: 50px; height: 50px; } </style> <link rel="canonical" href="https://calculator.tools/prompt/48/"> <meta charset="utf-8"> </head> <body> <div id="main-container" class="container"> <div class="card"> <div class="card-header"> Current Weather </div> <div class="card-body"> <form id="location-form"> <div class="row"> <div class="col-8"> <input id="location-input" class="form-control" type="text" placeholder="Enter a location..."> </div> <div class="col-4"> <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i> Search</button> </div> </div> </form> <hr> <div class="row"> <div class="col-6"> <div class="text-center"> <img id="icon" class="mb-3" src="" alt="Weather Icon"> <h3 id="temp"></h3> <h4 id="weather"></h4> </div> <ul class="list-unstyled"> <li id="humidity"></li> <li id="wind_speed"></li> <li id="wind_direction"></li> <li id="sunrise"></li> <li id="sunset"></li> </ul> </div> <div class="col-6"> <h4 id="city"></h4> </div> </div> </div> </div> <div class="card"> <div class="card-header"> 5-Day Forecast </div> <div class="card-body"> <div class="forecast"> <div class="forecast-card" id="forecast-card-0"> <div class="text-center"> <img class="forecast-icon" id="forecast-icon-0" src="" alt="Weather Icon"> <h5 id="forecast-date-0"></h5> <h6 id="forecast-temp-0"></h6> <p id="forecast-weather-0"></p> </div> <ul class="list-unstyled forecast-card-body"> <li id="forecast-humidity-0"></li> <li id="forecast-wind_speed-0"></li> <li id="forecast-wind_direction-0"></li> </ul> </div> <div class="forecast-card" id="forecast-card-1"> <div class="text-center"> <img class="forecast-icon" id="forecast-icon-1" src="" alt="Weather Icon"> <h5 id="forecast-date-1"></h5> <h6 id="forecast-temp-1"></h6> <p id="forecast-weather-1"></p> </div> <ul class="list-unstyled forecast-card-body"> <li id="forecast-humidity-1"></li> <li id="forecast-wind_speed-1"></li> <li id="forecast-wind_direction-1"></li> </ul> </div> <div class="forecast-card" id="forecast-card-2"> <div class="text-center"> <img class="forecast-icon" id="forecast-icon-2" src="" alt="Weather Icon"> <h5 id="forecast-date-2"></h5> <h6 id="forecast-temp-2"></h6> <p id="forecast-weather-2"></p> </div> <ul class="list-unstyled forecast-card-body"> <li id="forecast-humidity-2"></li> <li id="forecast-wind_speed-2"></li> <li id="forecast-wind_direction-2"></li> </ul> </div> <div class="forecast-card" id="forecast-card-3"> <div class="text-center"> <img class="forecast-icon" id="forecast-icon-3" src="" alt="Weather Icon"> <h5 id="forecast-date-3"></h5> <h6 id="forecast-temp-3"></h6> <p id="forecast-weather-3"></p> </div> <ul class="list-unstyled forecast-card-body"> <li id="forecast-humidity-3"></li> <li id="forecast-wind_speed-3"></li> <li id="forecast-wind_direction-3"></li> </ul> </div> <div class="forecast-card" id="forecast-card-4"> <div class="text-center"> <img class="forecast-icon" id="forecast-icon-4" src="" alt="Weather Icon"> <h5 id="forecast-date-4"></h5> <h6 id="forecast-temp-4"></h6> <p id="forecast-weather-4"></p> </div> <ul class="list-unstyled forecast-card-body"> <li id="forecast-humidity-4"></li> <li id="forecast-wind_speed-4"></li> <li id="forecast-wind_direction-4"></li> </ul> </div> </div> </div> </div> </div> <script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script> </body> </html>
Weather App
Calculator Tools