Reverse Engineer the Web Week 4

{"name":"REtW Week 4","description":"Become a Weather Wizard! Check the weather in any city and toggle between Celsius and Fahrenheit with a flick of your wand.","photo":null,"view_count":4,"fork_count":1,"expires_at":null,"created_at":"2024-05-16T23:06:15.348188Z","updated_at":"2024-05-16T23:06:15.348190Z","user_id":2,"status":"PUBLIC","parent_id":1436,"id":1464,"user":{"photo":null,"email":null,"recess_id":"a75a82d5-5ae6-41b7-d20f-788415be036d","created_at":"2023-12-11T22:13:50.357940Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":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\n/*\nThe setup() function is not built in to JavaScript. It is built into p5.\np5 knows automatically to call setup() exactly once when the web page loads.\nThat's helpful for, well, setup.\nThat's an API call! Boom!\n*/\nfunction setup() {\n //These three functions are also built into p5.\n //It's clear what they do, and it's so nice to have one-line functions to do them.\n //It'd be a pain to have to write all this from scratch.\n createCanvas(windowWidth, windowHeight);\n textAlign(CENTER, CENTER);\n textSize(24);\n\n //We made buttons in HTML before. You can also do this in JS.\n tempUnitButton = createButton('Fahrenheit');\n tempUnitButton.position(width / 2 - tempUnitButton.width / 2, 100);\n tempUnitButton.mousePressed(toggleTempUnit);\n\n //You can make a dropdown menu — a 'Select' — too.\n citySelector = createSelect();\n //The names of the options are cities.\n //The data they contain are cities plus coordinates. This is so that we can communicate with the weather API the way it expects.\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 //We call loadWeatherData when someone changes the menu option.\n //That is NOT an API call — that's our own function that we'll write below.\n citySelector.changed(loadWeatherData);\n\n //And indeed we'll load the weather data by default when the page loads.\n loadWeatherData();\n\n\n //We are going to make another little app on the same page to show another example of API calling.\n //Let's make another menu to switch between apps, and we'll fill in the details later.\n projectSelector = createSelect();\n projectSelector.position(10, 10); //Top left\n projectSelector.option('Weather App', 'weather');\n projectSelector.option('Howler Web Audio', 'howler'); //The other project will be about audio.\n projectSelector.changed(loadProject); //Load whichever project we select.\n\n}\n\nfunction loadProject() {\n let project = projectSelector.value();\n if (project === 'weather') {\n //We are going to remove buttons that are relevant to the other App, if they exist.\n if (tootButton) {\n tootButton.remove();\n tootButton = null;\n }\n if (songButton) {\n songButton.remove();\n songButton = null;\n }\n // Reload the weather app elements and data\n reloadWeatherApp();\n } else if (project === 'howler') {\n //This stuff is for the other app.\n //A dark magenta background...\n background(139, 0, 139);\n //..and then we remove all the weather-related stuff.\n citySelector.remove();\n tempUnitButton.remove();\n weatherData = null;\n //Finally, call the function that setups up the other app (the Howler Demo).\n initHowlerDemo();\n }\n}\n\n//Here's our main API usage. We are going to go fetch some information from a weather service then use it in our app.\nfunction loadWeatherData() {\n //This tracks which city we pick.\n let selectedOption = citySelector.value().split(','); //What does .split() do?\n //The city has three parts: name, latitude, and longitude. We save those individually.\n let city = selectedOption[0];\n let latitude = selectedOption[1];\n let longitude = selectedOption[2];\n /*\n OK this is the critical part. We have to make a request to the Open-Meteo weather service. How?\n First, a little research. Go to https://open-meteo.com/ and poke around. 'Documentation' has a ton of, well, yeah.\n There is a TON of options. Jippity can help you make sense of the URL system too. \n We'll keep it simple: we need to build a URL that takes latitude and longitude and fetches the weather.\n Our job: write the URL. Their job: give us weather data.\n Notice the ${variable} syntax. That lets us customize URLs per city. Very cool!\n */\n let url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true`;\n //The above URL will get the job done. (Figured this out from: research; asking an expert; or asking Jippity.)\n\n /*\n But what do we get back from that URL? The answer is a .json file.\n .json is a text formatting system, ubiquitous across the Web and data science. Look it up if you're curious.\n We use the \"fetch\" API (yet another API) to organize the data from the URL.\n This kind of thing is a little harder to read. I recommend getting Jippity's help when you're building this stuff.\n */\n fetch(url)\n .then(response => response.json())\n .then(data => {\n //Within the data, there's a section called current_weather.\n //Within current_weather, there's a section called temperature.\n //We store that number in our own temperature variable.\n let temperature = data.current_weather.temperature;\n //In America, we use degrees Fahrenheit. Let's include the math conversion for Fahrenheit should we want it.\n if (!isCelsius) { // the ! means \"not\". As in, \"if NOT Celsius...\"\n temperature = temperature * 9 / 5 + 32;\n }\n\n //Let's make our own multi-part variable to store the data we want.\n //weatherData has 3 \"key-value pairs\". The key is the description; the value is the actual data.\n weatherData = {\n city: city,\n temperature: temperature.toFixed(2), // toFixed(2) chops extra decimal places.\n weather: getWeatherDescription(data.current_weather.weathercode)\n //within current_weather, there's also a \"weathercode\", which is just a number.\n //But that number represents a type of weather (Sunny, Cloudy, ...). We'll translate those numbers using getWeatherDescription(), written below.\n };\n\n //Let's write a function later to change the background color based on temperature.\n updateBackgroundColor(temperature);\n\n //We'll also keep tracking of whether or not the page is loading, to avoid bugs and glitchy visuals.\n isLoadingWeatherData = false;\n })\n //This handles errors.\n .catch(error => {\n console.error('Error fetching weather data:', error);\n isLoadingWeatherData = false;\n });\n}\n/*\nThat function is the main *API* call. It fetches and organizes our data. Now let's put it on screen. \nThen we'll write helper functions to make it all work together.\n*/\n\n//draw is part of the p5 API. It runs every frame, 60x per second by default.\nfunction draw() {\n if (projectSelector.value() === 'weather') {\n if (isLoadingWeatherData) { //If stuck loading, show this stuff (all p5 API calls!)\n background(135, 206, 250);\n fill(255);\n textSize(32);\n text(\"Loading...\", width / 2, height / 2);\n //Otherwise, when finished loading, do this.\n } else if (weatherData) { //check that 'weatherData' exists, then...\n //...some text...\n fill(255);\n textSize(32);\n text(\"What's the Weather?\", width / 2, 40);\n\n //...and some more text, filled in with the information we stored in the weatherData variable.\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') { //This is for the audio app.\n\n }\n}\n\n//To close the loop, let's write some functions that support the weather app.\n\n//Let's change the background color. Cold: blue; Hot: red. And everything in between!\nfunction updateBackgroundColor(temperature) {\n // We'll do math relative to Celsius. So if Fahrenheit, convert.\n let temperatureCelsius = isCelsius ? temperature : (temperature - 32) * (5 / 9);\n\n //We'll set 0º as the minimum and 40º as the maximum.\n temperatureCelsius = constrain(temperatureCelsius, 0, 40);\n\n //We'll use the Hue-Saturation-Lightness color system.\n //The JS map function is useful for mapping a range of numbers to another range of numbers.\n //We want 0 degrees to correspond to 240 hue (blue); and 40 degrees to correspond to 0 hue (red), with *interpolation*\n let hue = map(temperatureCelsius, 0, 40, 240, 0);\n\n //Tell p5 to use HSL (instead of RGB).\n colorMode(HSL);\n //Now set the background color. We calculated hue. Saturation and Lightness will be pre-set.\n background(hue, 80, 45);\n\n //Back to RGB as default, for later.\n colorMode(RGB);\n}\n\n//This handles the button that changes temperature scales.\nfunction toggleTempUnit() {\n // Toggle between Celsius and not Celsius (= Fahrenheit)\n isCelsius = !isCelsius;\n //Toggle the button text too.\n tempUnitButton.html(isCelsius ? 'Fahrenheit' : 'Celsius');\n //Assume the button has been pressed. Now do the conversion.\n if (weatherData) {\n if (isCelsius) {\n //If you want Celsius from Fahrenheit:\n weatherData.temperature = ((parseFloat(weatherData.temperature) - 32) * (5 / 9)).toFixed(2);\n } else {\n //If you want Fahrenheit from Celsius:\n weatherData.temperature = ((parseFloat(weatherData.temperature) * (9 / 5)) + 32).toFixed(2);\n }\n }\n //Just to be safe, update the background color.\n if (weatherData) updateBackgroundColor(parseFloat(weatherData.temperature));\n}\n\n//This translates weather codes into English descriptions (had to look this up).\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\n //Then just spit out the English description.\n return weatherDescriptions[weatherCode] || 'Unknown weather';\n}\n\n//This function will reload the weather app when we switch back from the audio app.\n//setup() won't run again, so we need to reload the weather app.\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\n loadWeatherData();\n\n}\n/*\nAlright, our Weather app is looking good. \nIt relied on the open-meteo API for the actual weather data, and the p5.js API for visual stuff.\nYou should be glad those APIs exist! Otherwise you'd have to fly to Sydney and set up a thermometer...translate its data to something you can use.....\n\nLet's work on a totally different example: Web audio.\nWe'll use the Howler API. It's free and chill.\n\nThe first step, as always, is to figure out how the basics work.\nAsk Jipity or read documentation to learn basic structures.\n*/\n\n//Here's the function we'll call when we load the Howler demo.\nfunction initHowlerDemo() {\n // We'll display some text.\n fill(255);\n textSize(24);\n text(\"Make Some Noise!\", width / 2, 20);\n\n //And a button.\n tootButton = createButton('Toot');\n tootButton.position(width / 2 - tootButton.width / 2, 80);\n //We'll write this playToot function in a minute.\n tootButton.mousePressed(playToot);\n\n //Howler works by creating an *object* called a \"Howl\".\n //When you make a new Howl, you have to give it some properties.\n toot = new Howl({\n src: [\"@asset('toot')\"], //Loaded this sound into this project already. You can upload your own!\n html5: true,\n autoplay: false,\n loop: false,\n volume: 0.5,\n onend: function () {\n console.log('Tooted!');\n }\n });\n //Let's test this out with a simple function to actually play the sound. See below.\n\n //In a moment, we'll make another Howl and explore some other parts of the API.\n //Let's make a button for that too.\n songButton = createButton('Song');\n songButton.position(width / 2 - songButton.width / 2, 120);\n songButton.mousePressed(playSong);\n}\n\nfunction playToot() {\n //Make sure the file loaded...\n if (toot) {\n //..then play it! This is the beauty of the API. \n //Some dude wrote code that means we can just call .play() and get what we want.\n toot.play();\n } else {\n console.log(\"The toot sound has not been initialized.\");\n }\n}\n\nfunction playSong() {\n //We'll make a new Howl called 'song', as long as one doesn't already exist.\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 //Notice that here we are loading in the file when we click the button, not before.\n //This is probably not the best idea but I wanted to show you that it works.\n\n if (!song.playing()) { //If the song if NOT yet playing...\n song.volume(0); // Start silent...\n song.play(); //...get it going...\n song.fade(0, 1, 7000); // ...and fade in over 7 seconds to full volume\n console.log('Fading in...');\n //We can even adjust the speed of playback.\n\n //If you want to get fancy, write a function that changes this dynamically!\n //Uncomment these two lines to check it out.\n song.rate(0.25)\n // setTimeout(() => song.rate(0.5), 17000); \n // setTimeout(() => song.rate(2), 27000);\n \n //Note: setTimeout() is something you should learn about if you want to make cool dynamic Web Pages with an aspect of timing.\n\n } else { //But if the song is already playing....\n //...fade it to zero volume, then stop it.\n song.rate(0.25)\n setTimeout(() => song.stop(), 5000);\n }\n}\n\n/*\nI admit, this is a weird app. Check the weather in Denver and then play a song...?\nThe point is just to show how *calling an API* works.\nIf you're starting a project, check to see if a library exists that does what you want.\nMore often than not, one does! Your job is just to learn about the API and wield its power.\nJippity can help with this.\n\nHappy coding!\n*/\n\n\n\n\n\n\n\n\n\n\n\n\n\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":[{"project_id":1464,"creator":null,"cloudinary_id":"rmu22kagfogcc1yrmzu0","deleted":false,"id":4276,"created_at":"2024-05-16T23:06:15.356406Z","name":"toot","resource_type":"audio","tags":null},{"project_id":1464,"creator":null,"cloudinary_id":"sbe5fqgh3oreobk6zx2e","deleted":false,"id":4275,"created_at":"2024-05-16T23:06:15.355343Z","name":"song","resource_type":"audio","tags":null}],"messages_sent":0,"comments":[],"steps":[{"title":"Weather API Integration","instruction":"Integrate open-meteo.com API to fetch weather data for any city.","created_at":"2024-05-13T21:29:51.404549","project_id":1464,"complete":false,"step_number":0,"updated_at":"2024-05-16T23:06:15.350933","id":8013},{"title":"Toggle Button","instruction":"Implement a toggle button to switch between Celsius and Fahrenheit.","created_at":"2024-05-13T21:29:51.404638","project_id":1464,"complete":false,"step_number":1,"updated_at":"2024-05-16T23:06:15.351006","id":8014},{"title":"Dynamic Background","instruction":"Change the background based on the weather conditions.","created_at":"2024-05-13T21:29:51.404713","project_id":1464,"complete":false,"step_number":2,"updated_at":"2024-05-16T23:06:15.351052","id":8015},{"title":"City Selector","instruction":"Add a search bar for users to select a city and check the weather.","created_at":"2024-05-13T21:29:51.404775","project_id":1464,"complete":false,"step_number":3,"updated_at":"2024-05-16T23:06:15.351095","id":8016},{"title":"Responsive Design","instruction":"Ensure the app is responsive and works well on different devices.","created_at":"2024-05-13T21:29:51.404836","project_id":1464,"complete":false,"step_number":4,"updated_at":"2024-05-16T23:06:15.351137","id":8017},{"title":"Weather Icons","instruction":"Display weather icons to represent the current weather conditions.","created_at":"2024-05-13T21:29:51.404897","project_id":1464,"complete":false,"step_number":5,"updated_at":"2024-05-16T23:06:15.351195","id":8018},{"title":"Weather Details","instruction":"Show additional weather details such as humidity, wind speed, etc.","created_at":"2024-05-13T21:29:51.404966","project_id":1464,"complete":false,"step_number":6,"updated_at":"2024-05-16T23:06:15.351239","id":8019},{"title":"Magic Wand Animation","instruction":"Add a fun animation of a magic wand for toggling between units.","created_at":"2024-05-13T21:29:51.405025","project_id":1464,"complete":false,"step_number":7,"updated_at":"2024-05-16T23:06:15.351280","id":8020}]}