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/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/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/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..b7cbc27d2 --- /dev/null +++ b/part1/exercises/src/Studio/src/App.css @@ -0,0 +1,47 @@ +#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; +} + +.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 new file mode 100644 index 000000000..e062b9808 --- /dev/null +++ b/part1/exercises/src/Studio/src/App.jsx @@ -0,0 +1,22 @@ + +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() { + return ( +
+
+
+ +
+ + +
+
+
+ ); +} + +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/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 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/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.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 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/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... +} 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 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} +
    + ); +}