added palindrome checker

techy4shri · Jun 24, 2024 · c9dd1ce · c9dd1ce
1 parent 79f97da
commit c9dd1ce
Show file tree

Hide file tree

Showing 6 changed files with 253 additions and 0 deletions.
diff --git a/Palindrome Checker/background.js b/Palindrome Checker/background.js
diff --git a/Palindrome Checker/bg.jpg b/Palindrome Checker/bg.jpg
diff --git a/Palindrome Checker/manifest.json b/Palindrome Checker/manifest.json
@@ -0,0 +1,35 @@
+{
+    "manifest_version": 3,
+    "name": "Palindrome Checker",
+    "version": "1.0",
+    "description": "Check if a word, sentence, or number is a palindrome.",
+    "permissions": [
+      "activeTab"
+    ],
+    "action": {
+      "default_popup": "popup.html",
+      "default_icon": {
+        "16": "images/icon16.png",
+        "48": "images/icon48.png",
+        "128": "images/icon128.png"
+      }
+    },
+    "icons": {
+      "16": "images/icon16.png",
+      "48": "images/icon48.png",
+      "128": "images/icon128.png"
+    },
+    "web_accessible_resources": [
+      {
+        "resources": [
+          "popup.css",
+          "popup.js",
+          "images/icon16.png",
+          "images/icon48.png",
+          "images/icon128.png"
+        ],
+        "matches": ["<all_urls>"]
+      }
+    ]
+  }
+
diff --git a/Palindrome Checker/popup.css b/Palindrome Checker/popup.css
@@ -0,0 +1,116 @@
+*{ 
+    margin: 0; 
+    padding: 0; 
+    box-sizing: border-box; 
+   } 
+
+ body { 
+    display: flex; 
+    justify-content: center; 
+    align-items: center; 
+    min-height: 100vh; 
+    background: url(bg.jpg); 
+    font-family: "Garamond", serif;
+    color: white;
+
+    }
+
+ .container{
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     padding: 30px;
+     margin: 20px;
+     background-color: rgba(60, 97, 123, 0.8);
+     border-color: black;
+
+ }
+
+ .heading{
+     font-family: "Roboto", sans-serif;
+     color: white;
+     font-size: 50px;
+     position: absolute;
+     top: 0;
+     left: 0;
+     right: 0;
+     text-align: center;
+     padding: 100px;
+     line-height: 3vh;
+
+ }
+
+ #query{
+    text-align: center;
+    font-size: 40px;
+    font-weight: bold;
+    color: white;
+
+
+ }
+ #text{
+    background-color: rgba(156, 174, 187, 0.8);
+    width: 45%;
+    border-radius: 5px;
+    margin-top: 9px;
+    padding: 10px;
+ }
+
+ #submit{
+    width: 45%;
+    display: flex;
+    margin-top: 9px;
+    border-radius: 5px;
+    cursor: pointer;
+    padding: 10px;
+    font-weight: bold;
+    background-color: rgba(156, 174, 187, 0.8);
+
+ }
+
+ #cls{
+    width: 45%;
+    display: flex;
+    margin-top: 9px;
+    border-radius: 5px;
+    cursor: pointer;
+    padding: 10px;
+    font-weight: bold;
+    background-color: rgba(156, 174, 187, 0.8);
+
+ }
+
+ #result{
+   color: white;
+   font-size: 23px;
+   text-align: center;
+   background-color: rgba(60, 97, 123, 0.8);
+
+
+ }
+
+ @media only screen and (max-width: 480px){
+
+   .heading{
+     font-size: 25px;
+     padding: 50px;
+     }
+
+   .container{
+     display: block;
+     width: 70%;
+     height: 50%;
+     }
+
+   #query{
+    font-size: 18px;
+   }
+
+   #result{
+   color: white;
+   font-size: 16px;
+   text-align: center;
+   }
+
+ }
+
diff --git a/Palindrome Checker/popup.html b/Palindrome Checker/popup.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Palindrome Checker</title>
+  <link rel="stylesheet" href="popup.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">  
+</head>
+ <body>
+  <main>
+    <p class="heading">Palindrome Checker</p>
+    <div class="container">
+        <p id="query">Enter a sentence, word or number to check if it's a palindrome: </p>
+        <br>
+        <br>
+        <input type="text" id="text" style= "height:35px;" name="palindrome"><br><br>
+        <br>
+        <input type="submit" id="submit" value="Check" onclick="validatePalin()">
+        <br>
+        <button type="button" id="cls" onclick="clearScreen()">Clear Screen</button>
+      </div>
+    </div>
+    <br>
+    <br>
+    <p id="result">  
+    </p>
+  </main>
+  <script src="popup.js" type="text/javascript"></script>
+</body>
+</html>
diff --git a/Palindrome Checker/popup.js b/Palindrome Checker/popup.js
@@ -0,0 +1,67 @@
+function validatePalin() {  
+
+    string = document.getElementById("text").value;
+
+    // to obtain total length of the word or sentence
+    const len = string.length;  
+
+    // to remove spaces from the accepted string, if there is any
+    let string1 = string.replace(/ /g, "");
+
+    let len1 = string1.length;
+
+    let string2 = "";
+
+    // to remove special characters
+    for (let j = 0; j < len1; j++) {
+
+      if((string1[j] >= 'a' && string1[j] <= 'z') || (string1[j] >= 'A' && string1[j] <= 'Z') || (string1[j] >= '0' && string1[j] <= '9')) {
+        string2 = string2.concat(string1[j]);
+      }
+
+    }
+
+    // to obtain total length of the new string
+    let len2 = string2.length;
+
+    // to check for empty string
+    if (string2 == "") {
+      document.getElementById("result").innerHTML = "Please enter a valid string!";
+    }
+
+    else {
+
+      string2 = string2.toLowerCase();
+
+      let flag = 1;
+
+      // for loop to divide the words into 2 half
+      for (let i = 0; i < (len2 / 2); i++) {  
+
+        // condition to check whether the first and last characters are same  
+        if (string2[i] !== string2[len2 - 1 - i]) {  
+
+            flag = 0;
+        }
+
+      }
+
+     if (flag == 0) {
+       document.getElementById("result").innerHTML = "It is not a palindrome.";        
+     }
+
+     else if (flag == 1) {
+       document.getElementById("result").innerHTML = "It is a palindrome.";
+     }
+
+  }
+
+}  
+
+function clearScreen() {
+
+  document.getElementById("result").innerHTML = "";
+  document.getElementById("text").value = "";
+
+}
+