styles setup

App.css

@@ -0,0 +1,34 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  margin: 5vh;
+  padding: 0;
+  height: 90vh;
+}
+
+#root {
+  margin: 0;
+  padding: 0;
+}
+
+.header-container {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15vh;
+}
+
+nav {
+  display: flex;
+  gap: 10px;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+  font-weight: bold;
+}

App.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import './App.css';
+import {
+  HashRouter as Router,
+  Routes,
+  Route,
+  Link,
+  Navigate,
+} from 'react-router-dom';
+import Home from './components/home';
+import Quote from './components/quote';
+import Calculator from './components/calculator';
+
+// eslint-disable-next-line react/prefer-stateless-function
+class App extends React.Component {
+  render() {
+    return (
+      <Router>
+        <div className="header-container">
+          <h1>Math Magician</h1>
+          <nav>
+            <Link to="/">Home</Link>
+            <span> | </span>
+            <Link to="/calculator">Calculator</Link>
+            <span> | </span>
+            <Link to="/quote">Quote</Link>
+          </nav>
+        </div>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/calculator" element={<Calculator previous="" operand="" current="0" solved={false} />} />
+          <Route path="/quote" element={<Quote />} />
+          <Route path="*" element={<Navigate to="/" />} />
+        </Routes>
+      </Router>
+    );
+  }
+}
+
+export default App;

App.test.js

@@ -0,0 +1,13 @@
+import renderer from 'react-test-renderer';
+import App from './App';
+import Calculator from './components/calculator';
+
+test('renders learn react link', () => {
+  const tree = renderer.create(<App />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('renders learn react link', () => {
+  const tree = renderer.create(<Calculator />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

index.css

@@ -0,0 +1,27 @@
+body {
+  margin: 0;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Courier New',
+    monospace;
+}