Do you love word games? 🧠 Want to brush up on your frontend coding while creating something fun? I built a simple yet addictive Anagram Game using plain HTML, CSS, and JavaScript — no frameworks, no libraries, just vanilla goodness!

Let’s walk through the project and inspire you to make your own or improve this one.

🧩 What’s an Anagram?

An anagram is a word formed by rearranging the letters of another word. For example, "apple" can be turned into "papel". This game shuffles a word and asks the user to guess the original word in 3 tries!

🎮 How the Game Works

A random word is selected from a preset list (with fun hints! 🎉)
Its letters are shuffled and shown to the player.
The player types their guess and hits Enter.
They get 3 tries, and if they're wrong, a helpful hint appears!
You can reshuffle the word if you get stuck.
Stop and restart options are available for more control.

🌈 Features

🎨 Stylish UI with pastel tones and emoji hints
🎯 Real-time input with Enter key support
♻️ Automatic word reshuffle
🧠 Score tracking
🛑 Pause and restart functionality

🧠 Technologies Used

HTML for structure
CSS for the styling including button colors and font choices like Comic Sans for fun vibes
JavaScript for game logic and interactivity

🧪 Try It in Colab or Jupyter (IPython)

You can embed this in a Jupyter Notebook using:

from IPython.core.display import display, HTML

html_code = """ 
<!-- (Paste your full HTML code here) -->
"""

display(HTML(html_code))

It’s a great way to combine Python environments with frontend practice!

🔧 Code Highlights

Shuffle logic:

function shuffle(str) {
  return str.split('').sort(() => Math.random() - 0.5).join('');
}

Guess check and feedback:

function checkGuess() {
  if (!gameActive) return;
  const guess = document.getElementById("guess").value.toLowerCase().trim();
  if (guess === current.word) {
    // success
  } else {
    // show hint or game over
  }
}

Keyboard integration:

document.getElementById("guess").addEventListener("keyup", function (event) {
  if (event.key === "Enter") {
    checkGuess();
  }
});

🎁 Bonus Ideas for Expansion

Want to make it more challenging or fun?

🔊 Add sound effects or voice-based hints!
👥 Multiplayer support
🔠 Categorize by difficulty or topic

🎉 Final Thoughts

This was just a fun little side project to keep my creativity flowing and test frontend fundamentals. Whether you're a beginner or an expert, small games like these can sharpen your skills and make coding joyful again.

Feel free to fork it, remix it, and share your own versions! 🚀

💬 What’s your favorite word game? Drop it in the comments! Or even better — challenge me with an anagram !!!

💥 Anagram with HTML, CSS & JavaScript 🎮