Weather App

{"name":"Weather App 5-23-2024","description":"Become a Weather Wizard! Check the weather in any city and toggle between Celsius and Fahrenheit with a flick of your wand.","photo":"https://jippity.s3.amazonaws.com/weatherApp.png","view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-05-23T20:07:11.327183Z","updated_at":"2024-05-23T20:07:11.327185Z","user_id":5,"status":"PUBLIC","parent_id":1419,"id":1542,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// NEXT STEPS:\n// Idea 1: Add your name to the \"[YOUR NAME]'s Weather App\" text in the draw function!\n// Idea 2: Add more cities, like the one you live in or ones you'd like to visit!\n// Idea 3: Use the 'Draw Sprite' button in the 'Assets' panel on the top right to draw icons\n////// for each city. Show your icons in the app! \n// Idea 4: Assign each weatherCode/weatherDescription a color, and change the\n////// background color depending on that data\n// Idea 5: Use the 'Draw Sprite' button again to draw icons for each weather description\n\nlet weatherData; // Variable to store weather data\nlet citySelector; // Dropdown selector for cities\nlet tempUnitButton; // Declare a button for toggling temperature units\n\nfunction setup() {\n // Create a canvas that fills the window\n createCanvas(windowWidth, windowHeight);\n // Set text alignment and size\n textAlign(CENTER, CENTER);\n textSize(24);\n\n // Create a button to toggle between Celsius and Fahrenheit\n tempUnitButton = createButton('Switch to Fahrenheit');\n tempUnitButton.position(width / 2 - tempUnitButton.width / 2, 100);\n tempUnitButton.mousePressed(toggleTempUnit);\n\n // Create the city selector dropdown and add options\n citySelector = createSelect();\n citySelector.option('London', 'London,51.5074,-0.1278');\n citySelector.option('New York', 'New York,40.7128,-74.0060');\n citySelector.option('Tokyo', 'Tokyo,35.6895,139.6917');\n citySelector.option('Sydney', 'Sydney,-33.8688,151.2093');\n citySelector.option('Paris', 'Paris,48.8566,2.3522');\n citySelector.option('Denver', 'Denver,39.7392,-104.9903');\n citySelector.option('TRIA'), 'Nope'\n // TODO: Add more cities, like the one you live in or ones you'd like to visit!\n\n // Position the dropdown in the center below the title\n citySelector.position(width / 2 - citySelector.width / 2 - 20, 70);\n // Load weather data when the selected city changes\n citySelector.changed(loadWeatherData);\n\n // Load weather data for the initially selected city\n loadWeatherData();\n}\n\nfunction draw() {\n // Set background color to sky blue\n background(135, 206, 250);\n\n // Draw the title\n fill(255);\n textSize(62);\n // TODO: Put your name here!\n text(\"Theo's Weather App\", width / 2, 40);\n\n // If weather data is available, display it\n if (weatherData) {\n textSize(24);\n text(`City: ${weatherData.city}`, width / 2, height / 2 - 40);\n text(`Temp: ${weatherData.temperature}°${isCelsius ? 'C' : 'F'}`, width / 2, height / 2);\n text(`Weather: ${weatherData.weather}`, width / 2, height / 2 + 40);\n }\n\n // Center the city selector and tempUnitButton below the title\n citySelector.position(width / 2 - citySelector.width / 2 - 20, 70);\n tempUnitButton.position(width / 2 - tempUnitButton.width / 2, 100);\n}\n\nfunction loadWeatherData() {\n // Get the selected city and its coordinates\n let selectedOption = citySelector.value().split(',');\n let city = selectedOption[0];\n let latitude = selectedOption[1];\n let longitude = selectedOption[2];\n // URL to fetch weather data from Open-Meteo API\n let url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true`;\n\n // Fetch weather data from the API\n fetch(url)\n .then(response => response.json())\n .then(data => {\n // Modify the temperature based on the selected unit\n let temperature = data.current_weather.temperature;\n if (!isCelsius) {\n temperature = temperature * 9 / 5 + 32; // Convert Celsius to Fahrenheit if needed\n }\n\n // Store the modified data in the weatherData variable\n weatherData = {\n city: city,\n temperature: temperature.toFixed(2), // Use toFixed(2) to limit the decimal places\n weather: getWeatherDescription(data.current_weather.weathercode)\n };\n })\n .catch(error => alert.error('Error fetching weather data:', error));\n}\n\nfunction getWeatherDescription(weatherCode) {\n // Map weather codes to human-readable descriptions\n // You can change these, but they should still describe generally the same weather\n // because that's what the codes really mean!\n const weatherDescriptions = {\n 0: 'Clear sky',\n 1: 'Mainly clear',\n 2: 'Partly cloudy',\n 3: 'Overcast',\n 45: 'Fog',\n 48: 'Depositing rime fog',\n 51: 'Drizzle: Light intensity',\n 53: 'Drizzle: Moderate intensity',\n 55: 'Drizzle: Dense intensity',\n 56: 'Freezing Drizzle: Light intensity',\n 57: 'Freezing Drizzle: Dense intensity',\n 61: 'Rain: Slight intensity',\n 63: 'Rain: Moderate intensity',\n 65: 'Rain: Heavy intensity',\n 66: 'Freezing Rain: Light intensity',\n 67: 'Freezing Rain: Heavy intensity',\n 71: 'Snow fall: Slight intensity',\n 73: 'Snow fall: Moderate intensity',\n 75: 'Snow fall: Heavy intensity',\n 77: 'Snow grains',\n 80: 'Rain showers: Slight',\n 81: 'Rain showers: Moderate',\n 82: 'Rain showers: Violent',\n 85: 'Snow showers: Slight',\n 86: 'Snow showers: Heavy',\n 95: 'Thunderstorm: Slight or moderate',\n 96: 'Thunderstorm with slight hail',\n 99: 'Thunderstorm with heavy hail'\n };\n\n // Return the description for the given weather code\n return weatherDescriptions[weatherCode] || 'Unknown weather';\n}\n\nlet isCelsius = true; // Track the current temperature unit, default is Celsius\n\nfunction toggleTempUnit() {\n // Toggle the temperature unit\n isCelsius = !isCelsius;\n // Update the button label based on the current unit\n tempUnitButton.html(isCelsius ? 'Switch to Fahrenheit' : 'Switch to Celsius');\n // Reload the weather data to reflect the change in temperature unit\n loadWeatherData();\n}\n\n","style.css":"","index.html":"\n\n\n\n \n \n Weather App\n\n\n\n \n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[]}