Todaydle

A Wordle-inspired word guessing game made using HTML, CSS & Javascript. Features smooth animations, local storage for statistics, and an intuitive user interface built with vanilla JavaScript for optimal performance.

Category Web Game
Technologies Used HTML, CSS, Javascript
Year 2025

Project Overview

Todaydle is my take on the popular Wordle game, built entirely from scratch using vanilla HTML, CSS, and JavaScript. The project demonstrates my ability to create engaging, interactive web experiences without relying on external frameworks.

The game features a clean, modern interface with smooth animations and visual feedback. Players have six attempts to guess a five-letter word, with each guess providing color-coded hints about the correct letters and their positions.

What sets this project apart is its attention to user experience details - from the satisfying tile flip animations to the persistent statistics tracking that remembers your game history across sessions.

HTML5 CSS3 JavaScript ES6+ Local Storage Responsive Design CSS Animations

Interactive Gameplay

Engaging word-guessing mechanics with visual feedback and smooth animations for each guess.

Statistics Tracking

Persistent game statistics including games played, win percentage, and current streak.

Responsive Design

Optimized for all screen sizes, from mobile phones to desktop computers.

Smooth Animations

CSS-powered animations that provide satisfying visual feedback for every interaction.

Local Storage

Game progress and statistics are saved locally, so you never lose your progress.

01

Technical Implementation

Vanilla JavaScript

Built entirely with vanilla JavaScript for maximum performance and minimal dependencies. Features ES6+ syntax including arrow functions, destructuring, and template literals.

Advanced CSS

Utilizes CSS Grid, Flexbox, and custom properties for layout. Keyframe animations provide smooth tile flips and color transitions without JavaScript animation libraries.

Local Storage

Implements browser local storage to persist game statistics and current game state. Data is serialized to JSON and includes error handling for storage limitations.

Development Challenges

Game Logic Implementation

Building the core word guessing mechanics required careful state management and validation logic. Each guess needed to be processed, compared against the target word, and provide accurate feedback through color-coded tiles.

Animation Synchronization

Creating smooth tile flip animations that sync with the game state was particularly challenging. Each tile needed to flip at the right moment, reveal the correct color, and maintain consistent timing across all interactions without blocking the user interface.

Local Storage Management

Implementing persistent game state and statistics required careful data serialization and error handling. Managing storage limitations, handling corrupted data, and ensuring seamless data recovery were key challenges in maintaining user progress.

Game Development

Ready to Play?

Experience Todaydle yourself and see the smooth animations and engaging gameplay in action.