wordle-[Mohamed aboulhoda]

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

@@ -0,0 +1,13 @@
+{
+    "singleQuote": true,
+    "printWidth": 80,
+    "editor.formatOnSave": true,
+    "proseWrap": "always",
+    "tabWidth": 4,
+    "requireConfig": false,
+    "useTabs": false,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "semi": true
+  }

README.md

@@ -1,57 +1,26 @@
-# OpenDevEd-Wordle
-## Requirements:
-Your task is to create a web-based Wordle game using React that adheres to the following specifications:
 
-### User Interface (UI):
-
-Design a clean and intuitive UI for the game that includes:
-
-- Input field for guessing words.
-- Submit button to submit the guess.
-- Display area for previous guesses.
-= Indication of correct letters in correct positions (right letter, right position).
-- Indication of correct letters in the wrong position.
-- Display remaining attempts.
-- End game state UI (upon winning or losing).
-
-### State Management:
-
-Implement a robust state management system to handle:
-
-- Target word selection (randomly generate a word at the start of the game).
-- Storing user guesses and their results.
-- Tracking remaining attempts.
-
-### User Interaction:
-
-- Capture user input for word guesses.
-- Validate input (alphabetic characters, word length, etc.).
-- Handle the submission of guesses and update the game state accordingly.
-
-
-### Game Logic:
-
-- Compare the user's guessed word against the target word.
-- Provide feedback to the user about the correctness of the guessed word.
-- End the game when the correct word is guessed or when the attempts reach zero.
-
-## Code Quality:
-
-- Write clean, readable, and maintainable code.
-- Implement best practices for React development.
-- Ensure error handling for edge cases (invalid input, unexpected behavior).
-
-## Submission Guidelines:
-
-- Fork this [repository](https://github.com/OpenDevEd/OpenDevEd-wordle/)) and create a new branch named `wordle-[YOUR NAME]`.
-- Provide clear instructions on how to run the application locally.
-- Include a README file explaining your approach, decisions made, and any additional features implemented.
-- Open a PR.
-
-## Evaluation Criteria:
-
-- UI/UX design and functionality.
-- Code quality, structure, and maintainability.
-- State management and logic implementation.
-- Handling of edge cases and error scenarios.
-- Bonus points for additional features or optimizations.
+## Game logic
+**Wordle** is a famous game where the user should guess the word in 6 tries or less.
+* Each guess must be a valid 5-letter word.
+* The color of the tiles will change to show how close your guess was to the word.
+* ***Examples:***
+    * If the letter in <span style="color: #6aaa64 font-weight: bold">green</span>, then it is in the word and in the correct spot.
+    * If the letter in <span style="color: #c9b458; font-weight: bold"> yellow, then it is in the word but in the wrong spot.
+    * If the letter in <span style="color: #A9A9A9; font-weight: bold">grey</span>, then it is not in the word  in any spot.
+
+## Approach
+***This app built using React***<br>
+The app starts by generating a random word of 5 letters using a [third party API](https://random-word-api.herokuapp.com/). Then we start listening on the keyup event so we can store the the guessed word in *currentGuess* state.<br>
+After the user clicks **Enter** we first check the existence of the guessed word using [this API](https://dictionaryapi.dev/) if this word exist and not previously guessed and the user still has enough turns then we format this word as objects of `{letter, color}` while *letter* represents each letter of this word and *color* respresent the color of each letter based on the status of your guess as described in [Game logic](#game-logic) section, and store the formatted word in *guesses* state then we loop through guesses to display words.
+
+
+## Usage
+You can Run this app using the following steps:<br>
+1. First you need to clone the project in your local machine:<br>
+`git clone git@github.com:maboulho/Wordle-mohamed-aboulhoda.git`
+2. Go to the app Directory:<br>
+`cd wordle-mohamed-aboulhoda`
+3. Install dependencies:<br>
+`npm install`
+4. Run the applicatiom:<br>
+`npm run start`