Sudoku Solver

Enter your puzzle and click Solve

 

Technical Features

1. 3x3 Subgrid Styling: The CSS uses the :nth-child selector to apply thicker borders every 3 cells and rows. This creates the visual "blocks" essential for reading Sudoku.

2. Input Filtering: The oninput JavaScript listener ensures that users can only type single digits (1-9). It prevents "0" and multi-digit numbers from breaking the logic.

3. Recursive Search: The solve() function is a depth-first search. It attempts a number and immediately moves to the next empty spot, only returning false (backtracking) if a placement becomes impossible.

4. Visual Feedback: Solved numbers are assigned a .solved class, which changes their color and triggers a subtle background animation so you can see what the AI filled in versus what you started with.

Random Name Picker (Wheel)

Name Picker Wheel

Enter Names (One per line): Alice Bob Charlie Diana Ethan Fiona

 

Technical Concepts

1. Arc Calculations: The wheel is divided into segments using the formula:

   $$\text{Arc Size} = \frac{2\pi}{\text{Number of Names}}$$

   Each segment is then filled with a unique color based on the HSL color space to ensure variety regardless of how many names are added.

2. The Physics of Spinning: We don't just stop the wheel abruptly. The easeOut function simulates friction. It starts fast and slows down progressively, making the outcome feel suspenseful and fair.

3. Determining the Winner: Since the pointer is at the top ($-90^\circ$ or $270^\circ$ in canvas space), the code calculates the final startAngle, normalizes it to $360^\circ$, and maps that back to the array index of names.

4. Responsiveness: The UI uses a flexible flex-direction that shifts from a side-by-side view (Desktop) to a stacked view (Mobile). The Canvas is set to max-width: 100% to ensure it doesn't overflow smaller screens.

Love Calculator (Fun Tool)

❤

Love Calculator

Find out the compatibility between two names!

0%

 

Features Explained

1. Deterministic Result: By using ASCII summation (charCodeAt), the tool ensures that "Romeo" and "Juliet" always get the same score. This adds a layer of "authenticity" to the fun.

2. Number Animation: Rather than just showing a number, the score counts up from 0 to the result using setInterval. This builds anticipation for the user.

3. Responsive Design: The card width is controlled with max-width, ensuring it looks great on a mobile phone (where it fills the screen) and a desktop (where it centers neatly).

4. UX Polish: The "pulsing" heart icon and modern rounded corners create a friendly, "app-like" atmosphere.

How to use this tool:

• Enter Names: Type two names into the input fields.

• Calculate: Click the pink button to trigger the algorithm.

• Review: The score will count up, and a custom message based on the percentage will appear.

Binary to Decimal Converter

Binary Decrypter

Enter Binary Number (0s and 1s)

Invalid input: Only 0 and 1 are allowed.

0 Decimal Equivalent

How it was calculated:

 

Features Explained

Strict Regex Validation: The input listener uses /^[01]*$/ to check the value. If you try to type a '2' or an 'A', the tool instantly flags it as an error and strips the character, keeping the data clean.


Positional Math Engine: The code reverses the binary string so that the index of the array matches the power of 2 ($2^{index}$). This makes the calculation logic much cleaner.


Real-Time Math Breakdown: As you type, the tool generates a string explaining exactly which bits are being added together (e.g., $32 + 8 + 1$). This is great for educational purposes.


Responsive Design: The layout uses a flexible container with max-width and media queries to ensure the "Terminal" feel translates well to mobile screens.

Age Calculator (Years/Months/Days)

Age Calculator

Select Date of Birth

Date cannot be in the future!

- Years

- Months

- Days

 Features Explained

1. Leap Year & Month Accuracy: The script uses new Date(year, month, 0).getDate() to dynamically find how many days are in the preceding month. This ensures that if you were born on the 31st and today is the 30th, the day calculation remains precise.

2. Input Validation: The max attribute on the HTML5 date input is set via JavaScript to today. This prevents users from selecting future dates through the native browser picker.

3. Visual Animation: I've added an animateValue function. Instead of the numbers just "snapping" into place, they count up rapidly, giving the tool a premium, interactive feel.

4. Responsive Grid: The result boxes use grid-template-columns: repeat(3, 1fr), which automatically scales down for smaller screens while keeping the "Years, Months, Days" aligned.

 

 

Features Explained

1. Leap Year & Month Accuracy: The script uses new Date(year, month, 0).getDate() to dynamically find how many days are in the preceding month. This ensures that if you were born on the 31st and today is the 30th, the day calculation remains precise.

2. Input Validation: The max attribute on the HTML5 date input is set via JavaScript to today. This prevents users from selecting future dates through the native browser picker.

3. Visual Animation: I've added an animateValue function. Instead of the numbers just "snapping" into place, they count up rapidly, giving the tool a premium, interactive feel.

4. Responsive Grid: The result boxes use grid-template-columns: repeat(3, 1fr), which automatically scales down for smaller screens while keeping the "Years, Months, Days" aligned.

Typing Speed Test Tool

0 WPM

100% Accuracy

60s Time

 

Features Explained

1. Dynamic Highlighting: Instead of just a text box, we split the source text into individual <span> elements. This allows the CSS to target exactly which letter the user is currently on and change its color based on accuracy.

2. Adaptive Stats: The WPM calculation is a "sliding" average. As you type faster, the WPM climbs; if you pause, it slowly drops, giving you a live look at your performance.

3. Error Handling: The accuracy tracker strictly penalizes mistyped characters, encouraging a balance between speed and precision.

4. Responsive Design: Using Flexbox and CSS Grid, the tool remains perfectly centered and usable on mobile devices, though a physical keyboard is recommended for the best experience.

Pro-Tip for Accuracy

The accuracy is calculated as:

$$\text{Accuracy} = \frac{\text{Total Characters} - \text{Total Errors}}{\text{Total Characters}} \times 100$$

Keeping your accuracy above 95% is generally considered the sweet spot for professional typing.

HabitFlow

Stay consistent, stay disciplined.

 

 Concepts & Visuals

1. The Streak Logic

The most complex part of a habit tracker is the streak calculation. It’s not just about the total number of checkmarks; it’s about continuity.

• If you checked it today, the algorithm looks at yesterday.

• If you haven't checked it today yet, it looks at yesterday to see if the streak is still "active" before resetting it to zero.

2. Local Storage Implementation

To ensure data isn't lost, we use: localStorage.setItem('habits', JSON.stringify(habits)) This turns your list of habits into a text string and stores it in the browser's memory. When the page reloads, we "thaw" that string back into a JavaScript object using JSON.parse.

3. Responsive UI

The CSS uses a Card-based layout. This is ideal for mobile devices because the habits appear as large, easy-to-tap targets. The check-btn grows slightly on hover and changes color to give the user immediate positive feedback upon completion.