Add files via upload

sau-mili · Aug 10, 2024 · 94460e1 · 94460e1
1 parent 7483cac
commit 94460e1
Show file tree

Hide file tree

Showing 3 changed files with 168 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html> 
+<html lang="en"> 
+
+<head> 
+    <meta charset="UTF-8" /> 
+    <meta name="viewport"
+          content="width=device-width, 
+                   initial-scale=1" /> 
+    <link href="style.css" 
+          rel="stylesheet" /> 
+</head> 
+
+<body> 
+    <div class="root"> 
+        <h1>Count Anagrams</h1> 
+        <div class="option"> 
+            <span> 
+                <label for="inputString"> 
+                    Input String:
+                </label> 
+                <input id="inputString" 
+                       type="text" 
+                       value="forxxorfxdofr" /> 
+            </span> 
+            <span> 
+                <label for="inputWord"> 
+                      Enter the word you wish to find anagram of: 
+                  </label> 
+                <input id="inputWord" 
+                       type="text" 
+                       value="for" /> 
+            </span> 
+            <span style="text-align: center; width: 50%"> 
+                <input style="text-align: center; width: 50%;"
+                       type="button" 
+                       value="Submit" 
+                       onclick="fun()" /> 
+            </span> 
+        </div> 
+        <h3 id="nums"></h3> 
+        <p id="explain"></p> 
+    </div> 
+    <script src="script.js"></script> 
+</body> 
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,42 @@
+inputString.value = ""; 
+inputWord.value = ""; 
+nums.innerText = ""; 
+explain.innerText = ""; 
+
+function fun() { 
+    let count = 0; 
+    let res = []; 
+    str = inputString.value; 
+    word = inputWord.value; 
+    if (str === "" || word === "") { 
+        window.alert("Incorrect input!"); 
+        return; 
+    } 
+
+    let n = str.length; 
+    let wordLen = word.length; 
+    srtWord = word.split("").sort().join(""); 
+
+    for (let i = 0; i < n - wordLen + 1; ++i) { 
+        let sub = str 
+            .slice(i, i + wordLen) 
+            .split("") 
+            .sort() 
+            .join(""); 
+        if (sub === srtWord) { 
+            count += 1; 
+            res.push("'" + str.slice(i, i + wordLen) + "'"); 
+        } 
+    } 
+    let explainres; 
+    if (count === 0) explainres = "none"; 
+    else explainres = res.join(","); 
+
+    nums.innerText = 
+        "Input string contains " + count + " Anagrams:"; 
+    explain.innerText = 
+        "Anagrams of the word '" + 
+        word + 
+        "' are: " + 
+        explainres; 
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,80 @@
+
+* { 
+    box-sizing: border-box; 
+    margin: 2%; 
+} 
+
+body { 
+    text-align: center; 
+    margin: auto; 
+    display: flex; 
+    flex-direction: column; 
+} 
+
+.root { 
+    margin-top: 5%; 
+    display: flex; 
+    flex-direction: column; 
+    width: 50%; 
+    color:white;
+    margin: auto; 
+    margin-top: 5%; 
+    box-shadow: 0 4px 10px rgb(46, 63, 57); 
+    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);; 
+    border-radius: 5px; 
+    padding: 3%; 
+} 
+
+.option { 
+    text-align: left; 
+    display: flex; 
+    flex-direction: column; 
+    font-size: x-large; 
+    padding: 2%; 
+    margin: auto; 
+} 
+
+.option>span { 
+    display: flex; 
+    padding: 2%; 
+    color:rgb(0, 0, 0);
+} 
+h1{
+    text-shadow: 2px 2px maroon;
+}
+
+span>label { 
+    width: 50%; 
+    color:white;
+    font-size: 18px;
+} 
+
+input { 
+    width: 70%; 
+    font-size: large; 
+    border-radius: 5px;
+    border-style: ridge;
+}
+
+input[type="button"]{
+    background-color: rgb(207, 168, 180);
+    border:none;
+    padding:10px 20px;
+    border-radius: 5px;
+    box-shadow: 2px 2px rgb(199, 252, 255);
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    color:rgb(255, 255, 255);
+    font-weight: 700;
+    text-shadow: 1px 1px maroon;
+}
+
+input[type="button"]:hover{
+    background-color: rgb(145, 175, 235);
+}
+h3{
+    text-shadow:2px 2px green;
+}
+.explain{
+    font-size: 14px;
+    color:azure;
+}