first commit to deploy this

ichiragkumar · web-flow · commit 90e5166daddf · 2022-03-09T10:43:49.000+05:30
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Palindrome Number </title>
+
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+
+    <div class="wrapper">
+        <header>
+            <h1><u>Palindrome Checker</u></h1>
+            <p>
+                <h5>
+                   A <strong>palindrome</strong> is a word, number, phrase, or other sequence of characters which 
+                   <b>reads the same backward as forward, such as madam or racecar.</b>
+                </h5>
+            </p>
+
+
+        </header>
+
+        <div class="inputs">
+            <input type="text" placeholder="Enter Text Or Number">
+            <button>Check Palindrome </button>
+        </div>
+
+        <p class="info-text"></p>
+    </div>
+    
+
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,39 @@
+const txtInput = document.querySelector(".inputs input"),
+checkBtn = document.querySelector(".inputs button"),
+infoTxt = document.querySelector(".info-text");
+let filterInput;
+
+
+checkBtn.addEventListener("click", () =>{
+
+    infoTxt.style.display = "block";
+    
+
+    // splitting user input character and join  them in a single line
+    let reverseInput = filterInput.split("").reverse().join("");
+
+    if(filterInput != reverseInput){
+        return infoTxt.innerHTML = ` No, <span>'${txtInput.value}'</span> isn't  a Palindrome!`;
+
+        // return  console.log("Not Palindrome ");
+    }
+
+    return infoTxt.innerHTML = ` Yes, <span>'${txtInput.value}'</span> It's a Palindrome!`;
+
+    // console.log("Yes! Palindrome");
+});
+
+
+
+
+txtInput.addEventListener("keyup", () => {
+
+    // removing spaces and all special character from entered value
+    filterInput = txtInput.value.toLowerCase().replace(/[^A-Z0-9]/ig, "");
+
+    if(filterInput){
+        return checkBtn.classList.add("active");
+    }
+    checkBtn.classList.remove("active");
+    infoTxt.style.display = "none";
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,96 @@
+/* importing google fonts here  */
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap");
+
+
+/* /* adding universal class  */
+*{
+    margin: 0;
+    padding: 5px;
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+}
+
+body{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background: rgb(255, 185, 255);
+}
+
+.wrapper{
+    max-width: 500px;
+    padding: 20px 25px 15px;
+    background: #fff;
+    border-radius: 10px;
+    ;
+}
+
+header h1{
+    font-size: 21px;
+    font-weight: 500px;
+}
+
+header p{
+    margin-top: 5px;
+    font-size: 10px;
+    color: #474747;
+}
+
+.inputs{
+    margin: 20px 0 27px;
+
+}
+
+.inputs input{
+    width: 100%;
+    height: 60px;
+    outline: none;
+    font-size: 19px;
+    padding: 0 17px;
+    border: 2px solid #999;
+
+}
+.inputs input:focus{
+    box-shadow: 0 3px 6px rgba(17, 219, 125, 0.15);
+}
+
+.inputs button{
+    width: 100%;
+    height: 56px;
+    outline: none;
+    border: none;
+    opacity: 0.7;
+    cursor: pointer;
+    margin-top: 22px;
+    font-size: 17px;
+    color: #fff;
+    border-radius: 8px;
+    pointer-events: none;
+    background: rgb(119, 23, 119);
+
+
+    /* pointer-events: none; */
+    /* opacity: 0.7; */
+
+
+}
+
+.inputs button.active{
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.info-text{
+    font-size: 19px;
+    text-align: center;
+    margin-bottom: 18px;
+    
+
+    display: none;
+}
+
+.info-text span{
+    color: rgb(36, 18, 192);
+    
+}
