Weather App

{"name":"Weather App 8-15-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://res.cloudinary.com/dzv7hjwfn/image/upload/gewsoqufeetdqkgwekdp","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-08-15T14:17:20.510305Z","updated_at":"2024-08-15T14:17:20.510308Z","user_id":5,"status":"PRIVATE","parent_id":1419,"id":2698,"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. Alternatively, use emojies as your icons. 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\n// WEATHER APP TEMPLATE\n// ————— by Kristen —————\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 // 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(32);\n // TODO: Put your name here!\n text(\"[YOUR NAME]'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 => console.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":[{"cloudinary_id":"gewsoqufeetdqkgwekdp","name":"coverimg","deleted":false,"id":17386,"created_at":"2024-08-15T14:17:20.522411Z","project_id":2698,"resource_type":"image"},{"cloudinary_id":"qubejnxum1o1vqmcu6kf","name":"coverimg2","deleted":false,"id":17385,"created_at":"2024-08-15T14:17:20.520409Z","project_id":2698,"resource_type":"image"}],"messages_sent":0,"comments":[],"steps":[{"instruction":"Share your name, so we can add your name to the \"[YOUR NAME]'s Weather App\" text in the draw function!","title":"Swap in your name!","created_at":"2024-05-28T23:04:52.423220","project_id":2698,"complete":false,"step_number":1,"updated_at":"2024-08-15T14:17:20.514628","id":10537},{"instruction":"Add more cities, like the one you live in or ones you'd like to visit!","title":"Add more cities","created_at":"2024-05-28T23:08:03.782416","project_id":2698,"complete":false,"step_number":2,"updated_at":"2024-08-15T14:17:20.514731","id":10538}]}