diff --git a/Anagram Checker/index.html b/Anagram Checker/index.html new file mode 100644 index 00000000..e3169a3a --- /dev/null +++ b/Anagram Checker/index.html @@ -0,0 +1,18 @@ + + + + + Anagram Checker + + + +
+

Anagram Checker

+
+
+ +
+
+ + + \ No newline at end of file diff --git a/Anagram Checker/manifest.json b/Anagram Checker/manifest.json new file mode 100644 index 00000000..fa0b44fe --- /dev/null +++ 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 new file mode 100644 index 00000000..ab3ee3bb --- /dev/null +++ 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(); + }); \ No newline at end of file diff --git a/Anagram Checker/style.css b/Anagram Checker/style.css new file mode 100644 index 00000000..76c67d2a --- /dev/null +++ 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; +} \ No newline at end of file