Foundations

.editorconfig

@@ -0,0 +1,19 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+indent_size = 4
+tab_width = 4
+
+[*.md]
+trim_trailing_whitespace = false
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml,.eslintrc,.babelrc,.prettierrc,README.md}]
+indent_style = space
+indent_size = 2

.eslintignore

@@ -0,0 +1,4 @@
+.cache
+package-lock.json
+public
+static

.eslintrc

@@ -0,0 +1,35 @@
+{
+  "extends": [
+    "react-app",
+    "react-app/jest",
+    "airbnb"
+  ],
+  "rules": {
+    "strict": 0,
+    "no-console": 1,
+    "arrow-body-style": ["error", "always"],
+    "new-cap": ["error", { "properties": false }],
+    "no-param-reassign": ["error", { "props": false }],
+    "max-len": ["error", {
+      "ignoreUrls": true,
+      "ignoreStrings": true,
+      "ignoreTemplateLiterals": true,
+      "ignoreRegExpLiterals": true,
+      "code": 150
+    }],
+    "no-underscore-dangle": "off",
+    "no-tabs": "off",
+    "no-trailing-spaces": "error",
+    "indent": ["error", "tab", { "SwitchCase": 1 }],
+    "react/jsx-filename-extension": 0,
+    "react/jsx-indent": [2, "tab", { "indentLogicalExpressions": true }],
+    "react/jsx-indent-props": [2, "tab"],
+    "jsx-a11y/media-has-caption": 0
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "jquery": true
+  }
+}

package.json

@@ -6,23 +6,24 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
+  "devDependencies": {
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react-hooks": "^4.3.0"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

src/App.css

@@ -7,12 +7,6 @@
   pointer-events: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
 .App-header {
   background-color: #282c34;
   min-height: 100vh;

src/App.js

@@ -1,25 +1,15 @@
-import logo from './logo.svg';
+import React from 'react';
 import './App.css';
+import Board from './board/Board';
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+	return (
+		<div className="App">
+			<header className="App-header">
+				<Board />
+			</header>
+		</div>
+	);
 }
 
 export default App;

src/App.test.js

@@ -1,8 +1,9 @@
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+	render(<App />);
+	const linkElement = screen.getByText(/learn react/i);
+	expect(linkElement).toBeInTheDocument();
 });

src/board/Board.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.css';
+import Card from '../card/Card';
+
+function Board() {
+	const cards = [null, null, null, null, null, null, null, null, null];
+
+	const isHappyCardPosition = Math.floor(Math.random() * cards.length);
+	cards[isHappyCardPosition] = true;
+
+	return (
+		<section className="board">
+			{cards.map((card, index) => {
+				// eslint-disable-next-line react/no-array-index-key
+				return <Card key={index} isHappy={card} />;
+			})}
+		</section>
+	);
+}
+
+export default Board;

src/board/index.css

@@ -0,0 +1,7 @@
+.board {
+	width: 100%;
+	max-width: 1024px;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}

src/card/Card.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './index.css';
+
+function Card(props) {
+	const handleClick = (e) => {
+		const { target } = e;
+
+		if (!target) {
+			return;
+		}
+
+		const happyCard = target.classList.contains('card--happy');
+
+		if (!happyCard) {
+			target.classList.add('card--faded');
+		} else {
+			console.log('YES');
+		}
+	};
+
+	return (
+		// eslint-disable-next-line react/destructuring-assignment
+		<button onClick={handleClick} type="button" className={`card${props.isHappy ? ' card--happy' : ''}`}>
+			<img src="https://google.com/" alt="" />
+		</button>
+	);
+}
+
+Card.defaultProps = {
+	isHappy: false,
+};
+
+Card.propTypes = {
+	isHappy: PropTypes.bool,
+};
+
+export default Card;

src/card/index.css

@@ -0,0 +1,19 @@
+.card {
+	width: 100%;
+	max-width: 31%;
+	height: 250px;
+	margin: 10px;
+	padding: 0;
+
+	background-color: white;
+	border: 0;
+}
+
+.card--happy {
+	border: 20px solid orange;
+}
+
+.card--faded {
+	opacity: 0.5;
+	transition: ease-in-out opacity 0.2s;
+}

src/index.js

@@ -5,10 +5,10 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+	document.getElementById('root'),
 );
 
 // If you want to start measuring performance in your app, pass a function

src/reportWebVitals.js

@@ -1,13 +1,15 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
+const reportWebVitals = (onPerfEntry) => {
+	if (onPerfEntry && onPerfEntry instanceof Function) {
+		import('web-vitals').then(({
+			getCLS, getFID, getFCP, getLCP, getTTFB,
+		}) => {
+			getCLS(onPerfEntry);
+			getFID(onPerfEntry);
+			getFCP(onPerfEntry);
+			getLCP(onPerfEntry);
+			getTTFB(onPerfEntry);
+		});
+	}
 };
 
 export default reportWebVitals;