Enhanced Palindrome Calculator UI (#1149)

Rakesh9100 · Jun 5, 2024 · 09ed858 · 09ed858
1 parent 38af7d7
commit 09ed858
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 22 deletions.
diff --git a/Calculators/Palindrome-Calculator/README.md b/Calculators/Palindrome-Calculator/README.md
@@ -18,4 +18,6 @@ Handles case-insensitivity (e.g., "Racecar" and "RACECAR" are both considered pa
 
 ## Screenshots :-
 
-![image](https://github.com/Rakesh9100/CalcDiverse/assets/146326636/95d593fd-4e29-4780-86ee-268523c51c1c)
+![image](https://github.com/diyaaa19/CalcDiverse/assets/151644762/d78a2572-21fd-451c-81eb-aefdc1959e9a)
+
+
diff --git a/Calculators/Palindrome-Calculator/index.html b/Calculators/Palindrome-Calculator/index.html
@@ -11,13 +11,17 @@
 <body>
     <div class="container">
         <h1>Palindrome Checker</h1>
-        <label for="input">Enter a string or number:</label>
-        <input type="text" id="input">
-        <button onclick="checkPalindrome()">Check</button>
-        <p id="result"></p>
-    </div>
-
-    <script src="script.js"></script>
+        <form id="calculatorForm">
+            <div class="form-group">
+                 <center><label for="input">Enter a string or number:</label></center>
+                 <input type="text" id="input">
+            </div>
+            <button type="button" class="btn btn-dark form-control"onclick="checkPalindrome()">Check</button>
+            <div class="result-container">
+                <center><span id="result"></span></center>
+            </div>
+        </div>
+        </form>
+   <script src="script.js"></script>
 </body>
-
-</html>
+</html>
diff --git a/Calculators/Palindrome-Calculator/script.js b/Calculators/Palindrome-Calculator/script.js
@@ -2,10 +2,12 @@ function checkPalindrome() {
     var userInput = document.getElementById("input").value;
     var reversedInput = userInput.split('').reverse().join('');
     var isPalindrome = (userInput === reversedInput);
+    var resultElement = document.getElementById("result");
 
     if (isPalindrome) {
-        document.getElementById("result").innerText = userInput + " is a palindrome.";
-    } else {
-        document.getElementById("result").innerText = userInput + " is not a palindrome.";
+        document.getElementById("result").innerHTML = `<span class="red"></span> ${userInput} <span class="red">is a palindrome.</span>`;
+    }
+    else {
+        document.getElementById("result").innerHTML =`<span class="red"></span> ${userInput} <span class="red">is not a palindrome.</span>`;
     }
 }
diff --git a/Calculators/Palindrome-Calculator/style.css b/Calculators/Palindrome-Calculator/style.css
@@ -1,25 +1,34 @@
+
 body {
-    background: linear-gradient(to right, #5E1675, #344955);
-    font-family: Arial, sans-serif;
+    background: linear-gradient(to right, #5E1675, #7daeca);
+    font-family:Arial, Helvetica, sans-serif;
     background-color: #f4f4f4;
     margin: 0;
     padding: 0;
 }
 
 .container {
-    max-width: 600px;
+    max-width: 700px;
     margin: 100px auto;
     padding: 20px;
-    background-color: #fff;
+    background: radial-gradient(circle, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
 }
 
 h1 {
     text-align: center;
 }
 
 label {
+    font-style: italic;
+    font-family:Verdana, Geneva, Tahoma, sans-serif;
+    font-size: large;
     display: block;
     margin-bottom: 10px;
 }
@@ -39,10 +48,10 @@ button {
     padding: 10px;
     margin-top: 10px;
     font-size: 16px;
-    background-color: #337357;
+    background: linear-gradient(to left, #8189ef, #2f0b78);;
     color: #fff;
-    border: none;
-    border-radius: 4px;
+    border:#0a300d;
+    border-radius: 40px;
     cursor: pointer;
     transition: all 0.5s ease;
 }
@@ -53,5 +62,12 @@ button:hover {
 
 p#result {
     margin-top: 20px;
-    text-align: center;
-}
+    justify-content: center;
+}
+form {
+    width: 100%;
+}
+.calculator-container > h1 {
+    text-shadow: 2px 2px rgb(150, 150, 150);
+    margin-bottom: 40px;
+}