Reverse Engineer the Web Week 4

{"name":"REtW 4 [Brownsville]","description":"APIs/external libraries","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/e8s6ogqhpbyrs8grgcue","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-12-03T20:08:37.951599Z","updated_at":"2024-12-03T20:08:37.951602Z","user_id":181,"status":"PRIVATE","parent_id":4836,"id":4845,"user":{"username":"godlover4sara_7230","id":181,"password_hash":"$2b$12$1DCv9y2okn6Vn33npwN79OworUFt5TD/AyKoWzGGVl0RFZXAbST2m","updated_at":"2024-08-19T18:23:01.459302Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"sara.saxon@alpha.school","recess_id":"77ec586b-018d-4064-a82e-4c2664d6a2c9","created_at":"2024-08-19T18:23:01.459298Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"/*\nProgramming rests on, by now, a long tradition. \nEarly programming languages were \"close to the metal\" — that is to say, they handled circuitry and logic gates, less resembling human language.\nNow we have JavaScript and other languages that feature words and phrases and indeed something like grammatical structure.\nYou don't have to worry about the inner workings of the CPU or memory, in most cases.\nWith Jippity, you can spell out your ideas in plain English!\n\nThis is great news. It is *hard* to build a computer from scratch. We don't have to!\nBut it gets better.\nOther programmers release *libraries*: repositories of code designed for various purposes that cut out the \"from scratch\" work.\nJust about every program in existence relies on the existence of one (or likely many more) libraries.\nA large part of being a programmer is finding the right libraries and learning to wield them.\n\nHow do you use a library? The answer is its __API__.\nAPI stands for \"application programming interface.\"\nAn API is a way for two computers or programs to communicate.\n\nFor instance, we want to use the p5.js library today.\np5.js handles all sorts of visual processing and interaction and it's a phenomenal gateway to JS programming.\nIt's easy enough to load into our web page — check the HTML file to see how — but then how do we do stuff with it?\n\nYou basically just call functions that would otherwise not be there!\n\nIt's up to you to study *documentation* to learn about the built-in functions and how to use them.\nYou will recognize a lot of the *API calls* for p5.js.\n*/\n\n//GOAL ONE: build a basic Weather App with p5 and the open-meteo API.\n//(Thanks to Kris10, excellent Jippity mentor, for much of this code.)\n\n//standard JS variables for later. No API calls just yet; skip ahead.\nlet weatherData;\nlet citySelector;\nlet tempUnitButton;\nlet isCelsius = true;\nlet isLoadingWeatherData = false;\n\n//This is for the audio app.\nlet toot;\nlet song;\nlet tootButton;\nlet songButton;\n\n//The setup() function is not built in to JavaScript. It is built into p5.\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n textAlign(CENTER, CENTER);\n textSize(24);\n\n tempUnitButton = createButton('Celsius');\n tempUnitButton.position(width / 2 - tempUnitButton.width / 2, 100);\n tempUnitButton.mousePressed(toggleTempUnit);\n\n citySelector = createSelect();\n citySelector.option('Brownsville', 'Brownsville,25.901747,-97.497482');\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('Osaka', 'Osaka,34.6937,135.5023'); // Corrected latitude and longitude\n\n citySelector.position(width / 2 - citySelector.width / 2 - 20, 70);\n citySelector.changed(loadWeatherData);\n\n loadWeatherData();\n\n projectSelector = createSelect();\n projectSelector.position(10, 10); \n projectSelector.option('Weather App', 'weather');\n projectSelector.option('Howler Web Audio', 'howler'); \n projectSelector.changed(loadProject); \n}\n\nfunction loadProject() {\n let project = projectSelector.value();\n if (project === 'weather') {\n if (tootButton) {\n tootButton.remove();\n tootButton = null;\n }\n if (songButton) {\n songButton.remove();\n songButton = null;\n }\n reloadWeatherApp();\n } else if (project === 'howler') {\n background(139, 0, 139);\n citySelector.remove();\n tempUnitButton.remove();\n weatherData = null;\n initHowlerDemo();\n }\n}\n\nfunction loadWeatherData() {\n let selectedOption = citySelector.value().split(',');\n let city = selectedOption[0];\n let latitude = selectedOption[1];\n let longitude = selectedOption[2];\n\n console.log(`Fetching weather data for: ${city} (Lat: ${latitude}, Lon: ${longitude})`); // Log the location info\n\n let url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true`;\n\n fetch(url)\n .then(response => response.json())\n .then(data => {\n console.log('API Response:', JSON.stringify(data, null, 2)); // Log the entire API response in a readable format// Log the entire API response in a readable format\n\n // Check if current_weather exists and has a temperature\n if (data.current_weather && data.current_weather.temperature !== undefined) {\n let temperature = data.current_weather.temperature;\n if (!isCelsius) {\n temperature = temperature * 9 / 5 + 32;\n }\n\n weatherData = {\n city: city,\n temperature: temperature.toFixed(2),\n weather: getWeatherDescription(data.current_weather.weathercode)\n };\n\n updateBackgroundColor(temperature);\n isLoadingWeatherData = false;\n } else {\n console.error('Temperature data is missing in the API response.');\n isLoadingWeatherData = false;\n }\n })\n .catch(error => {\n console.error('Error fetching weather data:', error);\n isLoadingWeatherData = false;\n });\n}\n\nfunction draw() {\n if (projectSelector.value() === 'weather') {\n if (isLoadingWeatherData) {\n background(135, 206, 250);\n fill(255);\n textSize(32);\n text(\"Loading...\", width / 2, height / 2);\n } else if (weatherData) {\n fill(255);\n textSize(32);\n text(\"What's the Weather?\", width / 2, 40);\n textSize(24);\n text(`${weatherData.city}`, width / 2, height / 2 - 40);\n text(`${weatherData.temperature}°${isCelsius ? 'C' : 'F'}`, width / 2, height / 2);\n text(`${weatherData.weather}`, width / 2, height / 2 + 40);\n }\n } else if (projectSelector.value() === 'howler') {\n // This is for the audio app.\n }\n}\n\nfunction updateBackgroundColor(temperature) {\n let temperatureCelsius = isCelsius ? temperature : (temperature - 32) * (5 / 9);\n temperatureCelsius = constrain(temperatureCelsius, 0, 40);\n let hue = map(temperatureCelsius, 0, 40, 240, 0);\n colorMode(HSL);\n background(hue, 80, 45);\n colorMode(RGB);\n}\n\nfunction toggleTempUnit() {\n isCelsius = !isCelsius;\n tempUnitButton.html(isCelsius ? 'Celsius' : 'Fahrenheit');\n if (weatherData) {\n if (isCelsius) {\n weatherData.temperature = ((parseFloat(weatherData.temperature) - 32) * (5 / 9)).toFixed(2);\n } else {\n weatherData.temperature = ((parseFloat(weatherData.temperature) * (9 / 5)) + 32).toFixed(2);\n }\n }\n if (weatherData) updateBackgroundColor(parseFloat(weatherData.temperature));\n}\n\nfunction getWeatherDescription(weatherCode) {\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 return weatherDescriptions[weatherCode] || 'Unknown weather';\n}\n\nfunction reloadWeatherApp() {\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.position(width / 2 - citySelector.width / 2 - 20, 70);\n citySelector.changed(loadWeatherData);\n\n tempUnitButton = createButton(isCelsius ? 'Fahrenheit' : 'Celsius');\n tempUnitButton.position(width / 2 - tempUnitButton.width / 2, 100);\n tempUnitButton.mousePressed(toggleTempUnit);\n\n background(135, 206, 250);\n loadWeatherData();\n}\n\nfunction initHowlerDemo() {\n fill(255);\n textSize(24);\n text(\"Make Some Noise!\", width / 2, 20);\n\n tootButton = createButton('Toot');\n tootButton.position(width / 2 - tootButton.width / 2, 80);\n tootButton.mousePressed(playToot);\n\n toot = new Howl({\n src: [\"@asset('toot')\"],\n html5: true,\n autoplay: false,\n loop: false,\n volume: 0.5,\n onend: function () {\n console.log('Tooted!');\n }\n });\n\n songButton = createButton('Song');\n songButton.position(width / 2 - songButton.width / 2, 120);\n songButton.mousePressed(playSong);\n}\n\nfunction playToot() {\n if (toot) {\n toot.play();\n } else {\n console.log(\"The toot sound has not been initialized.\");\n }\n}\n\nfunction playSong() {\n if (!song) {\n song = new Howl({\n src: [\"@asset('song')\"],\n html5: true,\n volume: 1,\n autoplay: false,\n loop: true,\n });\n }\n\n if (!song.playing()) {\n song.volume(0);\n song.play();\n song.fade(0, 1, 7000);\n console.log('Fading in...');\n song.rate(1);\n } else {\n song.fade(song.volume(), 0, 5000);\n setTimeout(() => song.stop(), 5000);\n }\n}","style.css":"/* No CSS Today. */","index.html":"\n\n\n\n \n \n Reverse Engineer the Web Week 4\n\n\n\n\n\n\n \n \n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"e8s6ogqhpbyrs8grgcue","project_id":4845,"created_at":"2024-12-03T20:08:37.973592Z","deleted":false,"name":"ss","resource_type":"image","id":50586},{"cloudinary_id":"rmu22kagfogcc1yrmzu0","project_id":4845,"created_at":"2024-12-03T20:08:37.971512Z","deleted":false,"name":"toot","resource_type":"video","id":50585},{"cloudinary_id":"sbe5fqgh3oreobk6zx2e","project_id":4845,"created_at":"2024-12-03T20:08:37.965785Z","deleted":false,"name":"song","resource_type":"video","id":50584}],"messages_sent":0,"comments":[],"steps":[{"instruction":"Integrate open-meteo.com API to fetch weather data for any city.","title":"Weather API Integration","created_at":"2024-05-13T21:29:51.404549","project_id":4845,"complete":false,"step_number":0,"updated_at":"2024-12-03T20:08:37.954742","id":11417},{"instruction":"Implement a toggle button to switch between Celsius and Fahrenheit.","title":"Toggle Button","created_at":"2024-05-13T21:29:51.404638","project_id":4845,"complete":false,"step_number":1,"updated_at":"2024-12-03T20:08:37.954866","id":11418},{"instruction":"Change the background based on the weather conditions.","title":"Dynamic Background","created_at":"2024-05-13T21:29:51.404713","project_id":4845,"complete":false,"step_number":2,"updated_at":"2024-12-03T20:08:37.954943","id":11419},{"instruction":"Add a search bar for users to select a city and check the weather.","title":"City Selector","created_at":"2024-05-13T21:29:51.404775","project_id":4845,"complete":false,"step_number":3,"updated_at":"2024-12-03T20:08:37.955011","id":11420},{"instruction":"Ensure the app is responsive and works well on different devices.","title":"Responsive Design","created_at":"2024-05-13T21:29:51.404836","project_id":4845,"complete":false,"step_number":4,"updated_at":"2024-12-03T20:08:37.955060","id":11421},{"instruction":"Display weather icons to represent the current weather conditions.","title":"Weather Icons","created_at":"2024-05-13T21:29:51.404897","project_id":4845,"complete":false,"step_number":5,"updated_at":"2024-12-03T20:08:37.955106","id":11422},{"instruction":"Show additional weather details such as humidity, wind speed, etc.","title":"Weather Details","created_at":"2024-05-13T21:29:51.404966","project_id":4845,"complete":false,"step_number":6,"updated_at":"2024-12-03T20:08:37.955153","id":11423},{"instruction":"Add a fun animation of a magic wand for toggling between units.","title":"Magic Wand Animation","created_at":"2024-05-13T21:29:51.405025","project_id":4845,"complete":false,"step_number":7,"updated_at":"2024-12-03T20:08:37.955197","id":11424}]}