javascript-algorithms-and-data-structures/build-a-palindrome-checker.txt at main · KabeloM13/javascript-algorithms-and-data-structures · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
** start of index.html **

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Palindrome Checker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      padding: 2rem;
      text-align: center;
    }
    #app {
      background: #fff;
      padding: 2rem;
      border-radius: 10px;
      max-width: 500px;
      margin: 0 auto;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    input {
      padding: 10px;
      width: 70%;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 1rem;
    }
    button {
      padding: 10px 20px;
      font-size: 1rem;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-left: 10px;
    }
    #result {
      margin-top: 1rem;
      font-weight: bold;
      color: #333;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>Palindrome Checker</h1>
    <input type="text" id="text-input" placeholder="Enter text to check" />
    <button id="check-btn">Check</button>
    <p id="result"></p>
  </div>

  <script>
    const input = document.getElementById("text-input");
    const checkBtn = document.getElementById("check-btn");
    const result = document.getElementById("result");

    checkBtn.addEventListener("click", function () {
      const userInput = input.value;

      if (!userInput.trim()) {
        alert("Please input a value.");
        return;
      }

      const cleaned = userInput
        .replace(/[^a-z0-9]/gi, "")
        .toLowerCase();

      const reversed = cleaned.split("").reverse().join("");

      if (cleaned === reversed) {
        result.textContent = `${userInput} is a palindrome.`;
      } else {
        result.textContent = `${userInput} is not a palindrome.`;
      }
    });
  </script>
</body>
</html>


** end of index.html **

** start of styles.css **


** end of styles.css **

** start of script.js **


** end of script.js **