Navigation

README.md

@@ -4,7 +4,8 @@
 
 > Math Magicians is the first React Project I'm building. The main objective of this is to understand React features with a project-based learning approach. This is using them directly 
 
-![Preview](preview.png))
+![Preview](preview.gif)
+![PreviewMobile](previewMobile.gif)
 
 Math Magicians! This is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make basic calculations and read a random math-related quote. 
 
@@ -63,6 +64,8 @@ The deployment can be found in the Github Pages of this repository or through th
 
 ## Acknowledgments
 
+Here's a [link](https://github.com/arcanemutterings/random-quote-generator-api) to the API GitHub Repo from which I got the data for the quotes. Special thanks to the author!
+
 ## Show your support
 
 Give a ⭐️ if you like this project!

package.json

@@ -12,6 +12,7 @@
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "save-dev": "^0.0.1-security",
     "web-vitals": "^2.1.4"

src/App.js

@@ -1,17 +1,30 @@
 import React from 'react';
-import Calculator from './components/Calculator';
+import { Routes, Route, Link } from 'react-router-dom';
+import CalculatorPage from './pages/CalculatorPage';
+import Home from './pages/HomePage';
+import Quotes from './pages/QuotesPage';
 import './styles/app.css';
 
-// As required for this project, components will be defined class based
-// eslint-disable-next-line react/prefer-stateless-function
-class App extends React.Component {
-  render() {
-    return (
-      <div className="App">
-        <Calculator />
-      </div>
-    );
-  }
-}
+const App = () => (
+  <div className="App">
+    <nav>
+      <ul className="nav">
+        <li id="logo"> Math Magicians </li>
+        <ul className="nav nav-child">
+          <li><Link to="/math_magicians"> Home </Link></li>
+          <li><Link to="/math_magicians/calculator"> Calculator </Link></li>
+          <li><Link to="/math_magicians/quote"> Quote </Link></li>
+        </ul>
+      </ul>
+    </nav>
+    <main>
+      <Routes>
+        <Route path="math_magicians" element={<Home />} />
+        <Route path="math_magicians/calculator" element={<CalculatorPage />} />
+        <Route path="math_magicians/quote" element={<Quotes />} />
+      </Routes>
+    </main>
+  </div>
+);
 
 export default App;

src/index.js

@@ -1,18 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
 import './styles/reset.css';
 import './styles/index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root'),
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/pages/CalculatorPage.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Calculator from '../components/Calculator';
+// Styles
+import '../styles/calculatorPage.css';
+
+const CalculatorPage = () => (
+  <div className="calculator-parent">
+    <h1> Let&apos;s do some math! </h1>
+    <Calculator />
+  </div>
+);
+
+export default CalculatorPage;

src/pages/HomePage.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const Home = () => (
+  <div className="general-container">
+    <h1> Welcome to our page! </h1>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nunc interdum ipsum vel nulla pulvinar, in accumsan elit pulvinar.
+      Fusce venenatis sapien lorem, at faucibus risus semper vitae.
+      Nunc a felis eu nisi accumsan consectetur.
+      Nam cursus, enim eu auctor porttitor,
+      sem purus faucibus est, sit amet viverra justo enim eget libero.
+      Nulla rutrum libero id suscipit bibendum. Sed mattis ultrices lorem eget accumsan.
+      Mauris sagittis nisi ac sodales vehicula. Aenean rutrum ornare sagittis.
+      In condimentum pellentesque metus. Etiam rhoncus vitae magna sed convallis.
+      Morbi malesuada placerat eleifend. Mauris sit amet tempus mi.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Nunc interdum ipsum vel nulla pulvinar, in accumsan elit pulvinar.
+      Fusce venenatis sapien lorem, at faucibus risus semper vitae.
+      Nunc a felis eu nisi accumsan consectetur.
+      Nam cursus, enim eu auctor porttitor,
+      sem purus faucibus est, sit amet viverra justo enim eget libero.
+      Nulla rutrum libero id suscipit bibendum. Sed mattis ultrices lorem eget accumsan.
+      Mauris sagittis nisi ac sodales vehicula. Aenean rutrum ornare sagittis.
+      In condimentum pellentesque metus. Etiam rhoncus vitae magna sed convallis.
+      Morbi malesuada placerat eleifend. Mauris sit amet tempus mi.
+    </p>
+  </div>
+);
+
+export default Home;

src/pages/QuotesPage.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+
+const Quotes = () => {
+  const [quote, setQuote] = useState('Loading...');
+  const [author, setAuthor] = useState('');
+
+  useEffect(() => {
+    fetch('https://random-math-quote-api.herokuapp.com/')
+      .then((response) => response.json())
+      .then((data) => {
+        setQuote(data.quote);
+        setAuthor(data.author);
+      });
+  }, []);
+
+  return (
+    <div className="general-container quote-container">
+      <p>
+        &quot;
+        {quote}
+        &quot;
+      </p>
+      <p className="author">{author}</p>
+    </div>
+  );
+};
+
+export default Quotes;

src/styles/app.css

@@ -1,6 +1,58 @@
+/* Base Layout */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
+
+html {
+  font-family: 'Poppins', sans-serif;
+  font-size: 10px;
+}
+
+body {
+  overflow: hidden;
+}
+
 .App {
+  height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    'header'
+    'main-content';
+}
+
+nav {
+  grid-area: header;
+}
+
+main {
+  grid-area: main-content;
+  overflow: auto;
+  background-color: rgb(47, 47, 47);
+}
+
+/* Navigation bar */
+
+.nav {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  height: 100vh;
+  padding: 20px;
+  background-color: rgba(47, 71, 102, 0.8);
+  color: white;
+  flex-wrap: wrap;
+}
+
+.nav-child {
+  gap: 3rem;
+  margin-top: 10px;
+}
+
+.nav-child a,
+.nav li {
+  color: white;
+  font-size: 2.5rem;
+  font-weight: 500;
+}
+
+#logo {
+  font-size: 5rem;
 }