├── part1 ├── lecture-01 │ ├── style.css │ ├── main.js │ └── index.html ├── challenge-02 │ ├── final │ │ ├── style.css │ │ ├── index.html │ │ └── main.js │ └── starter │ │ ├── style.css │ │ ├── index.html │ │ └── main.js ├── lecture-02 │ ├── style.css │ ├── index.html │ └── main.js ├── lecture-03 │ ├── style.css │ ├── index.html │ └── main.js ├── lecture-04 │ ├── final │ │ ├── style.css │ │ ├── index.html │ │ └── main.js │ └── starter │ │ ├── style.css │ │ ├── index.html │ │ └── main.js └── challenge-01 │ ├── final │ ├── style.css │ ├── index.html │ └── main.js │ └── start │ ├── style.css │ ├── index.html │ └── main.js ├── .gitignore ├── part2 ├── weather-app │ ├── final-01 │ │ ├── src │ │ │ ├── components │ │ │ │ ├── Home.module.css │ │ │ │ ├── Container.module.css │ │ │ │ ├── Container.jsx │ │ │ │ ├── Home.jsx │ │ │ │ ├── Day.jsx │ │ │ │ └── Forecast.jsx │ │ │ ├── App.jsx │ │ │ ├── index.css │ │ │ ├── main.jsx │ │ │ └── hooks │ │ │ │ └── useGeolocation.js │ │ ├── vite.config.js │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ │ └── vite.svg │ ├── final-02 │ │ ├── src │ │ │ ├── components │ │ │ │ ├── Home.module.css │ │ │ │ ├── Container.module.css │ │ │ │ ├── Container.jsx │ │ │ │ ├── Day.jsx │ │ │ │ ├── Home.jsx │ │ │ │ └── Forecast.jsx │ │ │ ├── App.jsx │ │ │ ├── index.css │ │ │ ├── services │ │ │ │ └── apiWeather.js │ │ │ ├── main.jsx │ │ │ └── hooks │ │ │ │ └── useGeolocation.js │ │ ├── vite.config.js │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ │ └── vite.svg │ ├── final-03 │ │ ├── src │ │ │ ├── components │ │ │ │ ├── Home.module.css │ │ │ │ ├── Container.module.css │ │ │ │ ├── Container.jsx │ │ │ │ ├── Home.jsx │ │ │ │ ├── Day.jsx │ │ │ │ └── Forecast.jsx │ │ │ ├── App.jsx │ │ │ ├── index.css │ │ │ ├── services │ │ │ │ └── apiWeather.js │ │ │ ├── main.jsx │ │ │ └── hooks │ │ │ │ ├── useGeolocation.js │ │ │ │ └── useCurrentWeather.js │ │ ├── vite.config.js │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ │ └── vite.svg │ ├── final-04 │ │ ├── src │ │ │ ├── components │ │ │ │ ├── Home.module.css │ │ │ │ ├── Container.module.css │ │ │ │ ├── Container.jsx │ │ │ │ ├── Day.jsx │ │ │ │ ├── Home.jsx │ │ │ │ └── Forecast.jsx │ │ │ ├── index.css │ │ │ ├── services │ │ │ │ └── apiWeather.js │ │ │ ├── main.jsx │ │ │ ├── App.jsx │ │ │ └── hooks │ │ │ │ ├── useGeolocation.js │ │ │ │ └── useCurrentWeather.js │ │ ├── vite.config.js │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ │ └── vite.svg │ ├── final-05 │ │ ├── src │ │ │ ├── components │ │ │ │ ├── Home.module.css │ │ │ │ ├── Container.module.css │ │ │ │ ├── Loading.jsx │ │ │ │ ├── Container.jsx │ │ │ │ ├── Day.jsx │ │ │ │ ├── Home.jsx │ │ │ │ └── Forecast.jsx │ │ │ ├── index.css │ │ │ ├── main.jsx │ │ │ ├── services │ │ │ │ └── apiWeather.js │ │ │ ├── App.jsx │ │ │ └── hooks │ │ │ │ ├── useCurrentWeather.js │ │ │ │ └── useGeolocation.js │ │ ├── vite.config.js │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ │ └── vite.svg │ ├── final-06 │ │ ├── src │ │ │ ├── components │ │ │ │ ├── Home.module.css │ │ │ │ ├── Container.module.css │ │ │ │ ├── Loading.jsx │ │ │ │ ├── Container.jsx │ │ │ │ ├── Day.jsx │ │ │ │ ├── Home.jsx │ │ │ │ └── Forecast.jsx │ │ │ ├── index.css │ │ │ ├── main.jsx │ │ │ ├── services │ │ │ │ └── apiWeather.js │ │ │ ├── App.jsx │ │ │ └── hooks │ │ │ │ ├── useCurrentWeather.js │ │ │ │ └── useGeolocation.js │ │ ├── vite.config.js │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ │ └── vite.svg │ ├── final-07 │ │ ├── src │ │ │ ├── features │ │ │ │ ├── home │ │ │ │ │ ├── Home.module.css │ │ │ │ │ ├── Day.jsx │ │ │ │ │ └── Home.jsx │ │ │ │ └── forecast │ │ │ │ │ ├── AppNav.jsx │ │ │ │ │ ├── Forecast.jsx │ │ │ │ │ └── ForecastList.jsx │ │ │ ├── ui │ │ │ │ ├── Container.module.css │ │ │ │ ├── Loading.jsx │ │ │ │ └── Container.jsx │ │ │ ├── index.css │ │ │ ├── main.jsx │ │ │ ├── services │ │ │ │ └── apiWeather.js │ │ │ ├── App.jsx │ │ │ └── hooks │ │ │ │ ├── useCurrentWeather.js │ │ │ │ ├── useGeolocation.js │ │ │ │ └── useForecastWeather.js │ │ ├── vite.config.js │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ │ └── vite.svg │ └── starter │ │ ├── src │ │ ├── components │ │ │ ├── Home.module.css │ │ │ ├── Container.module.css │ │ │ ├── Container.jsx │ │ │ ├── Home.jsx │ │ │ ├── Day.jsx │ │ │ └── Forecast.jsx │ │ ├── App.jsx │ │ ├── index.css │ │ └── main.jsx │ │ ├── vite.config.js │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ └── vite.svg ├── lecture-03 │ ├── final │ │ ├── vite.config.js │ │ ├── src │ │ │ ├── App.css │ │ │ ├── main.jsx │ │ │ ├── App.jsx │ │ │ └── assets │ │ │ │ └── react.svg │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ │ └── vite.svg │ └── starter │ │ ├── style.css │ │ ├── index.html │ │ └── main.js ├── lecture-04 │ ├── final │ │ ├── vite.config.js │ │ ├── src │ │ │ ├── App.css │ │ │ ├── main.jsx │ │ │ ├── UsernameInput.jsx │ │ │ └── App.jsx │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ │ └── vite.svg │ └── starter │ │ ├── vite.config.js │ │ ├── src │ │ ├── App.css │ │ ├── main.jsx │ │ └── App.jsx │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ └── vite.svg ├── lecture-05 │ ├── final │ │ ├── vite.config.js │ │ ├── src │ │ │ ├── App.css │ │ │ ├── main.jsx │ │ │ ├── AppInput.jsx │ │ │ └── App.jsx │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ │ └── vite.svg │ └── starter │ │ ├── vite.config.js │ │ ├── src │ │ ├── App.css │ │ ├── main.jsx │ │ ├── UsernameInput.jsx │ │ ├── PasswordInput.jsx │ │ └── App.jsx │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ └── vite.svg ├── lecture-06 │ ├── final │ │ ├── vite.config.js │ │ ├── src │ │ │ ├── AppButton.jsx │ │ │ ├── App.css │ │ │ ├── main.jsx │ │ │ ├── AppInput.jsx │ │ │ └── App.jsx │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ │ └── vite.svg │ └── starter │ │ ├── vite.config.js │ │ ├── src │ │ ├── App.css │ │ ├── main.jsx │ │ ├── AppInput.jsx │ │ └── App.jsx │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ └── vite.svg ├── lecture-07 │ └── final │ │ ├── vite.config.js │ │ ├── src │ │ ├── main.jsx │ │ ├── App.jsx │ │ └── App.css │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ └── vite.svg ├── lecture-08 │ └── final │ │ ├── vite.config.js │ │ ├── src │ │ ├── main.jsx │ │ ├── App.jsx │ │ └── App.css │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ └── vite.svg ├── lecture-09 │ └── final │ │ ├── vite.config.js │ │ ├── src │ │ ├── main.jsx │ │ ├── App.css │ │ └── App.jsx │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ └── vite.svg ├── lecture-10 │ └── final │ │ ├── vite.config.js │ │ ├── src │ │ ├── Time.jsx │ │ ├── App.jsx │ │ ├── main.jsx │ │ ├── Advice.jsx │ │ ├── useTime.js │ │ ├── useAdvice.js │ │ └── App.css │ │ ├── index.html │ │ ├── package.json │ │ └── public │ │ └── vite.svg └── challenge-03 │ ├── final │ ├── vite.config.js │ ├── src │ │ ├── main.jsx │ │ ├── AppInput.jsx │ │ ├── App.css │ │ ├── App.jsx │ │ └── assets │ │ │ └── react.svg │ ├── index.html │ ├── package.json │ └── public │ │ └── vite.svg │ └── starter │ ├── style.css │ ├── index.html │ └── main.js ├── README.md └── LICENSE /part1/lecture-01/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Exclude node_modules 2 | */**/node_modules 3 | */**/pnpm-lock.yaml 4 | -------------------------------------------------------------------------------- /part2/weather-app/final-01/src/components/Home.module.css: -------------------------------------------------------------------------------- 1 | section { 2 | margin-top: 40%; 3 | } 4 | -------------------------------------------------------------------------------- /part2/weather-app/final-02/src/components/Home.module.css: -------------------------------------------------------------------------------- 1 | section { 2 | margin-top: 40%; 3 | } 4 | -------------------------------------------------------------------------------- /part2/weather-app/final-03/src/components/Home.module.css: -------------------------------------------------------------------------------- 1 | section { 2 | margin-top: 40%; 3 | } 4 | -------------------------------------------------------------------------------- /part2/weather-app/final-04/src/components/Home.module.css: -------------------------------------------------------------------------------- 1 | section { 2 | margin-top: 40%; 3 | } 4 | -------------------------------------------------------------------------------- /part2/weather-app/final-05/src/components/Home.module.css: -------------------------------------------------------------------------------- 1 | section { 2 | margin-top: 40%; 3 | } 4 | -------------------------------------------------------------------------------- /part2/weather-app/final-06/src/components/Home.module.css: -------------------------------------------------------------------------------- 1 | section { 2 | margin-top: 40%; 3 | } 4 | -------------------------------------------------------------------------------- /part2/weather-app/final-07/src/features/home/Home.module.css: -------------------------------------------------------------------------------- 1 | section { 2 | margin-top: 40%; 3 | } 4 | -------------------------------------------------------------------------------- /part2/weather-app/starter/src/components/Home.module.css: -------------------------------------------------------------------------------- 1 | section { 2 | margin-top: 40%; 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # This tutorial materials base on: 2 | 3 | - [bilibili](https://www.bilibili.com/video/BV1qK421x79b/) 4 | - [西瓜视频](https://www.ixigua.com/7352100939946033674) 5 | -------------------------------------------------------------------------------- /part2/weather-app/final-07/src/ui/Container.module.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | -------------------------------------------------------------------------------- /part2/weather-app/final-01/src/components/Container.module.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | -------------------------------------------------------------------------------- /part2/weather-app/final-02/src/components/Container.module.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | -------------------------------------------------------------------------------- /part2/weather-app/final-03/src/components/Container.module.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | -------------------------------------------------------------------------------- /part2/weather-app/final-04/src/components/Container.module.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | -------------------------------------------------------------------------------- /part2/weather-app/final-05/src/components/Container.module.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | -------------------------------------------------------------------------------- /part2/weather-app/final-06/src/components/Container.module.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | -------------------------------------------------------------------------------- /part2/weather-app/starter/src/components/Container.module.css: -------------------------------------------------------------------------------- 1 | main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | -------------------------------------------------------------------------------- /part1/challenge-02/final/style.css: -------------------------------------------------------------------------------- 1 | main { 2 | text-align: center; 3 | } 4 | 5 | li { 6 | list-style: none; 7 | } 8 | 9 | .deleted { 10 | text-decoration: line-through; 11 | } 12 | -------------------------------------------------------------------------------- /part1/challenge-02/starter/style.css: -------------------------------------------------------------------------------- 1 | main { 2 | text-align: center; 3 | } 4 | 5 | li { 6 | list-style: none; 7 | } 8 | 9 | .deleted { 10 | text-decoration: line-through; 11 | } 12 | -------------------------------------------------------------------------------- /part2/weather-app/final-07/src/ui/Loading.jsx: -------------------------------------------------------------------------------- 1 | import { CircularProgress } from "@mui/material"; 2 | 3 | function Loading() { 4 | return ; 5 | } 6 | 7 | export default Loading; 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-05/src/components/Loading.jsx: -------------------------------------------------------------------------------- 1 | import { CircularProgress } from "@mui/material"; 2 | 3 | function Loading() { 4 | return ; 5 | } 6 | export default Loading; 7 | -------------------------------------------------------------------------------- /part2/weather-app/final-06/src/components/Loading.jsx: -------------------------------------------------------------------------------- 1 | import { CircularProgress } from "@mui/material"; 2 | 3 | function Loading() { 4 | return ; 5 | } 6 | export default Loading; 7 | -------------------------------------------------------------------------------- /part1/lecture-02/style.css: -------------------------------------------------------------------------------- 1 | .input { 2 | margin: 2px; 3 | } 4 | 5 | .btn { 6 | margin: 1rem; 7 | } 8 | 9 | h2 { 10 | text-align: center; 11 | } 12 | 13 | main { 14 | border: 1px solid black; 15 | } 16 | -------------------------------------------------------------------------------- /part2/lecture-03/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/lecture-04/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/lecture-05/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/lecture-06/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/lecture-07/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/lecture-08/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/lecture-09/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/lecture-10/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/challenge-03/final/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/lecture-04/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/lecture-05/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/lecture-06/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-01/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-02/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-03/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-04/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-05/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-06/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-07/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/weather-app/starter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /part2/lecture-10/final/src/Time.jsx: -------------------------------------------------------------------------------- 1 | import { useTime } from "./useTime"; 2 | 3 | function Time() { 4 | const { currentTime } = useTime(); 5 | 6 | return
{currentTime}
; 7 | } 8 | 9 | export default Time; 10 | -------------------------------------------------------------------------------- /part2/lecture-06/final/src/AppButton.jsx: -------------------------------------------------------------------------------- 1 | function AppButton({ children }) { 2 | return ( 3 | 6 | ); 7 | } 8 | 9 | export default AppButton; 10 | -------------------------------------------------------------------------------- /part2/weather-app/final-07/src/ui/Container.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./Container.module.css"; 2 | 3 | function Container({ children }) { 4 | return
{children}
; 5 | } 6 | 7 | export default Container; 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-01/src/components/Container.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./Container.module.css"; 2 | 3 | function Container({ children }) { 4 | return
{children}
; 5 | } 6 | 7 | export default Container; 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-02/src/components/Container.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./Container.module.css"; 2 | 3 | function Container({ children }) { 4 | return
{children}
; 5 | } 6 | 7 | export default Container; 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-03/src/components/Container.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./Container.module.css"; 2 | 3 | function Container({ children }) { 4 | return
{children}
; 5 | } 6 | 7 | export default Container; 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-04/src/components/Container.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./Container.module.css"; 2 | 3 | function Container({ children }) { 4 | return
{children}
; 5 | } 6 | 7 | export default Container; 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-05/src/components/Container.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./Container.module.css"; 2 | 3 | function Container({ children }) { 4 | return
{children}
; 5 | } 6 | 7 | export default Container; 8 | -------------------------------------------------------------------------------- /part2/weather-app/final-06/src/components/Container.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./Container.module.css"; 2 | 3 | function Container({ children }) { 4 | return
{children}
; 5 | } 6 | 7 | export default Container; 8 | -------------------------------------------------------------------------------- /part2/weather-app/starter/src/components/Container.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./Container.module.css"; 2 | 3 | function Container({ children }) { 4 | return
{children}
; 5 | } 6 | 7 | export default Container; 8 | -------------------------------------------------------------------------------- /part1/lecture-03/style.css: -------------------------------------------------------------------------------- 1 | .input { 2 | margin: 2px; 3 | } 4 | 5 | .input-error { 6 | border: 1px solid red; 7 | } 8 | 9 | .btn { 10 | margin: 1rem; 11 | } 12 | 13 | h2 { 14 | text-align: center; 15 | } 16 | 17 | main { 18 | border: 1px solid black; 19 | } 20 | -------------------------------------------------------------------------------- /part2/lecture-03/final/src/App.css: -------------------------------------------------------------------------------- 1 | .input { 2 | margin: 2px; 3 | } 4 | 5 | .input-error { 6 | border: 1px solid red; 7 | } 8 | 9 | .btn { 10 | margin: 1rem; 11 | } 12 | 13 | h2 { 14 | text-align: center; 15 | } 16 | 17 | main { 18 | border: 1px solid black; 19 | } 20 | -------------------------------------------------------------------------------- /part2/lecture-03/starter/style.css: -------------------------------------------------------------------------------- 1 | .input { 2 | margin: 2px; 3 | } 4 | 5 | .input-error { 6 | border: 1px solid red; 7 | } 8 | 9 | .btn { 10 | margin: 1rem; 11 | } 12 | 13 | h2 { 14 | text-align: center; 15 | } 16 | 17 | main { 18 | border: 1px solid black; 19 | } 20 | -------------------------------------------------------------------------------- /part2/lecture-04/final/src/App.css: -------------------------------------------------------------------------------- 1 | .input { 2 | margin: 2px; 3 | } 4 | 5 | .input-error { 6 | border: 1px solid red; 7 | } 8 | 9 | .btn { 10 | margin: 1rem; 11 | } 12 | 13 | h2 { 14 | text-align: center; 15 | } 16 | 17 | main { 18 | border: 1px solid black; 19 | } 20 | -------------------------------------------------------------------------------- /part2/lecture-05/final/src/App.css: -------------------------------------------------------------------------------- 1 | .input { 2 | margin: 2px; 3 | } 4 | 5 | .input-error { 6 | border: 1px solid red; 7 | } 8 | 9 | .btn { 10 | margin: 1rem; 11 | } 12 | 13 | h2 { 14 | text-align: center; 15 | } 16 | 17 | main { 18 | border: 1px solid black; 19 | } 20 | -------------------------------------------------------------------------------- /part2/lecture-06/final/src/App.css: -------------------------------------------------------------------------------- 1 | .input { 2 | margin: 2px; 3 | } 4 | 5 | .input-error { 6 | border: 1px solid red; 7 | } 8 | 9 | .btn { 10 | margin: 1rem; 11 | } 12 | 13 | h2 { 14 | text-align: center; 15 | } 16 | 17 | main { 18 | border: 1px solid black; 19 | } 20 | -------------------------------------------------------------------------------- /part2/lecture-10/final/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Time from "./Time"; 2 | import Advice from "./Advice"; 3 | 4 | function App() { 5 | return ( 6 | <> 7 |

Advice

8 |