Resilient-Labs · codedbycass · Oct 31, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,22 +1,13 @@
-# ↔️ Week08 Bootcamp2019a Project: Server Side Palindrome Checker
+# Palindrome
 
-### Goal: Create a simple web application that uses the fs and http modules to validate if a string is a palindrome server side.
+## How it's made
+JS, Node.JS
 
-### How to submit your code for review:
+JS: The client side calls the API in the local server using the Fetch API. It will grab the user's input, the reversed of the user's input, and compare whether these two values are a palindrome. The results will print to the DOM.
 
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
+Node.JS: Node.js was used to import several Node.js modules: http, fs, url, and queryStrings (from the user). Then I defined the server, extract the requested page's pathname, and parses query parameters. When a user submits a string, the following tasks are performed on the server side. Variables are created to hold the future object that will be returned as part of the API response. The user's input is reversed and checked by following these steps: the string is converted into an array using the 'split()' method, reversed using the 'reverse()' method, and finally, the reversed array is converted back into a string using the 'join()' method.
 
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+The server compares the original user input with the reversed version of the input to determine if they match. If they do match, the API returns a boolean value of 'true' to indicate that the input is a palindrome; otherwise, it returns 'false' to signify that the input is not a palindrome.
+
+## Lessons Learned
+I learned the quintessential difference between accessing user inputs between the DOM's browser API and the server side. Since document.query selector is no longer relevant on the server side, I had to understand how to grab the user's input a different way, by whether a key named 'palindrome' exists in the params object and, if it does, to assign the corresponding value to a variable named 'name'. That value is the user's input.
diff --git a/api.html b/api.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" href="/css/style.css">
+  </head>
+  <body>
+    <h1>API Loading</h1>
+    <script type="text/javascript" src="/js/main.js"></script>
+  </body>
+</html>
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,3 @@
+h1{
+  color: red;
+}
diff --git a/data.json b/data.json
@@ -0,0 +1,5 @@
+{
+  name: "leon",
+  status: "Boss Man",
+  currentOccupation: "Baller"
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" href="/css/style.css">
+  </head>
+  <body>
+    <h1>Is it a palindrome?</h1>
+    <input id="userInput" type="text" name="" placeholder="Enter Name">
+    <button id="clickMe" type="button" name="button">Click Me</button>
+    <h2 id="name"></h2>
+    <h2 id="palindrome"></h2>
+    <h2 id="result"></h2>
+    <script type="text/javascript" src="/js/main.js"></script>
+  </body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,45 @@
+document.querySelector('#clickMe').addEventListener('click', makeReq)
+
+function makeReq(){
+  const userInput = document.querySelector("#userInput").value;
+  fetch(`/api?palindrome=${userInput}`)
+    .then(response => response.json())
+    .then((data) => {
+      console.log(data);
+      document.querySelector("#name").textContent = `You entered ${data.name}`
+      document.querySelector("#palindrome").textContent = `The reverse is ${data.reversedName}`
+      document.querySelector("#result").textContent = `Is it a palindrome? ${data.result}`
+    });
+}
+
+// document.getElementById("clickMe").onclick = makeReq;
+//
+// function makeReq(){
+//
+//   var userName = document.getElementById("userName").value;
+//
+//   var request = new XMLHttpRequest();
+//   request.open('GET', '/api?student='+userName, true);
+//
+//   request.onload = function() {
+//       console.log("works")
+//       if (request.status >= 200 && request.status < 400) {
+//         // Success!
+//         var data = JSON.parse(request.responseText);
+//         console.log(data)
+//         document.getElementById("personName").innerHTML = data.name
+//         document.getElementById("personStatus").innerHTML = data.status
+//         document.getElementById("personOccupation").innerHTML = data.currentOccupation
+//
+//       } else {
+//         // We reached our target server, but it returned an error
+//
+//       }
+//     };
+//
+//     request.onerror = function() {
+//       // There was a connection error of some sort
+//     };
+//
+//     request.send();
+// }
diff --git a/node_modules/figlet/.DS_Store b/node_modules/figlet/.DS_Store
diff --git a/node_modules/figlet/.jshintrc b/node_modules/figlet/.jshintrc
diff --git a/node_modules/figlet/.npmignore b/node_modules/figlet/.npmignore
diff --git a/node_modules/figlet/.travis.yml b/node_modules/figlet/.travis.yml
diff --git a/node_modules/figlet/Gruntfile.js b/node_modules/figlet/Gruntfile.js
diff --git a/node_modules/figlet/LICENSE.txt b/node_modules/figlet/LICENSE.txt