From ebfaf6e1c8667d4a8f32bee2b69ca31a9c4e19f2 Mon Sep 17 00:00:00 2001 From: Mehul Daruka Date: Sat, 2 Jul 2022 15:35:43 -0500 Subject: [PATCH 1/2] Week 3 slides --- .DS_Store | Bin 0 -> 8196 bytes Week_2/.DS_Store | Bin 0 -> 6148 bytes Week_3/.DS_Store | Bin 0 -> 6148 bytes Week_3/README.md | 34 ++-------------------------------- Week_3/homework/.DS_Store | Bin 0 -> 6148 bytes Week_4/.DS_Store | Bin 0 -> 6148 bytes 6 files changed, 2 insertions(+), 32 deletions(-) create mode 100644 .DS_Store create mode 100644 Week_2/.DS_Store create mode 100644 Week_3/.DS_Store create mode 100644 Week_3/homework/.DS_Store create mode 100644 Week_4/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..362f629848925cfa8a72a738a290805c8fbf8a01 GIT binary patch literal 8196 zcmeI1%}(1u5XWaj3XV{v99k(CBul+UAtb3))Qbt>z<~>{;LuiSTt}^i@uGY*hbWTI z@D98JSDu7->50zlE+}zoAFImDL_7cW?o1N@Vy`_80Eq51*aN5mfQ5~;x{dBHM)TCx ztYk*2r~>l=PT&X{a0$V2v=+?+On?b60Vco%n85!)0I%6(R>pN-&$4F%OyETlp!LDV zM(P?(w5p{8ohkuP%Q&nI`&154j&0O6nrOutG@(;bb*eBWhS2FaZkssQXrfi8gD}O1 zFrO?;g(B3ajda@slX}L?FZ0XuHWT%KaxJqQp5qa#-lRq0c^rK z4DodVeb_sWR$}jRVq2@RVka-wpN+4~cewYjqHsKEHXlT3qx@=f%i6NGt*_osIrAoi z$#mQuj6T!WCn+QUsXy?~!r`o6eRC+|$smk}Bb5*aLk#(H9>#&3b>%b;#wyp-6IR8l z^sBY`yyZ0OcBj3+sN3`Xmg+l;Ma6piZujG9|024K;#l|d3@LF#_`y1>nvugeF zMsXzLAC#1uYp2*yZWi-)0ok;3*mP2Ce&?|16p&3Pht2y{HYGZ?vW^>PHCCP1w;AWP zQ$UVR4#y8EHnff{v%yU^CQu*(8+u=ARR14kKmRY#9`mj+0Va?pAj&wUKTK}4!GN;ilaM5LjNwE)E%!hY5nsri;VP}x38 zGSsJ=gWO!sL`%awGQe}E=^FEPOFf#Jza%#ae7rDzK-d0Qf%QgwQV#BX{9|&LXM$T^|M$YbRY9*An@^>7@MQL-{W&|3Xpr>*znU;iMvmQVIjYz-tB;T(!aH|Ng(< z|F4szCJYDzABq80Z^!Kxe#xJ$Ge5^?Z3w-9vT$7G@NWtXdlVywUKTK}4!GN;ilaM5LjNwE)E%!hY5nsri;VP}x38 zGSsJ=gWO!sL`%awGQe}E=^FEPOFf#Jza%#ae7rDzK-d0Qf%QgwQV#BX{9|&LXM$T^|M$YbRY9*An@^>7@MQL-{W&|3Xpr>*znU;iMvmQVIjYz-tB;T(!aH|Ng(< z|F4szCJYDzABq80Z^!Kxe#xJ$Ge5^?Z3w-9vT$7G@NWtXdlVy tag to change dynamically based on API response. -- Style the website by adding CSS to the `style.css` file. - -## Design -[At a bare minimum, your website should look similar to this when finished.](https://www.figma.com/file/vKRFWIFsJ5WRJTvMNFXOiZ/Weather-App?node-id=2%3A213) - -## Things to Google -Good engineers know how to learn on their own. Here are a couple of topics that might be helpful to Google: -- CSS border-radius -- Using the src attribute for the tag to display .svg files - -# Bonus -Flex 💪 your CSS skills by modifying the weather website to be as attractive as possible. Take a look at CSS background gradients and opacity to give your weather site a more modern look! diff --git a/Week_3/homework/.DS_Store b/Week_3/homework/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..81417d9bc356a43ba1ffce1f630217c0e8e2f252 GIT binary patch literal 6148 zcmeHKL2uJA6n^enmTa2T14z9fMdCV@ZlFmMmr%xmD?xAo)HO@RqGk5fq!d(D%6a=S zT=^yZ9r&K@p=^a~HBIkH&!7GLzBu`8*)b8R;Vj!D>Jm`^XKaNi{$bqDzG5vO=>U~| zM){^NCuw2Qm0StjO$B)FI+W818Pe38KVA|q;r-v%?CUo&(|LK}XZmM)QRHPc82nPL zjdth3X0RD-2cMHuGf%2*Mr&KADfY4__HwjdMMjT0)*pkn-t6 zt}`+gmL54+gu@^Jj<4-Dq*RZ|eukWf(kq^7O^q(OGe>&82;3 zQdpbTc069g6)KG{`kG92Ve}V7nXv^`G-WiQZ`7w#s_2}G#`wUKTK}4!GN;ilaM5LjNwE)E%!hY5nsri;VP}x38 zGSsJ=gWO!sL`%awGQe}E=^FEPOFf#Jza%#ae7rDzK-d0Qf%QgwQV#BX{9|&LXM$T^|M$YbRY9*An@^>7@MQL-{W&|3Xpr>*znU;iMvmQVIjYz-tB;T(!aH|Ng(< z|F4szCJYDzABq80Z^!Kxe#xJ$Ge5^?Z3w-9vT$7G@NWtXdlVy Date: Sat, 27 Aug 2022 20:59:35 -0500 Subject: [PATCH 2/2] added Week 3 Weather App HW instructions --- Week_3/README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/Week_3/README.md b/Week_3/README.md index 698ab2d1..ed708656 100644 --- a/Week_3/README.md +++ b/Week_3/README.md @@ -4,4 +4,28 @@ - [Week 3 Backend Slides](https://docs.google.com/presentation/d/1AWqvb-pY2m7jT-Z4oYHFn2Ckt8qBZy2nNCIYe-7npWw/edit?usp=sharing) - [Week 3 Frontend Slides](https://docs.google.com/presentation/d/17eiGw5dpWhyYA74VKUkkLhJuNoVRyTW-hXRbGzWJYnk/edit?usp=sharing) +# Homework +It's time to combine what we have learned about calling third-party APIs and CSS to create a pretty and functional weather app. The weather app should search for cities in the United States, allow a user to select a city, and display the weather for the city, including a five day forecast and the air pollution. The weather data will be sourced from [OpenWeather](https://openweathermap.org/). We have included some starter code for search and helper functions but feel free to modify any of the starter code to fit your needs! +### Instructions +Make sure you have a text editor installed on your machine and your own OpenWeather API key before proceeding. +1. Open your text editor of choice inside the homework directory. +2. Open the file called index.html. +3. Set the apiKey variable to your own OpenWeather API key. +4. Write code that fetches and displays data from the server and also matches the design below. We recommend you read the OpenWeather's API documentation before you begin writing code. In addition, we recommend fetching data from the API and generating relevant HTML elements before beginning to style the site. +5. Save the completed site. + +### Requirements +- Using a city's longitude and latitute, use OpenWeather's [One Call API](https://openweathermap.org/api/one-call-api) to get current weather conditions and a five day forecast for the city. + - Once you have fetched the weather data, generate HTML elements that displays the current weather and the cards for five day forecast. We recommend you use a for loop to generate the cards for the five day forecast. +- Using a city's longitude and latitute, use OpenWeather's [Air Pollution API](https://openweathermap.org/api/air-pollution) API to get current air quality index (AQI) for the city. +Use the .svg files in the icons folder to display the relevant graphics for the weather conditions. Note how the name of the .svg files correspond to the [current.weather.icon and daily.weather.icon values](https://openweathermap.org/api/one-call-api#example) in the One Call API response. We recommend having the value of the src attribute of the tag to change dynamically based on API response. +- Style the website by adding CSS to the style.css file. + +### Design +- At a bare minimum, your website should look similar to [this]s(https://www.figma.com/file/vKRFWIFsJ5WRJTvMNFXOiZ/Weather-App?node-id=2%3A213) when finished. + +### Things to Google +Good engineers know how to learn on their own. Here are a couple of topics that might be helpful to Google: +- CSS border-radius +- Using the src attribute for the tag to display .svg files