Weather App

{"name":"Arthur's weather!","description":"basically the weather template but without denver and it looks better with modern internet lingo","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/gewsoqufeetdqkgwekdp","view_count":2,"fork_count":0,"expires_at":null,"created_at":"2025-04-28T21:53:44.654393Z","updated_at":"2025-04-28T21:53:44.654399Z","user_id":164,"status":"PUBLIC","parent_id":1419,"id":7698,"user":{"photo":null,"email":null,"recess_id":"1da57aa9-4276-4da2-af12-2c038cb5ab1b","created_at":"2024-08-01T21:27:30.025690Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"arthurconditioning","id":164,"password_hash":null,"updated_at":"2024-08-01T21:27:30.025694Z","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;\n\n// Variable to store weather data\nlet citySelector;\n\n// Dropdown selector for cities\nlet tempUnitButton;\n\nlet isCelsius = true;\n\nlet colors = [\n [135, 206, 250], // Sky Blue\n [255, 223, 186], // Light Peach\n [255, 102, 102], // Light Red\n [102, 178, 255], // Light Blue\n [255, 255, 102], // Light Yellow\n];\n\nlet colorIndex = 0;\n\nlet colorChangeSpeed = 1;\n\nlet r = 0;\n\nlet g = 0;\n\nlet b = 0;\n\nlet hueValue = 0;\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('Philadelphia', 'Philadelphia,39.952583,-75.165222');\n citySelector.option('columbus', 'columbus, 39.9612,-82.9988');\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 the background color to solid red\n background(255, 0, 0); // RGB value for red\n\n // Draw the title\n fill(0); // Change text color to black\n textSize(32);\n // TODO: Put your name here!\n text(\"Arthur'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: 'can see👍',\n 1: 'can almost fully see',\n 2: 'cant see nearly as much',\n 3: 'half blind',\n 45: 'cant see😭',\n 48: 'genuinely have no idea what \"depositing rime fog\" is',\n 51: 'drizzle small',\n 53: 'drizzle medium',\n 55: 'drizzle big',\n 56: 'lighter cold rain🥶',\n 57: 'light cold rain🥶',\n 61: 'small puddles',\n 63: 'medium puddles',\n 65: 'big puddles',\n 66: 'cold rain',\n 67: 'rain🥶',\n 71: 'snow smol',\n 73: 'snow medium',\n 75: 'snow very big',\n 77: 'uhh i forgot what was here',\n 80: 'nice rain',\n 81: 'garage water',\n 82: 'flooding',\n 85: 'half an inch of snow',\n 86: '6 inches of snow soon',\n 95: 'power might be out for a bit',\n 96: 'maybe might not want to go outside',\n 99: 'dont go outside i beg'\n };\n\n // Return the description for the given weather code\n return weatherDescriptions[weatherCode] || 'Unknown weather';\n}\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":[{"message":"","project_id":7698,"created_at":"2025-04-28T21:59:53.909166Z","output_tokens":null,"sender":"client_script","code_id":238535,"deleted":0,"input_tokens":null,"id":139260},{"message":"","project_id":7698,"created_at":"2025-04-28T22:00:35.300830Z","output_tokens":null,"sender":"client_script","code_id":238537,"deleted":0,"input_tokens":null,"id":139261}],"assets":[{"project_id":7698,"creator":null,"cloudinary_id":"gewsoqufeetdqkgwekdp","deleted":false,"id":72933,"created_at":"2025-04-28T21:23:50.950330Z","name":"coverimg","resource_type":"image","tags":null},{"project_id":7698,"creator":null,"cloudinary_id":"qubejnxum1o1vqmcu6kf","deleted":false,"id":72932,"created_at":"2025-04-28T21:23:50.943433Z","name":"coverimg2","resource_type":"image","tags":null}],"messages_sent":10,"comments":[],"steps":[{"title":"Swap in your name!","instruction":"Share your name, so we can add your name to the \"[YOUR NAME]'s Weather App\" text in the draw function!","created_at":"2024-05-28T23:04:52.423220","project_id":7698,"complete":false,"step_number":1,"updated_at":"2025-04-28T21:23:50.935168","id":12001},{"title":"Add more cities","instruction":"Add more cities, like the one you live in or ones you'd like to visit!","created_at":"2024-05-28T23:08:03.782416","project_id":7698,"complete":false,"step_number":2,"updated_at":"2025-04-28T21:23:50.935340","id":12002}]}