work, but this time visable

src/App.css

@@ -13,6 +13,11 @@
   }
 }
 
+#frontPage {
+  color: blue;
+  text-align: center;
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;

src/App.js

@@ -12,26 +12,13 @@ class App extends Component {
     return axios.get('https://raw.githubusercontent.com/Senior-Design-2021-Ebook-Team/markdown-parser/main/fpb.json');
   }
  
-  updateContent = () => {
-    if (this.state.message === "Default Content") {
-      this.setState({ message: "Updated Content!"});
-    }
-    else {
-      this.setState({ message: "Default Content"});
-    }
-  }
- 
   render() {
     console.log(this.asyncCall());
     return (
       <div>
-        <div className="h1 bg-secondary text-white text-center p-2">
-          { this.state.message }
-        </div>
-        <div className="text-center">
-          <button className="btn btn-secondary" onClick={this.updateContent}>
-            Click me
-          </button>
+        <div id="frontPage">
+          <h1>Free Programming Books</h1>
+          <input type="text"></input>
         </div>
       </div>
     );

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './App.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';