Introduction:
Have you ever wondered if two words are anagrams of each other? Anagrams are words or phrases formed by rearranging the letters of another. They can be a fun and challenging puzzle. In this tutorial, we’re going to explore a JavaScript code snippet that checks whether two words are anagrams. This handy tool can be integrated into various applications, from word games to language processing tools.
Things You Will Learn:
By the end of this tutorial, you will:
- Understand how to create a simple web-based anagram checker.
- Learn how to manipulate user input and perform string operations.
- Gain insights into event handling in JavaScript.
Video Tutorial:
Do take a look at my YouTube channel. Whether you are looking to start a new career or just looking to enhance your existing skill set, we have got you covered. Subscribe now and take your first step towards becoming a professional web developer!
Project Folder Structure:
Now before we move on to actual coding we create a project folder structure. We name the project folder – ”Anagram Checker”. Within this folder, we have 3 files. These files are:
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Anagram Checker</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Anagram Checker</h1>
<p class="desc">Enter two words to check if they are anagrams:</p>
<div class="inputs">
<input type="text" id="word1Input" placeholder="Enter word 1" />
<input type="text" id="word2Input" placeholder="Enter word 2" />
</div>
<button id="btn">Check</button>
<p id="result"></p>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #0083e8;
}
.container {
width: min(90%, 31.25em);
background-color: #ffffff;
padding: 3em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
border-radius: 0.5em;
}
.desc {
margin: 1em 0 3em 0;
}
.inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5em;
}
input {
width: 100%;
border: 1px solid #000000;
padding: 0.5em;
outline: none;
border-radius: 0.3em;
font-size: 1em;
}
button {
display: block;
margin: 0 auto 1em auto;
background-color: #0083e8;
color: #ffffff;
border: none;
outline: none;
padding: 0.7em 2em;
border-radius: 0.5em;
font-size: 1em;
margin-top: 2em;
}
#result {
text-align: center;
}
.success,
.error {
padding: 0.5em 0;
}
.success {
color: #078307;
background-color: #d0ffd0;
}
.error {
color: #a00606;
background-color: #ffc4b0;
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
const btn = document.getElementById("btn");
let result = document.getElementById("result");
btn.addEventListener("click", () => {
//Get user input from the input field
const word1 = document.getElementById("word1Input").value.toLowerCase();
const word2 = document.getElementById("word2Input").value.toLowerCase();
//Removev spaces and punctuation from both words
const cleanedWord1 = word1.replace(/[^\w]/g, "");
const cleanedWord2 = word2.replace(/[^\w]/g, "");
//Check if the lengths are the same
if (cleanedWord1.length !== cleanedWord2.length) {
result.textContent = "Not an anagram";
result.classList.remove("success");
result.classList.add("error");
return;
}
//Count letter occurences in the first word
const letterCount1 = {};
for (const char of cleanedWord1) {
letterCount1[char] = (letterCount1[char] || 0) + 1;
}
//Count letter occurences in the second word
const letterCount2 = {};
for (const char of cleanedWord2) {
letterCount2[char] = (letterCount2[char] || 0) + 1;
}
//Compare letter counts
for (const char in letterCount1) {
if (letterCount1[char] !== letterCount2[char]) {
result.textContent = "Not an anagram";
result.classList.remove("success");
result.classList.add("error");
return;
}
}
//If all letter counts are same it's an anagram
document.getElementById("result").textContent = "It's an anagram!";
result.classList.remove("error");
result.classList.add("success");
});
Conclusion:
With this JavaScript code, you can quickly determine whether two words are anagrams or not. This code snippet showcases how JavaScript can be used to manipulate strings, handle user input, and provide dynamic feedback to users.
Feel free to integrate this anagram checker into your projects, such as word games or language-related applications. Experiment with the CSS to style it to your liking and enhance the user experience. Happy coding!
