使用HTML CSS和JavaScript创建一个Anagram Checker App

在本文中，我们将看到如何创建一个可以验证两个输入单词是否是Anagrams的Web应用程序，以及通过插图了解基本实现。

Anagram是指通过重新排列另一个单词或短语的字母，每个字母只使用一次，创建的一个单词或短语。也就是说，一个字符串的Anagram是另一个字符串，它包含相同的字符，只是字符的顺序可能不同。例如，“silent”和“listen”的所有字符都是相同的。

先决条件

最终输出

方法：

创建一个包含两个输入字段的网页，用户可以在其中输入他们的单词。
创建一个包含输入字段、一个“检查”按钮和一个指定空间用于显示结果的HTML文件。
为了为用户提供一个界面并确保它们居中，样式化所需的HTML元素。
点击“检查”按钮之后，JavaScript代码将确定输入的单词是否是字谜，并相应地在页面上显示结果。
包括处理字谜检查和输入验证的JavaScript函数。
例子： 这个例子描述了使用HTML、CSS和JavaScript实现字谜检查应用程序的基本实现。

HTML

<!--index.html-->
  
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0" /> 
    <link rel="stylesheet" 
          href="styles.css" /> 
      <script src="script.js"></script> 
    <title>Anagram Checker</title> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 id="top">GeeksforGeeks</h1> 
        <h1>Anagram Checker</h1> 
        <input type="text" 
               id="word1" 
               placeholder="Enter word 1" /> 
        <input type="text" 
               id="word2" 
               placeholder="Enter word 2" /> 
        <button onclick="checkAnagram()"> 
              Check 
          </button> 
        <p id="result"></p> 
    </div> 
</body> 
  
</html>

CSS

/*style.css */
  
body { 
    font-family: Arial, sans-serif; 
    background-color: #f2f2f2; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
} 
  
#top { 
    color: green; 
} 
  
.container { 
    text-align: center; 
    background-color: white; 
    padding: 20px; 
    border-radius: 5px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    max-width: 400px; 
    margin: 0 auto; 
  
} 
  
h1 { 
    font-size: 24px; 
} 
  
input { 
    width: 100%; 
    padding: 10px; 
    margin: 10px 0; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
  
    /* Include padding and border in the width */
    box-sizing: border-box; 
  
} 
  
button { 
    background-color: green; 
    color: white; 
    border: none; 
    padding: 10px 20px; 
    border-radius: 3px; 
    cursor: pointer; 
} 
  
button:hover { 
    background-color: #43aa2e; 
} 
  
p { 
    font-size: 18px; 
    margin-top: 10px; 
}

Javascript

// script.js 
  
function checkAnagram() { 
    const word1 = document 
        .getElementById("word1") 
        .value.trim().toLowerCase() 
        .replace(/[^a-z]/g, ""); 
    const word2 = document 
        .getElementById("word2").value.trim() 
        .toLowerCase().replace(/[^a-z]/g, ""); 
  
    if (word1 === "" || word2 === "") { 
        alert("Please enter both words."); 
        return; 
    } 
  
    if (word1.length !== word2.length) { 
        document.getElementById("result") 
            .textContent = "Not anagrams"; 
        return; 
    } 
  
    const sortedWord1 = word1.split("") 
        .sort().join(""); 
    const sortedWord2 = word2.split("") 
        .sort().join(""); 
  
    if (sortedWord1 === sortedWord2) { 
        document.getElementById("result") 
            .textContent = "Anagrams"; 
    } else { 
        document.getElementById("result") 
            .textContent = "Not anagrams"; 
    } 
}