├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.js ├── Input.js ├── Square.js ├── index.css └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # "React JS - React Code Challenge | Beginner Project" 2 | 3 | ✅ [Check out my YouTube Channel with all of my tutorials](https://www.youtube.com/DaveGrayTeachesCode). 4 | 5 | **Description:** 6 | 7 | This repository shares the code from the Youtube tutorial. The tutorial is part of a [Learn React Playlist](https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp) on my channel. 8 | 9 | [YouTube Tutorial](https://youtu.be/oWIqiVAK1Wo) for this repository. 10 | 11 | I suggest completing my [8 hour JavaScript course tutorial video](https://youtu.be/EfAl9bwzVZk) if you are new to Javascript. 12 | 13 | ### Academic Honesty 14 | 15 | **DO NOT COPY FOR AN ASSIGNMENT** - Avoid plagiargism and adhere to the spirit of this [Academic Honesty Policy](https://www.freecodecamp.org/news/academic-honesty-policy/). 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "10tut", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "colornames": "^1.1.1", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/react_beginner_challenge/a0e354fb15eeaeca2acfa02730e07b0a0bf5d837/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/react_beginner_challenge/a0e354fb15eeaeca2acfa02730e07b0a0bf5d837/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/react_beginner_challenge/a0e354fb15eeaeca2acfa02730e07b0a0bf5d837/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import Square from './Square' 2 | import Input from './Input' 3 | import { useState } from 'react' 4 | 5 | function App() { 6 | const [colorValue, setColorValue] = useState('') 7 | const [hexValue, setHexValue] = useState('') 8 | const [isDarkText, setIsDarkText] = useState(true) 9 | 10 | return ( 11 |
12 | 17 | 24 |
25 | ); 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /src/Input.js: -------------------------------------------------------------------------------- 1 | import colorNames from 'colornames' 2 | 3 | const Input = ({ 4 | colorValue, setColorValue, setHexValue, isDarkText, setIsDarkText 5 | }) => { 6 | return ( 7 |
e.preventDefault()}> 8 | 9 | { 16 | setColorValue(e.target.value); 17 | setHexValue(colorNames(e.target.value)); 18 | }} 19 | /> 20 | 26 |
27 | ) 28 | } 29 | 30 | export default Input 31 | -------------------------------------------------------------------------------- /src/Square.js: -------------------------------------------------------------------------------- 1 | const Square = ({ colorValue, hexValue, isDarkText }) => { 2 | return ( 3 |
10 |

{colorValue ? colorValue : "Empty Value"}

11 |

{hexValue ? hexValue : null}

12 |
13 | ) 14 | } 15 | 16 | Square.defaultProps = { 17 | colorValue: "Empty Color Value" 18 | } 19 | 20 | export default Square 21 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-size: 36px; 9 | } 10 | 11 | body { 12 | min-height: 100vh; 13 | font-family: 'Roboto', sans-serif; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .App { 19 | min-height: 100vh; 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | 26 | .square { 27 | width: 400px; 28 | height: 400px; 29 | border: 2px solid #000; 30 | box-shadow: 2px 2px 5px #000; 31 | border-radius: 0.25rem; 32 | display: grid; 33 | place-content: center; 34 | } 35 | 36 | .square p { 37 | text-align: center; 38 | } 39 | 40 | form { 41 | width: 400px; 42 | } 43 | 44 | label { 45 | position: absolute; 46 | left: -99999px; 47 | } 48 | 49 | input[type="text"] { 50 | margin-top: 0.5rem; 51 | padding: 0.25rem; 52 | width: 100%; 53 | font-size: 1rem; 54 | box-shadow: 2px 2px 5px #000; 55 | border-radius: 0.25rem; 56 | outline: none; 57 | } 58 | 59 | button { 60 | width: 100%; 61 | min-height: 48px; 62 | margin-top: 0.5rem; 63 | font-size: 1rem; 64 | border-radius: 0.25rem; 65 | box-shadow: 2px 2px 5px #000; 66 | padding: 0.25rem; 67 | } 68 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | 13 | --------------------------------------------------------------------------------