Resilient-Labs · AOA19 · Oct 28, 2024
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,37 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  text-align: center;
+  padding-top: 40px;
+}
+
+h1 {
+  color: #2a7c51;
+}
+
+h2 {
+  padding-top: 20px;
+  color: #47609e;
+}
+
+input {
+  margin-top: 20px;
+  padding: 5px;
+}
+
+button {
+  cursor: pointer;
+  padding: 5px;
+  border: none;
+  background: #2a7c51;
+  font-size: 18px;
+  color: white;
+}
+
+/* #error {
+  color: #e04646;
+} */
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="This is where your description goes" />
+  <meta name="keywords" content="one, two, three" />
+  <title>Palindrome Checker</title>
+  <!-- external CSS link -->
+  <link rel="stylesheet" href="css/style.css" />
+</head>
+
+<body>
+  <h1>Palindrome Checker</h1>
+  <form>
+    <input type="text">
+    <button id="check">Check</button>
+  </form>
+  <section>
+    <h2>
+      <span id="message"></span>
+    </h2>
+    <!-- <span id="error"></span> -->
+  </section>
+  <script type="text/javascript" src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,28 @@
+document.querySelector("#check").addEventListener("click", checkPalindrome);
+
+const userInput = document.querySelector("input");
+
+function checkPalindrome(e) {
+  e.preventDefault();
+
+  const message = document.querySelector("#message");
+
+  let string = userInput.value.toLowerCase();
+  // Find the length of the string that the user inputs
+  let length = string.length;
+
+  clearInput();
+
+  // loop through half of the string
+  for (let i = 0; i < length / 2; i++) {
+    // Check if the first and last string are the same
+    if (string[i] !== string[length - 1 - i]) {
+      return (message.innerText = `${string} is not a palindrome`);
+    }
+  }
+  return (message.innerText = `${string} is a palindrome`);
+}
+
+function clearInput() {
+  userInput.value = "";
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,30 @@
+const http = require("http");
+const fs = require("fs");
+const url = require("url");
+
+const server = http.createServer(function (req, res) {
+  const page = url.parse(req.url).pathname;
+
+  console.log(page);
+  if (page == "/") {
+    fs.readFile("index.html", function (err, data) {
+      res.writeHead(200, { "Content-Type": "text/html" });
+      res.write(data);
+      res.end();
+    });
+  } else if (page == "/css/style.css") {
+    fs.readFile("css/style.css", function (err, data) {
+      res.writeHead(200, { "Content-Type": "text/css" });
+      res.write(data);
+      res.end();
+    });
+  } else if (page == "/js/main.js") {
+    fs.readFile("js/main.js", function (err, data) {
+      res.writeHead(200, { "Content-Type": "text/javascript" });
+      res.write(data);
+      res.end();
+    });
+  }
+});
+
+server.listen(8000);