Math magicians: full website

package.json

@@ -11,6 +11,7 @@
     "react": "^18.1.0",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -0,0 +1,3 @@
+body {
+  background: #a7a8b9;
+}

src/App.js

@@ -1,10 +1,24 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import './App.css';
 import Calculator from './components/Calculator';
+import Home from './components/Home';
+import Quote from './components/Quote';
+import Header from './components/Header';
 
 function App() {
   return (
-    <div className="App">
-      <Calculator />
-    </div>
+    <BrowserRouter>
+      <div className="App container mx-5">
+        <Header />
+        <Routes>
+          <Route path="/home" element={<Home />} />
+          <Route path="/calculator" element={<Calculator />} />
+          <Route path="/quote" element={<Quote />} />
+
+        </Routes>
+      </div>
+    </BrowserRouter>
+
   );
 }
 

src/components/Calculator.js

@@ -14,44 +14,49 @@ function Calculator() {
 
   return (
     <div className="body">
-      <div className="container col-10 col-md-4">
-        <div className="row">
-          <div className="col-12 screen-output">
-            {next || total || 0}
-          </div>
+      <div className="container container-calc mt-5">
+        <div className="heading">
+          <h3>{'Let\'s do some Maths'}</h3>
         </div>
+        <div className="col-6">
+          <div className="row">
+            <div className="col-12 screen-output">
+              {next || total || 0}
+            </div>
+          </div>
 
-        <div className="row">
-          <button onClick={btnClick} type="button" className="col-3">AC</button>
-          <button onClick={btnClick} type="button" className="col-3">/</button>
-          <button onClick={btnClick} type="button" className="col-3">%</button>
-          <button onClick={btnClick} type="button" className="col-3">+</button>
-        </div>
+          <div className="row">
+            <button onClick={btnClick} type="button" className="col-3">AC</button>
+            <button onClick={btnClick} type="button" className="col-3">/</button>
+            <button onClick={btnClick} type="button" className="col-3">%</button>
+            <button onClick={btnClick} type="button" className="col-3">+</button>
+          </div>
 
-        <div className="row">
-          <button onClick={btnClick} type="button" className="col-3">7</button>
-          <button onClick={btnClick} type="button" className="col-3">8</button>
-          <button onClick={btnClick} type="button" className="col-3">9</button>
-          <button onClick={btnClick} type="button" className="col-3">x</button>
-        </div>
+          <div className="row">
+            <button onClick={btnClick} type="button" className="col-3">7</button>
+            <button onClick={btnClick} type="button" className="col-3">8</button>
+            <button onClick={btnClick} type="button" className="col-3">9</button>
+            <button onClick={btnClick} type="button" className="col-3">x</button>
+          </div>
 
-        <div className="row">
-          <button onClick={btnClick} type="button" className="col-3">4</button>
-          <button onClick={btnClick} type="button" className="col-3">5</button>
-          <button onClick={btnClick} type="button" className="col-3">6</button>
-          <button onClick={btnClick} type="button" className="col-3">-</button>
-        </div>
+          <div className="row">
+            <button onClick={btnClick} type="button" className="col-3">4</button>
+            <button onClick={btnClick} type="button" className="col-3">5</button>
+            <button onClick={btnClick} type="button" className="col-3">6</button>
+            <button onClick={btnClick} type="button" className="col-3">-</button>
+          </div>
 
-        <div className="row">
-          <button onClick={btnClick} type="button" className="col-3">1</button>
-          <button onClick={btnClick} type="button" className="col-3">2</button>
-          <button onClick={btnClick} type="button" className="col-3">3</button>
-          <button onClick={btnClick} type="button" className="col-3">+</button>
-        </div>
+          <div className="row">
+            <button onClick={btnClick} type="button" className="col-3">1</button>
+            <button onClick={btnClick} type="button" className="col-3">2</button>
+            <button onClick={btnClick} type="button" className="col-3">3</button>
+            <button onClick={btnClick} type="button" className="col-3">+</button>
+          </div>
 
-        <div className="row">
-          <button onClick={btnClick} type="button" className="col-9">0</button>
-          <button onClick={btnClick} type="button" className="col-3">=</button>
+          <div className="row">
+            <button onClick={btnClick} type="button" className="col-9">0</button>
+            <button onClick={btnClick} type="button" className="col-3">=</button>
+          </div>
         </div>
 
       </div>

src/components/Header.css

@@ -0,0 +1,26 @@
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 2rem 0;
+}
+
+.magician-color {
+  color: #d36a08;
+}
+
+.nav {
+  list-style: none;
+  display: flex;
+}
+
+.nav li {
+  font-size: 1.2rem;
+  margin-left: 1rem;
+  font-weight: bold;
+}
+
+.line {
+  border-right: 3px solid black;
+  margin-left: 20px;
+}

src/components/Header.js

@@ -0,0 +1,25 @@
+import { Link } from 'react-router-dom';
+import './Header.css';
+
+const Header = () => (
+  <header className="container">
+    <h1>
+      Math
+      {' '}
+      <span className="magician-color">
+        Magicians
+      </span>
+    </h1>
+    <ul className="nav">
+      <li>
+        <Link to="/home">Home</Link>
+      </li>
+      <span className="line" />
+      <li><Link to="/calculator">Calculator</Link></li>
+      <span className="line" />
+      <li><Link to="/quote">Quote</Link></li>
+    </ul>
+  </header>
+);
+
+export default Header;

src/components/Home.js

@@ -0,0 +1,25 @@
+const Home = () => (
+  <div className="container mt-5">
+    <h3>Welcome to our page</h3>
+    <p>
+      {`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
+        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
+        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
+        in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        \n \br Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+         totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.`}
+    </p>
+    <p>
+      {`Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
+           ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci 
+           velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
+           Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
+           consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
+         vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?`}
+
+    </p>
+  </div>
+);
+
+export default Home;

src/components/Quote.css

@@ -0,0 +1,10 @@
+body {
+  height: 100vh;
+}
+
+.container-quote {
+  height: 70vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/Quote.js

@@ -0,0 +1,14 @@
+import './Quote.css';
+
+const Quote = () => (
+  <div className="container container-quote">
+    <blockquote>
+      <p className="h5">
+        {`Mathematics is not about numbers, equations, 
+              computations, or algorithms: it is about understanding. -William Paul Thurston`}
+      </p>
+    </blockquote>
+  </div>
+);
+
+export default Quote;

src/css/Calculator.css

@@ -1,11 +1,15 @@
 .body {
   display: flex;
   justify-content: center;
-  align-items: center;
   height: 100vh;
   font-size: 18px;
 }
 
+.container-calc {
+  display: flex;
+  justify-content: space-between;
+}
+
 .screen-output {
   background: #858694;
   padding: 15px;