Peter final

client/src/App.js

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import axios from "axios";
+import Date from './time';
+import TextInput from './textInput';
 
 axios.defaults.baseURL = 'http://localhost:5000';
 axios.defaults.headers.post['Content-Type'] = 'applicatin/json';
@@ -33,6 +35,8 @@ function App() {
         <p>
           This is the bootcamp final.
         </p>
+        <Date></Date>
+        <TextInput></TextInput>
         {
           <ul>
             {

client/src/isPalindrome.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+// the state from textInput.js needs to be passed with props to this functionality
+Class IsPalindrome extends React.Component {
+  render(){<div> () => (str) {
+    let re = /[^A-Za-z0-9]/g;
+  let str = str.toLowerCase().replace(re, '');
+  let len = str.length;
+  for (let i = 0; i < len / 2; i++) {
+    if (str[i] !== str[len - 1 - i]) {
+      return false;
+    }
+  }
+  return true;
+}
+  </div>
+  }
+
+}

client/src/textInput.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+
+
+const TextInput = props => {
+  return (
+    <div>
+      <input
+        type="text"
+        value={props.value}
+        // use isPalindrome functionality to check if input is palindrome
+        // state of string in text box is owned by this app and passed to isPalindrome 
+        // All functionality outside of determining if string is palindrome will be done in or 
+        // through this component
+        onChange={event => console.log("is a palidrome")} /*palidrome spelling in instructions*/
+      />
+    </div>
+  );
+};
+
+export default TextInput;

client/src/time.js

@@ -0,0 +1,9 @@
+import React  from 'react';
+import Moment from 'react-moment';
+
+const date = new Date();
+<Moment format='MMMM Do YYYY, h:mm:ss a'>{date}</Moment>
+
+
+// setInterval(date, 1000);
+export default Date;