├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── index.css └── index.js └── yarn.lock /.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 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## How to run: 4 | - Open a terminal/command line in a directory where you want to save the project to 5 | - Checkout the project 6 | 7 | ``` 8 | git clone https://github.com/chrisblakely01/basic-react-forms.git 9 | 10 | ``` 11 | 12 | - Navigate to project in the terminal 13 | - Install the project: 14 | 15 | ``` 16 | npm install 17 | ``` 18 | 19 | - Start the project 20 | 21 | ``` 22 | npm start 23 | ``` 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starter-code", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisblakely01/basic-react-forms/c493c06157afc3a51259ffc36c15e25e26b368e5/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/chrisblakely01/basic-react-forms/c493c06157afc3a51259ffc36c15e25e26b368e5/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrisblakely01/basic-react-forms/c493c06157afc3a51259ffc36c15e25e26b368e5/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 React from "react"; 2 | import "./index.css"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
8 | {/* Uncomment the next line to show the success message */} 9 | {/*
Success! Thank you for registering
*/} 10 | 17 | {/* Uncomment the next line to show the error message */} 18 | {/* Please enter a first name */} 19 | 26 | {/* Uncomment the next line to show the error message */} 27 | {/* Please enter a last name */} 28 | 35 | {/* Uncomment the next line to show the error message */} 36 | {/* Please enter an email address */} 37 | 40 |
41 |
42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:300); 2 | 3 | body { 4 | background: #76b852; 5 | display: flex; 6 | min-height: 100vh; 7 | justify-content: center; 8 | align-items: center; 9 | } 10 | 11 | .form-container { 12 | width: 360px; 13 | background-color: white; 14 | margin: auto; 15 | box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 16 | padding: 10px; 17 | } 18 | 19 | .register-form { 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: space-evenly; 23 | padding: 10px; 24 | } 25 | 26 | .success-message { 27 | font-family: "Roboto", sans-serif; 28 | background-color: #3f89f8; 29 | padding: 15px; 30 | color: white; 31 | } 32 | 33 | .form-field { 34 | margin: 10px 0 10px 0; 35 | padding: 15px; 36 | font-size: 16px; 37 | border: 0; 38 | font-family: "Roboto", sans-serif; 39 | } 40 | 41 | span { 42 | font-family: "Roboto", sans-serif; 43 | font-size: 14px; 44 | color: red; 45 | margin-bottom: 15px; 46 | } 47 | 48 | input { 49 | background: #f2f2f2; 50 | } 51 | 52 | .error { 53 | border-style: solid; 54 | border: 2px solid #ffa4a4; 55 | } 56 | 57 | button { 58 | background: #4caf50; 59 | color: white; 60 | cursor: pointer; 61 | } 62 | 63 | button:disabled { 64 | cursor: default; 65 | } 66 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ); 11 | --------------------------------------------------------------------------------