Wordle Clone with Vanilla JavaScript

👉 Live Demo on Vercel 👈

Table of Contents

1. Intro
   • Rules
2. About The Project
   • Built Using
3. Contact

Intro

Wordle.Clone.VJS.Angi.Preview.mp4

Rules

  Guess the Wordle (a 5-letter word) in 6 tries.
  The color of the tiles will change to show how close your guess was to the word.

• Green - The word contains that letter & the letter is in the correct spot
• Yellow - The word contains that letter but the letter is in the wrong spot
• Gray - The word doesn't include that letter

Login Account:

• You can also create your own account
• Email = aaaaaa@yahoo.com
• Password = aaaaaa

(back to top)

About The Project

Flowchart of the Project

• Yellow - The possible actions a user can take
• Green - Shows what happens as soon as one action is executed
• Blue - If-Else where we check for a certain condition
• Red - Finish Line :)

Summary

• Wordle is a game where you have to guess a 5-letter word in 6 goes or less.
  • Features of the project:
    • Responsive Design
    • Fully Functional Game - Give it a try :)
    • Firebase Authentication (Login/Signup Pages)
    • Firestore for Data Handling (Highscore Stats)
    • Leaderboard Modal (based on Firestore)
    • Version Control (different branches for each major change)
    • Patch Notes with link to each branch (down below)

Built Using

• 
• 
• 
• 

(back to top)

Patch Notes:

v4.1 - Firestore Database + Leaderboard Ranks

• [4.1] Changed Project Structure - CSS and JS in separate folders
• Firestore Database - Player-Data Available in Firestore (Display Name, Attempts and Time Left)
• Leaderboard Modal - Displays #Top10 Best Players (Sorted via Composite Indexed Fields - Attempts ascending & Time descending)
• Functional SignUp + Page Changes - CSS & "Display Name" Field added
• Customized Alerts for Winning / Losing
• Modal for Leaderboard
• Functional Buttons

v3.1 - Firebase Authentication

• [3.1] SignUp Page - Email-Password
• Login Page - Email-Password & Google Sign-In
• Firebase Auth - User is logged on session, gets kicked if the timer expires
• CSS: Login Page CSS, New Icons added for Wordle Page
• Buttons for Log-Out, Timer, Rules, Restart Game and Leaderboard (work in progress)
• File Structure Changes (Wordle Game moved to new files)

v2.0 - On-Screen Mobile Keyboard

• Functional On-Screen Keyboard
• CSS: Default Keyboard
• Fixed Capitalization Input Errors

v1.0 - Game Implementation (without on-screen mobile keyboard)

• Functional Game
• Alerts for Invalid Word/Win/Lose
• CSS & Animation: Normal-Wrong-Right letter display, Letter flipping
• Over 5000 Words - credits to charlesreid1

Replica of original Wordle Game

(back to top)

Contact Me