diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..362f6298 Binary files /dev/null and b/.DS_Store differ diff --git a/Week_2/.DS_Store b/Week_2/.DS_Store new file mode 100644 index 00000000..efc07289 Binary files /dev/null and b/Week_2/.DS_Store differ diff --git a/Week_3/.DS_Store b/Week_3/.DS_Store new file mode 100644 index 00000000..efc07289 Binary files /dev/null and b/Week_3/.DS_Store differ diff --git a/Week_3/README.md b/Week_3/README.md index 4c873675..698ab2d1 100644 --- a/Week_3/README.md +++ b/Week_3/README.md @@ -1,37 +1,7 @@ -# Week 3: APIs/CSS +# Week 3: JavaScript Browser & APIs # Materials -- [Week 3 Backend Slides](https://docs.google.com/presentation/d/1qUem7kvlVGblh6rOPugepUgLxjmQyPVx71GJoVGtcMY/edit?usp=sharing) +- [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) -# Week 2 Homework Solution -https://codesandbox.io/s/resume-website-complete-f4jzs?file=/index.html -# Homework -It's time to combine what we have learned about calling third-party APIs and CSS to create a pretty, yet 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. -4. Set the `apiKey` variable to your own OpenWeather API key -3. 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 on fetching data from the API and generating relevant HTML elements before beginning to style the site. -4. 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) 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 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 00000000..81417d9b Binary files /dev/null and b/Week_3/homework/.DS_Store differ diff --git a/Week_4/.DS_Store b/Week_4/.DS_Store new file mode 100644 index 00000000..efc07289 Binary files /dev/null and b/Week_4/.DS_Store differ diff --git a/Week_4/README.md b/Week_4/README.md index eaa26997..35a0593d 100644 --- a/Week_4/README.md +++ b/Week_4/README.md @@ -1,36 +1,33 @@ -# Week 4: Databases/React +# Week 4: React # Materials -- [Week 4 Backend Slides](https://docs.google.com/presentation/d/1QWH8SWW4XTUI_A3LhbsWsWAac1_Zl3kLXFMAjeQJszo/edit?usp=sharing) -- [Week 4 Frontend Slides](https://docs.google.com/presentation/d/1m7bhkKPdljzQkA8vNb4yvRUpdg72j7WQnrpltOcWQlU/edit?usp=sharing) +- [Day 7 Slides](https://docs.google.com/presentation/d/1qJv3xzeoCAw2IVXkA0gxWupK4cgK2bLHqBhOaYazjEM/edit?usp=sharing) -# Week 3 Homework Solution -https://codesandbox.io/s/weather-complete-542y5 +# Debugging Session +https://codesandbox.io/s/react-bugs-ho0ttf?file=/src/App.js + +The following are some examples of common mistakes made for the useEffect and useState React hooks. See if you can spot the bugs, why they occur, and any potential solutions. + +# Setting up React and create-react-app + +Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. + +It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine - install it from https://nodejs.org/en/ if you don't already have it installed. + +Then, run: + +``` +npx create-react-app my-app +cd my-app +npm start +``` # Homework -If you have not completed the in-class activity for the backend class, please complete it as homework. If you have any questions, please contact us! For the frontend homework this week, our goal is to create a to do app using React. - -## Instructions -Make sure you have a text editor installed on your machine. -1. Open your text editor of choice inside the homework/frontend directory. -2. Open the terminal in the homework/frontend directory and run `npm install` to install dependencies for the website. -4. Once all the dependencies are installed, run the application by running `npm start`. A website with a header Blank Name's site should appear. -3. Write code in that implements the todo app. -4. Save the completed site. - -## Requirements -- Modify the Home.js file with the following: - - Implement two lists, a to do list and a done list. When the check button for each task is clicked, move the task to the done list. Conversely, when the undo button for each task is clicked, move the task back to the to do list. - - Render out each task on the two lists by creating a new a ListItem component that accepts props related to its relevant task. - - Implement an input field and "add" button that when clicked, should add a task to the to do list. If a task already exists in the to do list, display an alert. - - At the very top of the page, display a count of the number of tasks left to do. -- Modify the header component to display your name instead of BLANK NAME. - -## Design -[At a bare minimum, your website should look similar to this when finished.](https://www.figma.com/file/EP26zpvSwnc7k7Il8PCajM/To-Do-App?node-id=0%3A1) - -## Things to Google -Good engineers know how to learn on their own. Here are a couple of topics that might be helpful to Google: -- Handling form inputs in React -- HTML alerts -- Using the src attribute for the tag to display .svg files \ No newline at end of file +For homework this week, we are going to be recreating the weather app from last week, but in React! [Here](https://www.figma.com/file/vKRFWIFsJ5WRJTvMNFXOiZ/Weather-App?node-id=2%3A213) is the figma for reference. + +## Some Tips +- Separate parts of the web page into smaller, manageable components (such as a Weather Card) +- Be sure to use React hooks learned in lectures + - useState to manage state, for variables, etc. + - useEffect to change variables when a desired state changes +- Once the components and functionality of the site are complete, use CSS to style \ No newline at end of file diff --git a/Week_4/homework/.DS_Store b/Week_4/homework/.DS_Store new file mode 100644 index 00000000..7a0b9fa6 Binary files /dev/null and b/Week_4/homework/.DS_Store differ diff --git a/Week_4/homework/frontend/.DS_Store b/Week_4/homework/frontend/.DS_Store new file mode 100644 index 00000000..ed6096ab Binary files /dev/null and b/Week_4/homework/frontend/.DS_Store differ diff --git a/Week_5/README.md b/Week_5/README.md index ccc44622..f62ae927 100644 --- a/Week_5/README.md +++ b/Week_5/README.md @@ -38,46 +38,31 @@ To deploy the functions to your cloud ... For more information visit the [Firebase Website](https://firebase.google.com/docs/hosting/test-preview-deploy) # Homework -If you have not completed the in-class activity for the backend class, please complete it as homework. We are reaching the midpoint of the course, so please [fill out the this survey to help us improve the class in the future!](https://docs.google.com/forms/d/e/1FAIpQLSd0_nwS1k-JYjLmUDY2hWe2qswObU3ZzwXQuPULE0W9NmPnZQ/viewform?usp=sf_link) - -In addition, *engineering fellows please share the link to your personal GitHub repository for this class on Slack by this Saturday evening.* We will begin grading your existing homework, so please take this week to complete any homework that you have not yet finished! - -This week's activity will have some connection to last week as you are still writing your ExpressJS REST API, but instead of using a JSON object as a database, we'll be connecting to Firebase and more specifically, Firestore. - -Like last week, we're still dealing with a user database with name and age. Additionally, we have already written two functions for you (GET all users and CREATE a new user). **We want you to extend the functionality of the API by writing an API endpoint to query users in the database, returning users whose age is above a certain query value.** - -Some questions to consider before starting this assignment: - -- What type of request should this be (GET,POST, PUT, etc)? -- How should I get the age (query param, body, etc)? +For the frontend homework this week, our goal is to create a to do app using React. In the end, it should look like [this](https://www.figma.com/file/EP26zpvSwnc7k7Il8PCajM/To-Do-App?node-id=0%3A1). ## Instructions -Make sure you have a firebase account and created a project with the Firestore database checked - -1. Download and save a private credential key by navigating towards your project dashboard -> settings -> service accounts -> generate private key -2. Store your private key in an environment variable, json, etc - Make sure you have a text editor installed on your machine. -1. Open your text editor of choice inside the homework/backend directory. -2. Open the terminal in the homework/frontend directory and run `npm install` to install dependencies. -3. Once all the dependencies are installed, run the application by running `npm run dev`. A message with `Listening on Port 4000` should appear. -4. Write code for index.js that will meet the requirements. -5. Save the completed site. -6. Once done, save and push your code to the forked repository. +1. Open your text editor of choice inside the homework/frontend directory. +2. Open the terminal in the homework/frontend directory and run npm install to install dependencies for the website. +3. Once all the dependencies are installed, run the application by running "npm start". A website with a header Blank Name's site should appear. +4. Write code in that implements the todo app. +5. Save the completed site & push it to your repo. ## Requirements -- A function that returns users in the firestore database over a queried age -- Optional: write the PUT and DELETE methods for users using the Firestore/Firebase SDK -- Optional: connect the Express app to a firebase project and host it on Firebase Functions +- Modify the Home.js file with the following: + - Implement two lists, a to do list and a done list. When the check button for each task is clicked, move the task to the done list. Conversely, when the undo button for each task is clicked, move the task back to the to do list. + - Render out each task on the two lists by creating a new a ListItem component that accepts props related to its relevant task. + - Implement an input field and "add" button that when clicked, should add a task to the to do list. If a task already exists in the to do list, display an alert. + - At the very top of the page, display a count of the number of tasks left to do. +- Modify the header component to display your name instead of BLANK NAME. ## Things to Google -Good engineers know how to learn on their own. Here are a couple of topics that might be helpful to Google based on this week's lesson: +Good engineers know how to learn on their own. Here are a couple of topics that might be helpful to Google: -- Firebase Firestore expressJS SDK -- AWS Lambda Serverless -- Containerization vs Virtualization -- Dev Ops +- Handling form inputs in React +- HTML alerts +- Using the src attribute for the tag to display .svg files \ No newline at end of file