From ac791a9a1e2aba1e6f86bb42fc9eb915e9f9c2da Mon Sep 17 00:00:00 2001 From: wbennett721 <142439301+wbennett721@users.noreply.github.com> Date: Mon, 13 Nov 2023 15:55:03 -0600 Subject: [PATCH 1/7] Exercise Part 1 --- part1/exercises/src/components/BookList.js | 15 +++++++-------- .../src/components/ChoresList.module.css | 7 ++++++- part1/exercises/src/components/MovieList.js | 5 ++++- .../exercises/src/components/MovieList.module.css | 6 ++++-- 4 files changed, 21 insertions(+), 12 deletions(-) diff --git a/part1/exercises/src/components/BookList.js b/part1/exercises/src/components/BookList.js index 42e644fc7..f689e5dcd 100644 --- a/part1/exercises/src/components/BookList.js +++ b/part1/exercises/src/components/BookList.js @@ -1,15 +1,14 @@ export default function BookList() { - let pageTitle = "shrug"; - let book1 = "google.com"; - let book2 = ""; - let book3 = ""; - + let pageTitle = "Children Books"; + let book1 = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnh9dCYH4Cm5c6NYGSo93pvY6IDLGNJ7tfDw&usqp=CAU;" + let book2 = "https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSDGVGBwzcm2cCswJ43AXotE1iO6cw36Hv_SIP3A_4HguJlpHfYinVc0oWjYpg1tmO1fWnExNFmSTYrGFsH6P-PjBdpecB992YS91rZ8XxzVEh_8sL3w7Gf7A" + let book3 = "https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcQTHChTvmPd-DHm4jsukDk3pSQK4lUuq48G9XHYaUfc-kRDUseZ4Qh1GLcYR7O9s6-tiAmmuYlkNS6NOuXzbhop1rFtKZhB8o0yVrtdIOk&usqp=CAc" return (

{pageTitle}

- Nothing here! - Nothing here! - Nothing here! + Diary of a Wimpy Kid + The Giving Tree + Broken Crayons Still Color
); } \ No newline at end of file diff --git a/part1/exercises/src/components/ChoresList.module.css b/part1/exercises/src/components/ChoresList.module.css index 8fdc07e78..5426408bc 100644 --- a/part1/exercises/src/components/ChoresList.module.css +++ b/part1/exercises/src/components/ChoresList.module.css @@ -1,7 +1,12 @@ .choresText { - color: black; + color: red; + font-style: italic; + font-size: 1.5vw + } .choresHeading { color: black; + text-underline-position: below; + font-style: italic; } \ No newline at end of file diff --git a/part1/exercises/src/components/MovieList.js b/part1/exercises/src/components/MovieList.js index 29936e72b..d06e14fc3 100644 --- a/part1/exercises/src/components/MovieList.js +++ b/part1/exercises/src/components/MovieList.js @@ -3,13 +3,16 @@ import classes from './MovieList.module.css'; class MovieList extends React.Component { render() { - const movies = ["Pride and Prejudice", "Howl's Moving Castle"]; + const movies = ["Pride and Prejudice", "Howl's Moving Castle", "Legally Blonde", "Star Wars"]; return (

Movies I Watched This Month

  1. {movies[0]}
  2. {movies[1]}
    3. +
  3. {movies[2]}
    4. +
  4. {movies[3]}
    5. +
); diff --git a/part1/exercises/src/components/MovieList.module.css b/part1/exercises/src/components/MovieList.module.css index 6b980d3ac..1539ad109 100644 --- a/part1/exercises/src/components/MovieList.module.css +++ b/part1/exercises/src/components/MovieList.module.css @@ -1,7 +1,9 @@ .movieText { - color: black; + color: purple; + font-size: 1.5vw; + text-align: left; } .movieHeading { - color: black; + text-align: left; } \ No newline at end of file From 0c4e0dd656de4eaa8db69412e80d96515487d467 Mon Sep 17 00:00:00 2001 From: wbennett721 <142439301+wbennett721@users.noreply.github.com> Date: Mon, 13 Nov 2023 16:07:10 -0600 Subject: [PATCH 2/7] Exercises part1 --- package-lock.json | 6 ++++++ part1/exercises/src/HobbyLinks | 0 part1/exercises/src/components/ChoresList.js | 3 ++- 3 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 package-lock.json create mode 100644 part1/exercises/src/HobbyLinks diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..21372a612 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "react-exercises-and-studios", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/part1/exercises/src/HobbyLinks b/part1/exercises/src/HobbyLinks new file mode 100644 index 000000000..e69de29bb diff --git a/part1/exercises/src/components/ChoresList.js b/part1/exercises/src/components/ChoresList.js index 95c5944ca..9becb4dc5 100644 --- a/part1/exercises/src/components/ChoresList.js +++ b/part1/exercises/src/components/ChoresList.js @@ -1,3 +1,4 @@ export default function ChoresList () { - return

No content is here!

; + return

Today's Chores!

; +
  • Mop the floor
    • } \ No newline at end of file From b358a3986b8e0ef2b597f28901db38e2a4aa8351 Mon Sep 17 00:00:00 2001 From: wbennett721 <142439301+wbennett721@users.noreply.github.com> Date: Mon, 13 Nov 2023 20:21:47 -0600 Subject: [PATCH 3/7] StudioReactPart1 --- part1/exercises/src/App.js | 8 ++- part1/exercises/src/Studio/.eslintrc.cjs | 20 ++++++ part1/exercises/src/Studio/.gitignore | 24 +++++++ part1/exercises/src/Studio/README.md | 8 +++ part1/exercises/src/Studio/index.html | 13 ++++ part1/exercises/src/Studio/package.json | 26 +++++++ part1/exercises/src/Studio/public/vite.svg | 1 + part1/exercises/src/Studio/src/App.css | 42 +++++++++++ part1/exercises/src/Studio/src/App.jsx | 35 ++++++++++ .../exercises/src/Studio/src/assets/react.svg | 1 + .../Description.jsx/Description.jsx | 37 ++++++++++ .../Description.jsx/Description.module.css | 8 +++ part1/exercises/src/Studio/src/index.css | 69 +++++++++++++++++++ part1/exercises/src/Studio/src/main.jsx | 10 +++ part1/exercises/src/Studio/vite.config.js | 7 ++ part1/exercises/src/components/HobbyLinks | 5 ++ 16 files changed, 313 insertions(+), 1 deletion(-) create mode 100644 part1/exercises/src/Studio/.eslintrc.cjs create mode 100644 part1/exercises/src/Studio/.gitignore create mode 100644 part1/exercises/src/Studio/README.md create mode 100644 part1/exercises/src/Studio/index.html create mode 100644 part1/exercises/src/Studio/package.json create mode 100644 part1/exercises/src/Studio/public/vite.svg create mode 100644 part1/exercises/src/Studio/src/App.css create mode 100644 part1/exercises/src/Studio/src/App.jsx create mode 100644 part1/exercises/src/Studio/src/assets/react.svg create mode 100644 part1/exercises/src/Studio/src/components/Description.jsx/Description.jsx create mode 100644 part1/exercises/src/Studio/src/components/Description.jsx/Description.module.css create mode 100644 part1/exercises/src/Studio/src/index.css create mode 100644 part1/exercises/src/Studio/src/main.jsx create mode 100644 part1/exercises/src/Studio/vite.config.js create mode 100644 part1/exercises/src/components/HobbyLinks diff --git a/part1/exercises/src/App.js b/part1/exercises/src/App.js index 6b3d3330d..991d60837 100644 --- a/part1/exercises/src/App.js +++ b/part1/exercises/src/App.js @@ -9,7 +9,13 @@ function App() {
    - +
    + +
    + +
    + +
    ); } diff --git a/part1/exercises/src/Studio/.eslintrc.cjs b/part1/exercises/src/Studio/.eslintrc.cjs new file mode 100644 index 000000000..4dcb43901 --- /dev/null +++ b/part1/exercises/src/Studio/.eslintrc.cjs @@ -0,0 +1,20 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:react/jsx-runtime', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, + settings: { react: { version: '18.2' } }, + plugins: ['react-refresh'], + rules: { + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} diff --git a/part1/exercises/src/Studio/.gitignore b/part1/exercises/src/Studio/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/part1/exercises/src/Studio/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/part1/exercises/src/Studio/README.md b/part1/exercises/src/Studio/README.md new file mode 100644 index 000000000..f768e33fc --- /dev/null +++ b/part1/exercises/src/Studio/README.md @@ -0,0 +1,8 @@ +# React + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh diff --git a/part1/exercises/src/Studio/index.html b/part1/exercises/src/Studio/index.html new file mode 100644 index 000000000..0c589eccd --- /dev/null +++ b/part1/exercises/src/Studio/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
    + + + diff --git a/part1/exercises/src/Studio/package.json b/part1/exercises/src/Studio/package.json new file mode 100644 index 000000000..f0afd1612 --- /dev/null +++ b/part1/exercises/src/Studio/package.json @@ -0,0 +1,26 @@ +{ + "name": "studio", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.15", + "@types/react-dom": "^18.2.7", + "@vitejs/plugin-react": "^4.0.3", + "eslint": "^8.45.0", + "eslint-plugin-react": "^7.32.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.3", + "vite": "^4.4.5" + } +} diff --git a/part1/exercises/src/Studio/public/vite.svg b/part1/exercises/src/Studio/public/vite.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/part1/exercises/src/Studio/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/part1/exercises/src/Studio/src/App.css b/part1/exercises/src/Studio/src/App.css new file mode 100644 index 000000000..b9d355df2 --- /dev/null +++ b/part1/exercises/src/Studio/src/App.css @@ -0,0 +1,42 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/part1/exercises/src/Studio/src/App.jsx b/part1/exercises/src/Studio/src/App.jsx new file mode 100644 index 000000000..b8b8473a3 --- /dev/null +++ b/part1/exercises/src/Studio/src/App.jsx @@ -0,0 +1,35 @@ +import { useState } from 'react' +import reactLogo from './assets/react.svg' +import viteLogo from '/vite.svg' +import './App.css' + +function App() { + const [count, setCount] = useState(0) + + return ( + <> +
    + + Vite logo + + + React logo + +
    +

    Vite + React

    +
    + +

    + Edit src/App.jsx and save to test HMR +

    +
    +

    + Click on the Vite and React logos to learn more +

    + + ) +} + +export default App diff --git a/part1/exercises/src/Studio/src/assets/react.svg b/part1/exercises/src/Studio/src/assets/react.svg new file mode 100644 index 000000000..6c87de9bb --- /dev/null +++ b/part1/exercises/src/Studio/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/part1/exercises/src/Studio/src/components/Description.jsx/Description.jsx b/part1/exercises/src/Studio/src/components/Description.jsx/Description.jsx new file mode 100644 index 000000000..5ef65a534 --- /dev/null +++ b/part1/exercises/src/Studio/src/components/Description.jsx/Description.jsx @@ -0,0 +1,37 @@ +import styles from './Description.module.css'; +import React from 'react'; + +let recipeTitle = "Monkey Bread"; +let recipeShortDesc = "This pull-apart treat is sticky and sweet!"; + +const RecipeAuthor = () => { +let authorLink = "https://www.thepioneerwoman.com/food-cooking/recipes/a10982/monkey-bread/"; +let authorPhoto = "https://hips.hearstapps.com/hmg-prod/images/unknown-2-642af098be42c.jpeg?crop=1xw:0.7608308605341246xh;center,top&resize=640:*"; +let authorName = "Leah Perez"; + +return ( +
    + Reasonable alt text +
    +

    {authorName}

    + The Pioneer Woman +
    +
    + ); +}; + +class RecipeDescription extends React.Component { + render (){ + return ( +
    +
    +

    {recipeTitle}

    +

    {recipeShortDesc}

    +
    + +
    + ); + } +} + +export default RecipeDescription; \ No newline at end of file diff --git a/part1/exercises/src/Studio/src/components/Description.jsx/Description.module.css b/part1/exercises/src/Studio/src/components/Description.jsx/Description.module.css new file mode 100644 index 000000000..faf33d555 --- /dev/null +++ b/part1/exercises/src/Studio/src/components/Description.jsx/Description.module.css @@ -0,0 +1,8 @@ +.recipeAuthorBlock { + display: flex; + justify-content: space-evenly; + } + + .imageUpdates { + object-fit: contain; + } \ No newline at end of file diff --git a/part1/exercises/src/Studio/src/index.css b/part1/exercises/src/Studio/src/index.css new file mode 100644 index 000000000..2c3fac689 --- /dev/null +++ b/part1/exercises/src/Studio/src/index.css @@ -0,0 +1,69 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/part1/exercises/src/Studio/src/main.jsx b/part1/exercises/src/Studio/src/main.jsx new file mode 100644 index 000000000..54b39dd1d --- /dev/null +++ b/part1/exercises/src/Studio/src/main.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.jsx' +import './index.css' + +ReactDOM.createRoot(document.getElementById('root')).render( + + + , +) diff --git a/part1/exercises/src/Studio/vite.config.js b/part1/exercises/src/Studio/vite.config.js new file mode 100644 index 000000000..5a33944a9 --- /dev/null +++ b/part1/exercises/src/Studio/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +}) diff --git a/part1/exercises/src/components/HobbyLinks b/part1/exercises/src/components/HobbyLinks new file mode 100644 index 000000000..73fcc615c --- /dev/null +++ b/part1/exercises/src/components/HobbyLinks @@ -0,0 +1,5 @@ +import React from 'react'; +import HobbyLinks from './components/HobbyLinks.js'; +function HobbyLinks() { + Link text... +} From 12f7b1e538cc91018d832a3a2cc51529b4197bc6 Mon Sep 17 00:00:00 2001 From: wbennett721 <142439301+wbennett721@users.noreply.github.com> Date: Tue, 14 Nov 2023 20:53:18 -0600 Subject: [PATCH 4/7] StudioReact1 --- .../Description.jsx/Ingredients.jsx | 21 +++++++++++++++++++ .../Description.jsx/Ingredients.module.css | 3 +++ .../src/components/Description.jsx/Photos.jsx | 7 +++++++ 3 files changed, 31 insertions(+) create mode 100644 part1/exercises/src/Studio/src/components/Description.jsx/Ingredients.jsx create mode 100644 part1/exercises/src/Studio/src/components/Description.jsx/Ingredients.module.css create mode 100644 part1/exercises/src/Studio/src/components/Description.jsx/Photos.jsx diff --git a/part1/exercises/src/Studio/src/components/Description.jsx/Ingredients.jsx b/part1/exercises/src/Studio/src/components/Description.jsx/Ingredients.jsx new file mode 100644 index 000000000..be15d379d --- /dev/null +++ b/part1/exercises/src/Studio/src/components/Description.jsx/Ingredients.jsx @@ -0,0 +1,21 @@ +import styles from './Ingredients.module.css'; + +const RecipeIngredients = () => { + + let ingredients = ["buttermilk biscuits", "sugar", "cinnamon", "butter", "brown sugar"]; + + return ( +
    +

    Recipe Ingredients

    + +
    + ); +} + +export default RecipeIngredients; \ No newline at end of file diff --git a/part1/exercises/src/Studio/src/components/Description.jsx/Ingredients.module.css b/part1/exercises/src/Studio/src/components/Description.jsx/Ingredients.module.css new file mode 100644 index 000000000..41afc9d3a --- /dev/null +++ b/part1/exercises/src/Studio/src/components/Description.jsx/Ingredients.module.css @@ -0,0 +1,3 @@ +.ingredientList { + text-align: left; + } \ No newline at end of file diff --git a/part1/exercises/src/Studio/src/components/Description.jsx/Photos.jsx b/part1/exercises/src/Studio/src/components/Description.jsx/Photos.jsx new file mode 100644 index 000000000..2663a36be --- /dev/null +++ b/part1/exercises/src/Studio/src/components/Description.jsx/Photos.jsx @@ -0,0 +1,7 @@ +import styles from './Description.module.css'; + +const RecipePhoto = () => { + return Whitney's Monkey Bread +} + +export default RecipePhoto; \ No newline at end of file From 71a10f55c288aa355853ba1cff08bf31be08baa9 Mon Sep 17 00:00:00 2001 From: wbennett721 <142439301+wbennett721@users.noreply.github.com> Date: Tue, 14 Nov 2023 20:54:22 -0600 Subject: [PATCH 5/7] StudioReactPart1 --- .../exercises/src/Studio/Studio/.eslintrc.cjs | 20 ++++++ part1/exercises/src/Studio/Studio/.gitignore | 24 +++++++ part1/exercises/src/Studio/Studio/README.md | 8 +++ part1/exercises/src/Studio/Studio/index.html | 13 ++++ .../exercises/src/Studio/Studio/package.json | 26 +++++++ .../src/Studio/Studio/public/vite.svg | 1 + part1/exercises/src/Studio/Studio/src/App.css | 42 +++++++++++ part1/exercises/src/Studio/Studio/src/App.jsx | 35 ++++++++++ .../src/Studio/Studio/src/assets/react.svg | 1 + .../exercises/src/Studio/Studio/src/index.css | 69 +++++++++++++++++++ .../exercises/src/Studio/Studio/src/main.jsx | 10 +++ .../src/Studio/Studio/vite.config.js | 7 ++ part1/exercises/src/Studio/src/App.css | 5 ++ part1/exercises/src/Studio/src/App.jsx | 43 ++++-------- 14 files changed, 276 insertions(+), 28 deletions(-) create mode 100644 part1/exercises/src/Studio/Studio/.eslintrc.cjs create mode 100644 part1/exercises/src/Studio/Studio/.gitignore create mode 100644 part1/exercises/src/Studio/Studio/README.md create mode 100644 part1/exercises/src/Studio/Studio/index.html create mode 100644 part1/exercises/src/Studio/Studio/package.json create mode 100644 part1/exercises/src/Studio/Studio/public/vite.svg create mode 100644 part1/exercises/src/Studio/Studio/src/App.css create mode 100644 part1/exercises/src/Studio/Studio/src/App.jsx create mode 100644 part1/exercises/src/Studio/Studio/src/assets/react.svg create mode 100644 part1/exercises/src/Studio/Studio/src/index.css create mode 100644 part1/exercises/src/Studio/Studio/src/main.jsx create mode 100644 part1/exercises/src/Studio/Studio/vite.config.js diff --git a/part1/exercises/src/Studio/Studio/.eslintrc.cjs b/part1/exercises/src/Studio/Studio/.eslintrc.cjs new file mode 100644 index 000000000..4dcb43901 --- /dev/null +++ b/part1/exercises/src/Studio/Studio/.eslintrc.cjs @@ -0,0 +1,20 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:react/jsx-runtime', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, + settings: { react: { version: '18.2' } }, + plugins: ['react-refresh'], + rules: { + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} diff --git a/part1/exercises/src/Studio/Studio/.gitignore b/part1/exercises/src/Studio/Studio/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/part1/exercises/src/Studio/Studio/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/part1/exercises/src/Studio/Studio/README.md b/part1/exercises/src/Studio/Studio/README.md new file mode 100644 index 000000000..f768e33fc --- /dev/null +++ b/part1/exercises/src/Studio/Studio/README.md @@ -0,0 +1,8 @@ +# React + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh diff --git a/part1/exercises/src/Studio/Studio/index.html b/part1/exercises/src/Studio/Studio/index.html new file mode 100644 index 000000000..0c589eccd --- /dev/null +++ b/part1/exercises/src/Studio/Studio/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
    + + + diff --git a/part1/exercises/src/Studio/Studio/package.json b/part1/exercises/src/Studio/Studio/package.json new file mode 100644 index 000000000..f0afd1612 --- /dev/null +++ b/part1/exercises/src/Studio/Studio/package.json @@ -0,0 +1,26 @@ +{ + "name": "studio", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.15", + "@types/react-dom": "^18.2.7", + "@vitejs/plugin-react": "^4.0.3", + "eslint": "^8.45.0", + "eslint-plugin-react": "^7.32.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.3", + "vite": "^4.4.5" + } +} diff --git a/part1/exercises/src/Studio/Studio/public/vite.svg b/part1/exercises/src/Studio/Studio/public/vite.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/part1/exercises/src/Studio/Studio/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/part1/exercises/src/Studio/Studio/src/App.css b/part1/exercises/src/Studio/Studio/src/App.css new file mode 100644 index 000000000..b9d355df2 --- /dev/null +++ b/part1/exercises/src/Studio/Studio/src/App.css @@ -0,0 +1,42 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/part1/exercises/src/Studio/Studio/src/App.jsx b/part1/exercises/src/Studio/Studio/src/App.jsx new file mode 100644 index 000000000..b8b8473a3 --- /dev/null +++ b/part1/exercises/src/Studio/Studio/src/App.jsx @@ -0,0 +1,35 @@ +import { useState } from 'react' +import reactLogo from './assets/react.svg' +import viteLogo from '/vite.svg' +import './App.css' + +function App() { + const [count, setCount] = useState(0) + + return ( + <> +
    + + Vite logo + + + React logo + +
    +

    Vite + React

    +
    + +

    + Edit src/App.jsx and save to test HMR +

    +
    +

    + Click on the Vite and React logos to learn more +

    + + ) +} + +export default App diff --git a/part1/exercises/src/Studio/Studio/src/assets/react.svg b/part1/exercises/src/Studio/Studio/src/assets/react.svg new file mode 100644 index 000000000..6c87de9bb --- /dev/null +++ b/part1/exercises/src/Studio/Studio/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/part1/exercises/src/Studio/Studio/src/index.css b/part1/exercises/src/Studio/Studio/src/index.css new file mode 100644 index 000000000..2c3fac689 --- /dev/null +++ b/part1/exercises/src/Studio/Studio/src/index.css @@ -0,0 +1,69 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/part1/exercises/src/Studio/Studio/src/main.jsx b/part1/exercises/src/Studio/Studio/src/main.jsx new file mode 100644 index 000000000..54b39dd1d --- /dev/null +++ b/part1/exercises/src/Studio/Studio/src/main.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.jsx' +import './index.css' + +ReactDOM.createRoot(document.getElementById('root')).render( + + + , +) diff --git a/part1/exercises/src/Studio/Studio/vite.config.js b/part1/exercises/src/Studio/Studio/vite.config.js new file mode 100644 index 000000000..5a33944a9 --- /dev/null +++ b/part1/exercises/src/Studio/Studio/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +}) diff --git a/part1/exercises/src/Studio/src/App.css b/part1/exercises/src/Studio/src/App.css index b9d355df2..b7cbc27d2 100644 --- a/part1/exercises/src/Studio/src/App.css +++ b/part1/exercises/src/Studio/src/App.css @@ -40,3 +40,8 @@ .read-the-docs { color: #888; } + +.recipePhotoBlock { + display: flex; + justify-content: space-evenly; +} \ No newline at end of file diff --git a/part1/exercises/src/Studio/src/App.jsx b/part1/exercises/src/Studio/src/App.jsx index b8b8473a3..e062b9808 100644 --- a/part1/exercises/src/Studio/src/App.jsx +++ b/part1/exercises/src/Studio/src/App.jsx @@ -1,35 +1,22 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' + import './App.css' +import RecipeDescription from './components/Description.jsx/Description'; +import RecipeIngredients from './components/Description.jsx/Ingredients'; +import RecipePhoto from './components/Description.jsx/Photos'; function App() { - const [count, setCount] = useState(0) - return ( - <> +
    +
    - - Vite logo - - - React logo - -
    -

    Vite + React

    -
    - -

    - Edit src/App.jsx and save to test HMR -

    -
    -

    - Click on the Vite and React logos to learn more -

    - - ) + +
    + + +
    +
    +
    + ); } -export default App +export default App; From 0e784c1fe7b4d4161d3b8241e9743e0be7b1e56b Mon Sep 17 00:00:00 2001 From: wbennett721 <142439301+wbennett721@users.noreply.github.com> Date: Thu, 16 Nov 2023 13:38:50 -0600 Subject: [PATCH 6/7] commit --- part1/exercises/src/HobbyLinks | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 part1/exercises/src/HobbyLinks diff --git a/part1/exercises/src/HobbyLinks b/part1/exercises/src/HobbyLinks deleted file mode 100644 index e69de29bb..000000000 From 4e07894a2fdd4f95155b3b0123251d1b5465aef8 Mon Sep 17 00:00:00 2001 From: wbennett721 <142439301+wbennett721@users.noreply.github.com> Date: Mon, 20 Nov 2023 18:13:12 -0600 Subject: [PATCH 7/7] Add files via upload --- part3/exercises/HobbyIntroduction.jsx | 12 +++++++++++ part3/exercises/Projects.jsx | 31 +++++++++++++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 part3/exercises/HobbyIntroduction.jsx create mode 100644 part3/exercises/Projects.jsx diff --git a/part3/exercises/HobbyIntroduction.jsx b/part3/exercises/HobbyIntroduction.jsx new file mode 100644 index 000000000..5f7b449fe --- /dev/null +++ b/part3/exercises/HobbyIntroduction.jsx @@ -0,0 +1,12 @@ +export default function HobbyIntroduction () { + return( +
    +

    3 Fun Facts About Shopping

    +
      +
    1. Shopping helps with my stress levels.
      2. +
    2. Shopping is fun and creative.
      3. +
    3. I love shopping for home decor and holiday decor.
      4. +
    +
    + ); +} diff --git a/part3/exercises/Projects.jsx b/part3/exercises/Projects.jsx new file mode 100644 index 000000000..8ed5e448f --- /dev/null +++ b/part3/exercises/Projects.jsx @@ -0,0 +1,31 @@ +import data from '../data.json'; +import { useState } from 'react'; + +export default function MyProjects() { + const [index, setIndex] = useState(0); + + function handleClick() { + if (index < data.projects.length-1) + { + setIndex(index + 1); + } + else + { + setIndex(0); + } + } + + let projects = data.projects; + let project = projects[index]; + + return ( +
    + +

    {project.canvas} by {project.designer} +

    + {project.alt} +
    + ); +}