Skip to content

Commit

Permalink
Merge pull request #1986 from SaiTejaswaniBikkasani/add-anagram-checker
Browse files Browse the repository at this point in the history
Implement Anagram Checker
  • Loading branch information
Sulagna-Dutta-Roy authored Jun 29, 2024
2 parents 4a05e22 + 7ccff45 commit 15133e7
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 0 deletions.
18 changes: 18 additions & 0 deletions Anagram Checker/index.html
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 9 additions & 0 deletions Anagram Checker/manifest.json
Original file line number Diff line number Diff line change
@@ -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"
}
34 changes: 34 additions & 0 deletions Anagram Checker/script.js
Original file line number Diff line number Diff line change
@@ -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();
});
42 changes: 42 additions & 0 deletions Anagram Checker/style.css
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 15133e7

Please sign in to comment.