Wordle-Clone

• 

  Wordle

Introduction

Wordle is a web-based word game created and developed by Welsh software engineer Josh Wardle and owned and published by the New York Times Company since 2022.

What it does

In my edition players have five attempts to guess a five-letter word, with feedback given for each guess in the form of coloured tiles indicating when letters match or occupy the correct position. I also added a timer to log players' time. At the end of each game, players can copy their results as emoji squares.

How I built it

I build it using Reactjs, and third-party libraries Animate.css and React-modal. Animate.css is used for the word block animations and React-modal for the tutorial modal that displays at the beginning. In react I basically created a matrix of "div"s, aligned them using display: grid in CSS and later changed the state of the "div"s.

Challenges I ran into

1. API for 5-letter English words.
2. Introducing delay on state change, as the word tile/box would animate or change instantly.

Accomplishments that I'm proud of

1. The delay functionality using setTimeout() and Promise() api.
2. The timer functionality.
3. The ability to share results as emoji squares.

What I learned

1. Use of Grid CSS.
2. Animate.css library.

Built With

• animate.css
• github
• react
• react-modal