Implement Anagram Checker Functionality

Added a new Anagram Checker feature to the application. The tool allows users to input two words and check if they are anagrams of each other.
Sulagna-Dutta-Roy · Jun 29, 2024 · 7ccff45 · 7ccff45
1 parent 126fb69
commit 7ccff45
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 0 deletions.
diff --git a/Anagram Checker/index.html b/Anagram Checker/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Anagram Checker</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div class="container">
+      <h1>Anagram Checker</h1>
+      <input type="text" class="js-word1" placeholder="Enter Word 1"><br>
+      <input type="text" class="js-word2" placeholder="Enter Word 2"><br>
+      <button type="submit" class="js-submit">Check</button>
+      <div class="js-result result"></div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Anagram Checker/manifest.json b/Anagram Checker/manifest.json
@@ -0,0 +1,9 @@
+{
+  "name": "Anagram Checker",
+  "short_name": "Anagram",
+  "description": "A tool to check if two words are anagrams.",
+  "start_url": "index.html",
+  "display": "standalone",
+  "background_color": "#f9f9f9",
+  "theme_color": "#006400"
+}
diff --git a/Anagram Checker/script.js b/Anagram Checker/script.js
@@ -0,0 +1,34 @@
+function anagramChecker(){
+  const word1 = document.querySelector('.js-word1').value.trim();
+const word2 = document.querySelector('.js-word2').value.trim();
+
+  let resultVal = document.querySelector('.js-result');
+
+  if (word1 === '' && word2 === ''){
+    resultVal.innerHTML = 'Please enter both words';
+  }
+  else if (word1 === ''){
+    resultVal.innerHTML = 'Please enter word 1';
+  }
+  else if (word2 === ''){
+    resultVal.innerHTML = 'Please enter word 2';
+  }
+  else{
+    const newText1 = word1.toLowerCase().split('').sort().join('');
+    const newText2 = word2.toLowerCase().split('').sort().join('');
+
+    if(newText1 === newText2){
+      resultVal.innerHTML = 'Anagrams';
+      resultVal.style.color = 'green';
+    }
+    else{
+      resultVal.innerHTML = 'Not Angrams';
+      resultVal.style.color = 'red';
+    }
+  }
+}
+
+document.querySelector('.js-submit')
+  .addEventListener('click', () => {
+    anagramChecker();
+  });
diff --git a/Anagram Checker/style.css b/Anagram Checker/style.css
@@ -0,0 +1,42 @@
+.container{
+  width: 400px;
+  height: 320px;
+  background-color: #f9f9f9;
+  border: 1.5px solid black;
+  border-radius: 7px;
+  margin: 100px auto;
+}
+h1{
+  text-align: center;
+}
+input{
+  margin-left: 20px;
+  width: 300px;
+  padding: 7px 10px;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  border: 1.5px solid black;
+  border-radius: 5px;
+}
+button{
+  margin-left: 150px;
+  margin-bottom: 10px;
+  margin-top: 20px;
+  padding: 10px 20px;
+  border: none;
+  background-color: green;
+  color: white;
+  font-family: Arial;
+  font-weight: bold;
+  border-radius: 5px;
+  cursor: pointer;
+}
+button:hover{
+  background-color:darkgreen;
+}
+.result{
+  text-align: center;
+  color: red;
+  font-weight: bold;
+  font-size: 20px;
+}