Cody final

client/src/App.js

@@ -1,11 +1,13 @@
 import { useCallback, useEffect, useState } from "react";
 import axios from "axios";
-
+import Time from './time';
+import Palindrome from './isPalindrome'
 axios.defaults.baseURL = 'http://localhost:5000';
 axios.defaults.headers.post['Content-Type'] = 'applicatin/json';
 
-function App() {  
+function App() {
   const [palindromeList, setPalindromList] = useState([]);
+  const [string, setString] = useState( "" );
 
   const loadList = useCallback(async (abortToken) => {
     const result = await axios.get('/api/palindromes');
@@ -27,12 +29,15 @@ function App() {
     }, [loadList]
   );
 
+
   return (
     <div className="App">
       <header className="App-header">
         <p>
           This is the bootcamp final.
         </p>
+      <Time />
+      <Palindrome />
         {
           <ul>
             {

client/src/isPalindrome.js

@@ -0,0 +1,39 @@
+import { Box, Button, TextField } from '@material-ui/core';
+import {useState,React} from 'react';
+
+
+
+
+
+
+let Palindrome = (props) => {
+    const [string, setString] = useState( "" );
+
+    let isPalindrome = (str) => {
+         str = string
+        const arrayValues = str.split('');
+        const reverseArrayValues = arrayValues.reverse();
+        const reverseString = reverseArrayValues.join('');
+        if(str === reverseString) {
+            return <Button variant="contained" color="primary">Add me</Button>
+        }
+        else {
+            return <Button variant="contained" color="primary" disabled>Add me</Button>
+        }
+    }
+
+    return (
+        <Box>
+        <TextField id="input" variant="outlined"
+        value={string}
+        onChange={(e) => setString( e.currentTarget.value )}
+        ></TextField>
+
+       <Box> {isPalindrome(string)}</Box>
+
+
+
+        </Box>
+    )
+}
+export default Palindrome

client/src/time.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import moment from 'moment';
+import { Box } from '@material-ui/core';
+
+let Time = () => {
+    let update = function() {
+        document.getElementById("datetime")
+        .innerHTML = moment().format('MMMM Do YYYY, h:mm:ss a');
+    }
+    setInterval(update, 1000);
+
+    return (
+<Box id="datetime">
+
+</Box>
+
+    )
+};
+export default  Time;