diff --git a/README.md b/README.md
index 04dcb0783..d233e50ae 100644
--- a/README.md
+++ b/README.md
@@ -1,300 +1,22 @@
# Word Game
-## Joy of React, Project I
-
-In this project, we'll recreate a popular online word game, Wordle:
+In this project, I have recreated a popular online word game, Wordle:
-In Wordle, users have 6 attempts to guess a 5-letter word. You're helped along the way by ruling out letters that aren't in the word, and being told whether the correct letters are in the correct location or not.
-
-## Getting Started
-
-This project is created with [Parcel](https://parceljs.org/), a modern JS build tool. It's intended to be run locally, on your computer, using Node.js and NPM.
-
-If you're not sure how to run a local development server, or if you run into some trouble, check out the [“Local Development” instructions](https://courses.joshwcomeau.com/joy-of-react/project-wordle/03-dev-server). It includes all the info you need to know, including troubleshooting common issues.
-
-> **NOTE: This project is tricky!**
->
-> This project is meant to be challenging, because I believe that the best way to learn is to be challenged. Depending on your experience level, though, you may feel like it's unreasonably difficult.
->
-> This workshop is split into 5 exercises, and each exercise has a solution video. If you spend more than 10 minutes stuck on an exercise, I encourage you to **watch the solution.** If things are still unclear after that, please ask questions in the Discord community!
-
-## Exercise 1: GuessInput
-
-First thing’s first: we need a way to submit guesses!
-
-In the standard Wordle game, a global event listener registers keypresses. This isn't very accessible, and so we're going to do things a little bit differently.
-
-We'll render a little form that holds a text input:
-
-
-
-Your job in this first exercise is to create a new component for this UI, and render it inside the `Game` component.
-
-Here's a minimal representation of the markup expected to be produced by this new component:
-
-```html
-
-```
-
-**NOTE:** This is the _minimal_ markup required, for the styles to be applied and for accessibility. **It isn't set in stone!** Feel free to make tweaks in order to match all of the acceptance criteria below.
-
-Here's a quick screen recording of the expected result:
-
-
-
-**Acceptance Criteria:**
-
-- Create a new component.
- - Don't forget, you can use an NPM script to generate the scaffolding for you! We learn how to do this in the [“Getting Started” video](https://courses.joshwcomeau.com/joy-of-react/project-wordle/04-overview)
-- This component should render a `
+
+ );
+}
+
+export default GuessInput;
diff --git a/src/components/GuessInput/index.js b/src/components/GuessInput/index.js
new file mode 100644
index 000000000..7d7b03aca
--- /dev/null
+++ b/src/components/GuessInput/index.js
@@ -0,0 +1,2 @@
+export * from './GuessInput';
+export { default } from './GuessInput';
diff --git a/src/components/GuessResults/GuessResults.js b/src/components/GuessResults/GuessResults.js
new file mode 100644
index 000000000..b01122796
--- /dev/null
+++ b/src/components/GuessResults/GuessResults.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { range } from '../../utils';
+import { NUM_OF_GUESSES_ALLOWED } from '../../constants';
+import Guess from '../Guess';
+
+
+function GuessResults({ validatedGuesses }) {
+ return (
+
+ {
+ range(NUM_OF_GUESSES_ALLOWED).map((number) => (
+
+ ))
+ }
+
+ );
+}
+
+export default GuessResults;
diff --git a/src/components/GuessResults/index.js b/src/components/GuessResults/index.js
new file mode 100644
index 000000000..64a5543f5
--- /dev/null
+++ b/src/components/GuessResults/index.js
@@ -0,0 +1,2 @@
+export * from './GuessResults';
+export { default } from './GuessResults';
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index ce7c93491..55df09e0d 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -3,7 +3,7 @@ import React from 'react';
function Header() {
return (
);
}
diff --git a/src/components/Keyboard/Keyboard.js b/src/components/Keyboard/Keyboard.js
new file mode 100644
index 000000000..dc81f58b6
--- /dev/null
+++ b/src/components/Keyboard/Keyboard.js
@@ -0,0 +1,63 @@
+import React from 'react';
+
+const KEYS = [
+ ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+ ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+ ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
+];
+
+const STATUS_RANKS = {
+ correct: 1,
+ misplaced: 2,
+ incorrect: 3,
+}
+
+function Keyboard({ validatedGuesses }) {
+ const getStatusByLetter = () => {
+ const statusObject = {};
+ const allLetters = validatedGuesses.flat();
+
+ allLetters.forEach(({ letter, status }) => {
+ const currentStatus = statusObject[letter];
+
+ if (currentStatus === undefined) {
+ statusObject[letter] = status;
+ return;
+ }
+
+ const currentStatusRank = STATUS_RANKS[currentStatus];
+ const newStatusRank = STATUS_RANKS[status];
+
+ if (newStatusRank < currentStatusRank) {
+ statusObject[letter] = status;
+ }
+ })
+
+ return statusObject;
+ };
+
+ const statusByLetter = getStatusByLetter();
+
+ return (
+
+ {
+ KEYS.map((row, rowIndex) => (
+
+ {
+ row.map((letter) => (
+
+ {letter}
+
+ ))
+ }
+
+ ))
+ }
+