├── 0-introduction
└── index.html
├── 1-dynamic-rendering
├── after-react.html
└── before-react.html
├── 2-components
├── after-react.html
└── before-react.html
├── 3-props
├── after-react.html
└── before-react.html
├── 4-state
├── after-react.html
└── before-react.html
└── 5-wordle
├── .gitignore
├── package-lock.json
├── package.json
├── public
└── index.html
└── src
├── App.css
├── App.js
├── App.test.js
├── components
├── WordRow.css
└── WordRow.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
├── setupTests.js
└── utils
└── word-checker.js
/0-introduction/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
5 |
6 |
7 |
8 |
9 |
10 |
11 |
15 |
16 |
--------------------------------------------------------------------------------
/1-dynamic-rendering/after-react.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
5 |
6 |
7 |
8 |
9 |
10 |
11 |
21 |
22 |
--------------------------------------------------------------------------------
/1-dynamic-rendering/before-react.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
5 |
6 |
7 |
8 |
9 |
13 |
14 |
--------------------------------------------------------------------------------
/2-components/after-react.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
33 |
34 |
--------------------------------------------------------------------------------
/2-components/before-react.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
5 |
6 |
7 |
8 |
9 |
36 |
37 |
--------------------------------------------------------------------------------
/3-props/after-react.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
34 |
35 |
--------------------------------------------------------------------------------
/3-props/before-react.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
5 |
6 |
7 |
8 |
9 |
35 |
36 |
--------------------------------------------------------------------------------
/4-state/after-react.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
31 |
32 |
--------------------------------------------------------------------------------
/4-state/before-react.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
36 |
37 |
--------------------------------------------------------------------------------
/5-wordle/.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 |
--------------------------------------------------------------------------------
/5-wordle/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "wordle",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.4",
7 | "@testing-library/react": "^13.2.0",
8 | "@testing-library/user-event": "^13.5.0",
9 | "react": "^18.1.0",
10 | "react-dom": "^18.1.0",
11 | "react-scripts": "5.0.1",
12 | "web-vitals": "^2.1.4"
13 | },
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test",
18 | "eject": "react-scripts eject"
19 | },
20 | "eslintConfig": {
21 | "extends": [
22 | "react-app",
23 | "react-app/jest"
24 | ]
25 | },
26 | "browserslist": {
27 | "production": [
28 | ">0.2%",
29 | "not dead",
30 | "not op_mini all"
31 | ],
32 | "development": [
33 | "last 1 chrome version",
34 | "last 1 firefox version",
35 | "last 1 safari version"
36 | ]
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/5-wordle/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 |
--------------------------------------------------------------------------------
/5-wordle/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/5-wordle/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import logo from './logo.svg';
3 | import WordRow from './components/WordRow';
4 | import './App.css';
5 | import { checkGuess } from './utils/word-checker';
6 |
7 | function App() {
8 | const WordOfTheDay = 'FORGO'
9 | const [guesses, setGuesses] = React.useState([]);
10 | const [currentWord, setCurrentWord] = React.useState('');
11 |
12 | const backspace = () => {
13 | setCurrentWord(prev => prev && prev.slice(0, -1));
14 | }
15 | const enter = () => {
16 | if(currentWord.length == 5) {
17 | setGuesses(prev => [...prev, currentWord])
18 | setCurrentWord("");
19 | }
20 | }
21 | const word = (letter) => {
22 | setCurrentWord(prev => prev + letter.toUpperCase())
23 | }
24 |
25 | const handleKeyDown = e => {
26 | let pressedKey = String(e.key)
27 | if (pressedKey === "Backspace") {
28 | backspace();
29 | return
30 | }
31 |
32 | if (pressedKey === "Enter") {
33 | enter();
34 | return
35 | }
36 |
37 | let found = pressedKey.match(/[a-z]/gi)
38 | if (!found || found.length > 1) {
39 | return
40 | } else {
41 | word(pressedKey)
42 | }
43 | }
44 | React.useEffect(() => {
45 | window.addEventListener('keyup', handleKeyDown);
46 |
47 | return () => {
48 | window.removeEventListener('keyup', handleKeyDown);
49 | };
50 | }, [currentWord]);
51 |
52 | return (
53 |
54 |
55 | {guesses.map(guess =>
56 |
57 | )}
58 |
59 |
60 |
61 | );
62 | }
63 |
64 | export default App;
65 |
--------------------------------------------------------------------------------
/5-wordle/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders learn react link', () => {
5 | render();
6 | const linkElement = screen.getByText(/learn react/i);
7 | expect(linkElement).toBeInTheDocument();
8 | });
9 |
--------------------------------------------------------------------------------
/5-wordle/src/components/WordRow.css:
--------------------------------------------------------------------------------
1 | .word-row span {
2 | font-family: monospace;
3 | display: inline-block;
4 | padding: 0.5rem;
5 | border: 1px solid #fff;
6 | margin: 0rem 0.25rem 0rem 0.25rem;
7 | }
8 |
9 | .green {
10 | background-color: green;
11 | }
12 |
13 | .yellow {
14 | background-color: yellow;
15 | }
16 |
17 | .word-row {
18 | padding-bottom: 0.5rem;
19 | }
20 |
--------------------------------------------------------------------------------
/5-wordle/src/components/WordRow.js:
--------------------------------------------------------------------------------
1 | import './WordRow.css'
2 |
3 | function WordRow({ word = '', result }) {
4 | return (
5 |
6 | {Array.from(Array(5)).map((_, i) => (
7 |
8 | {word[i] || '_'}
9 |
10 | ))}
11 |
12 | )
13 | }
14 |
15 | export default WordRow;
16 |
--------------------------------------------------------------------------------
/5-wordle/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/5-wordle/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | const root = ReactDOM.createRoot(document.getElementById('root'));
8 | root.render(
9 |
10 |
11 |
12 | );
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/5-wordle/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/5-wordle/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/5-wordle/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/5-wordle/src/utils/word-checker.js:
--------------------------------------------------------------------------------
1 | function getFrequencyTable(word) {
2 | return word.split('').reduce((total, letter) => {
3 | total[letter] ? total[letter]++ : total[letter] = 1;
4 | return total;
5 | }, {});
6 | }
7 |
8 | export function checkGuess(guess, solution) {
9 | const frequencyTable = getFrequencyTable(solution);
10 |
11 | const result = {};
12 |
13 | // Check for green
14 | [...guess].forEach((letter, i) => {
15 | if (frequencyTable[letter] && solution[i] == letter) {
16 | result[i] = 'green';
17 | frequencyTable[letter]--;
18 | }
19 | });
20 |
21 | // Check for yellow
22 | [...guess].forEach((letter, i) => {
23 | if (result[i]) return;
24 |
25 | if (frequencyTable[letter]) {
26 | result[i] = 'yellow';
27 | frequencyTable[letter]--;
28 | }
29 | })
30 |
31 | return result;
32 | }
33 |
--------------------------------------------------------------------------------