Resilient-Labs · RoReeceDev · Oct 31, 2023 · Oct 31, 2023 · Dec 7, 2023 · Dec 7, 2023
diff --git a/README.md b/README.md
@@ -1,22 +1,27 @@
-# ↔️ Week08 Bootcamp2019a Project: Server Side Palindrome Checker
-
-### Goal: Create a simple web application that uses the fs and http modules to validate if a string is a palindrome server side.
-
-### How to submit your code for review:
-
-- 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!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+# Palindrome Panic
+
+![Palindrome Panic Site Gif](img/palindrome-panic.gif)
+
+Link to Project: https://palindrome-panic-production.up.railway.app/
+
+Welcome to my Palindrome Panic project. This server-side application uses the fs and http modules to validate whether a given string is a palindrome.
+
+## How It's Made
+
+Technologies Used: HTML, CSS, JavaScript, Node.js
+
+In this project, I created a simple web application that checks if a given string is a palindrome. A palindrome is a word, phrase, number, or other sequences of characters that reads the same forward and backward (ignoring spaces, punctuation, and capitalization).
+
+I used HTML to create the structure of the web page and included input fields for users to enter a string. The CSS was used to style the page and make it visually appealing. The core functionality was implemented in JavaScript, where I used the fs and http modules to validate whether the input string is a palindrome. If it is, the application displays a message indicating that the string is a palindrome; otherwise, it notifies the user that the string is not a palindrome.
+
+This project allowed me to practice my front-end development skills and demonstrate my ability to create a simple, server-side application.
+
+## Optimizations (optional)
+
+During the development of this project, I focused on delivering a functional and user-friendly application. While I did not implement specific optimizations, I continuously refined and improved the code as I gained more experience. I learned the importance of efficient code and how it can significantly impact the user experience.
+
+## Lessons Learned
+
+Building this project was a great learning experience. It reminded me that being an engineer means continuous growth and learning. I encountered challenges and had moments of realization and excitement as I made progress. I found joy in solving problems and making the application work seamlessly. This project taught me the value of perseverance, self-awareness, and the satisfaction of creating something functional and user-friendly.
+
+I look forward to further expanding my knowledge and skills in web development, and I am excited to take on new challenges in the future.
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,38 @@
+*{
+  box-sizing: border-box;
+}
+
+html{
+  font-size: 62.5%;
+}
+
+body{
+  font-family: 'Source Code Pro', Arial, Helvetica, sans-serif;
+  display:flex; 
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background: linear-gradient(0deg, rgba(117,140,179,1) 0%, rgba(171,37,112,1) 100%);
+  height: 100vh;
+  color: white;
+}
+
+h1{
+  font-size: 4rem;
+}
+
+h2{
+  font-size: 2.2rem;
+}
+
+input, button{
+  font-family: 'Source Code Pro', Arial, Helvetica, sans-serif;
+  width: 15%;
+  text-align: center;
+  font-size: 1.5rem;
+}
+
+p{
+  font-size: 1.8rem;
+}
diff --git a/data.json b/data.json
@@ -0,0 +1,5 @@
+{
+  name: "leon",
+  status: "Boss Man",
+  currentOccupation: "Baller"
+}
diff --git a/img/palindrome-panic.gif b/img/palindrome-panic.gif
diff --git a/img/sky.gif b/img/sky.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Palindrome Panic</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600;700&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+  <h1>Palindrome Panic</h1>
+  <p>Enter any word to see if it is a palindrome!</p>
+  <input id="userName" type="text" name="" placeholder="Enter Word">
+  <button id="clickMe" type="button" name="button">Is it a palindrome?</button>
+  <h2 id="personName"></h2>
+  <h2 id="personStatus"></h2>
+  <h2 id="personOccupation"></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,48 @@
+document.querySelector('#clickMe').addEventListener('click', isPalindrome)
+
+function isPalindrome(){
+
+  const checkWord = document.querySelector("#userName").value;
+
+  fetch(`/api?word=${checkWord}`)
+    .then(response => response.json())
+    .then((data) => {
+      console.log(data);
+      document.querySelector("#personName").textContent = data.name
+      document.querySelector("#personStatus").textContent = data.status
+      document.querySelector("#personOccupation").textContent = data.currentOccupation
+    });
+
+}
+
+// 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/.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