Add files via upload

ColinH1127 · web-flow · commit a14527fff512 · 2024-08-10T01:01:02.000-04:00
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Palindrome Checker</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main id="container">
+      <h1 id="headline" >Is it a palindrome?</h1>
+      <div id="text-container">
+        <input id="text-input" placeholder="Enter text here">
+        <button id="check-btn">CHECK</button>
+        <div id="result"></div>
+      </div>
+      
+    </main>
+      <div id="definition">
+         <p>A <dfn>palindrome</dfn> is a word or phrase that can be read the same way forwards and backwards, ignoring punctuation, case, and spacing.
+         </p>
+      </div>
+  <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,33 @@
+const checkBtn = document.getElementById("check-btn")
+const textInput = document.getElementById("text-input")
+const resultContainer = document.getElementById("result")
+
+
+
+function checkPal(input) {
+  //check if there is input
+  if (input === "") {
+    alert("Please input a value")
+    resultContainer.style.display = "none"
+    return
+  }
+  
+  //removes all non alphanumeric and reverses
+  let cleanedText = input.replace(/[^A-Za-z0-9]/gi, '').toLowerCase();
+  let reversedText = [...cleanedText].reverse().join("")
+  
+  //checks if input is palindrome
+  let result = cleanedText === reversedText ? "is" : "is not"
+  let resultMsg = `<p><strong>${input}</strong> ${result} a palindrome!</p>`
+  
+  //displays results
+  resultContainer.innerHTML = resultMsg
+  resultContainer.style.display = "block"
+}
+
+
+//gives functionality to check button
+checkBtn.addEventListener("click", () => { 
+  checkPal(textInput.value)
+  textInput.value = ""
+  })
diff --git a/styles.css b/styles.css
@@ -0,0 +1,60 @@
+body {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    font-family: Tahoma, sans-serif;
+    background: linear-gradient(45deg, #00A86B, #A8D5BA);
+  }
+  #container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    margin-top: 200px;
+    background-color: 00A86B;
+    padding: 20px;
+    border: none;
+    border-radius: 40px;
+    width: 400px;
+  }
+  #text-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+  }
+  #definition {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    margin-top: 200px;
+    background-color: 00A86B;
+    padding: 20px;
+    border: none;
+    border-radius: 40px;
+    width: 400px;
+  }
+  #text-input {
+    padding: 10px;
+    border: none;
+    border-radius: 6px;
+    font-size: 1.2rem;
+  }
+  #check-btn {
+    width: 200px;
+    padding: 10px;
+    background-color: #C0FF00;
+    border: none;
+    border-radius: 12px;
+    font-size: 1.3rem;
+    font-weight: bold; 
+  }
+
+  #check-btn:hover {
+    background-color: #90EE90;
+  }
+  #result {
+    font-size: 1.5rem;
+  }
