I'll create a simple weather web page for Chervonohrad with randomly generated weather data. Weather in Chervonohrad

Weather in Chervonohrad

Chervonohrad, Ukraine

--°C

Humidity: --%

Wind: -- km/h

Pressure: -- hPa

5-Day Forecast

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(to bottom, #87CEEB, #1E90FF); min-height: 100vh; padding: 20px; color: #333; } .container { max-width: 800px; margin: 0 auto; background-color: rgba(255, 255, 255, 0.9); border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); overflow: hidden; } header { background-color: #1E90FF; color: white; padding: 20px; text-align: center; } header h1 { margin-bottom: 5px; } .date { font-size: 1.1rem; } main { padding: 20px; } .weather-card { background-color: white; border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .location h2 { font-size: 1.5rem; margin-bottom: 10px; color: #444; } .temperature { font-size: 3rem; font-weight: bold; margin: 15px 0; color: #1E90FF; } .weather-condition { display: flex; align-items: center; margin-bottom: 20px; font-size: 1.2rem; } .weather-icon { width: 50px; height: 50px; margin-right: 10px; background-size: contain; background-repeat: no-repeat; } .details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; } .detail { background-color: #f5f5f5; padding: 10px; border-radius: 8px; text-align: center; } .label { display: block; font-size: 0.9rem; color: #666; margin-bottom: 5px; } .forecast h3 { margin-bottom: 15px; color: #444; } .forecast-container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .forecast-item { background-color: white; border-radius: 8px; padding: 15px 10px; text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .forecast-day { font-weight: bold; margin-bottom: 5px; } .forecast-icon { width: 40px; height: 40px; margin: 10px auto; background-size: contain; background-repeat: no-repeat; } .forecast-temp { font-size: 1.1rem; font-weight: bold; color: #1E90FF; } footer { background-color: #f5f5f5; padding: 15px; text-align: center; font-size: 0.9rem; color: #666; } #refresh-btn { margin-top: 10px; padding: 8px 16px; background-color: #1E90FF; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s; } #refresh-btn:hover { background-color: #0066CC; } @media (max-width: 768px) { .details { grid-template-columns: 1fr 1fr; } .forecast-container { grid-template-columns: repeat(3, 1fr); gap: 8px; } .forecast-item:nth-child(4), .forecast-item:nth-child(5) { display: none; } } @media (max-width: 480px) { .details { grid-template-columns: 1fr; } .forecast-container { grid-template-columns: repeat(2, 1fr); } .forecast-item:nth-child(3) { display: none; } } // Weather icons mapping const weatherIcons = { 'sunny': '☀️', 'partly-cloudy': '⛅', 'cloudy': '☁️', 'rainy': '🌧️', 'thunderstorm': '⛈️', 'snowy': '❄️', 'foggy': '🌫️' }; // Weather conditions const weatherConditions = [ { condition: 'Sunny', icon: 'sunny' }, { condition: 'Partly Cloudy', icon: 'partly-cloudy' }, { condition: 'Cloudy', icon: 'cloudy' }, { condition: 'Light Rain', icon: 'rainy' }, { condition: 'Heavy Rain', icon: 'rainy' }, { condition: 'Thunderstorm', icon: 'thunderstorm' }, { condition: 'Snow', icon: 'snowy' }, { condition: 'Foggy', icon: 'foggy' } ]; // Function to get random number between min and max function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // Function to get random weather condition function getRandomWeatherCondition() { return weatherConditions[getRandomNumber(0, weatherConditions.length - 1)]; } // Function to format date function formatDate(date) { const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; return date.toLocaleDateString('en-US', options); } // Function to get day name function getDayName(date) { return date.toLocaleDateString('en-US', { weekday: 'short' }); } // Function to update current weather function updateCurrentWeather() { const currentDate = new Date(); document.getElementById('current-date').textContent = formatDate(currentDate); // Generate random weather data const temperature = getRandomNumber(-5, 30); const weatherData = getRandomWeatherCondition(); const humidity = getRandomNumber(30, 95); const windSpeed = getRandomNumber(0, 30); const pressure = getRandomNumber(990, 1030); // Update DOM document.getElementById('temp').textContent = temperature; document.getElementById('condition').textContent = weatherData.condition; document.getElementById('weather-icon').textContent = weatherIcons[weatherData.icon]; document.getElementById('humidity').textContent = humidity; document.getElementById('wind').textContent = windSpeed; document.getElementById('pressure').textContent = pressure; } // Function to update forecast function updateForecast() { const forecastContainer = document.getElementById('forecast-container'); forecastContainer.innerHTML = ''; const currentDate = new Date(); for (let i = 1; i <= 5; i++) { const forecastDate = new Date(); forecastDate.setDate(currentDate.getDate() + i); const weatherData = getRandomWeatherCondition(); const maxTemp = getRandomNumber(-2, 32); const minTemp = maxTemp - getRandomNumber(3, 10); const forecastItem = document.createElement('div'); forecastItem.className = 'forecast-item'; forecastItem.innerHTML = `

${getDayName(forecastDate)}

${weatherIcons[weatherData.icon]}

${weatherData.condition}

${minTemp}° / ${maxTemp}°

`; forecastContainer.appendChild(forecastItem); } } // Initialize weather data function initWeather() { updateCurrentWeather(); updateForecast(); } // Event listener for refresh button document.getElementById('refresh-btn').addEventListener('click', function() { initWeather(); }); // Initialize on page load document.addEventListener('DOMContentLoaded', initWeather); This weather page for Chervonohrad displays randomly generated weather data. It includes: 1. Current weather with temperature, condition, humidity, wind speed, and pressure 2. A 5-day forecast with different weather conditions 3. Responsive design that works on mobile devices 4. A refresh button to generate new random weather data You can open the index.html file in your browser to see the weather page. The data will be randomly generated each time you load the page or click the refresh button.