David-Kasilia · David-Kasilia · Sep 13, 2022 · Sep 13, 2022 · Sep 13, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "big.js": "^6.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Math Magicians</title>
+    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet"> 
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -4,6 +4,17 @@
   box-sizing: border-box;
 }
 
+li {
+  list-style: none;
+  font-family: 'Lato', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+  font-family: 'Lato', sans-serif;
+}
+
 body {
   margin: 0;
 }
@@ -12,9 +23,9 @@ body {
   display: grid;
   margin-top: 2rem;
   position: fixed;
-  left: 25%;
-  right: 20%;
-  top: 10%;
+  left: 48%;
+  right: 10%;
+  top: 13%;
   grid-template-columns: repeat(8, 6rem);
   /* stylelint-disable-next-line csstree/validator */
   grid-template-rows: minmax(7rem, auto) repeat(5 6rem);
@@ -57,3 +68,79 @@ body {
 .btn-zero {
   grid-column: 1 / 5;
 }
+
+.nav-items {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  width: 500px;
+  font-family: 'Lato', sans-serif;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  font-family: 'Lato', sans-serif;
+}
+
+.link {
+  position: relative;
+  z-index: 0;
+  display: inline-block;
+  padding: 5px 5px;
+  overflow: hidden;
+  vertical-align: bottom;
+  transition: color 0.3s ease-out;
+}
+
+.link::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  transform: translateY(calc(100% - 2px));
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(60deg, #f5913e 0%, #f5913e 100%);
+  transition: transform 0.25s ease-out;
+}
+
+.link:hover {
+  color: white;
+}
+
+.link:hover::before {
+  transform: translateY(0);
+  transition: transform 0.25s ease-out;
+}
+
+.home-container {
+  display: block;
+  width: 90%;
+  margin: 2% 2% 1% 4%;
+}
+
+.calculator {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+.title2 {
+  margin: 4.5% 5% 1% -70%;
+}
+
+.quote {
+  display: block;
+  margin: 10% 5% 1% 15%;
+  font-weight: 300;
+  font-size: 40px;
+}
+
+.title {
+  margin-left: -8%;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,21 @@
 import React from 'react';
 import './App.css';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Calculator from './components/Calculator';
+import Header from './components/Header';
+import Home from './components/Home';
+import Quote from './components/Quote';
 
 const App = () => (
+  <Router>
+    <Header />
 
-  <Calculator />
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/calculator" element={<Calculator />} />
+      <Route path="/quote" element={<Quote />} />
+    </Routes>
+  </Router>
 );
 
 export default App;
diff --git a/src/components/Calculator.js b/src/components/Calculator.js
@@ -45,34 +45,32 @@ const Calculator = () => {
   ];
 
   return (
-    <div className="calculator-grid">
-      {next ? (
-        <div className="operand">
-          {next}
-        </div>
-      ) : (
-        <div className="operand">
-          {total}
-        </div>
-      )}
+    <div className="calculator">
+      <h2 className="title2">Let us do some math</h2>
+      <div className="calculator-grid">
+        {next ? (
+          <div className="operand">{next}</div>
+        ) : (
+          <div className="operand">{total}</div>
+        )}
 
-      { button.map((buttonSymbol) => (
-        <button
-          onClick={onClickHandler}
-          name={buttonSymbol}
-          type="button"
-          className={`btn ${buttonSymbol === '0' ? 'btn-zero' : ''} 
+        {button.map((buttonSymbol) => (
+          <button
+            onClick={onClickHandler}
+            name={buttonSymbol}
+            type="button"
+            className={`btn ${buttonSymbol === '0' ? 'btn-zero' : ''} 
             ${buttonSymbol === '=' ? 'btn-equal' : ''}
             ${buttonSymbol === '÷' ? 'btn-divide' : ''}
             ${buttonSymbol === 'x' ? 'btn-multiply' : ''}
             ${buttonSymbol === '-' ? 'btn-subtract' : ''}
             ${buttonSymbol === '+' ? 'btn-add' : ''}`}
-          key={buttonSymbol}
-        >
-          {buttonSymbol}
-        </button>
-      ))}
-
+            key={buttonSymbol}
+          >
+            {buttonSymbol}
+          </button>
+        ))}
+      </div>
     </div>
   );
 };

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import Navbar from './Navbar';
+
+const Header = () => (
+  <header className="header">
+    <h1 className="title">Math Magicians</h1>
+    <Navbar />
+  </header>
+);
+
+export default Header;
diff --git a/src/components/Home.js b/src/components/Home.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Home = () => (
+  <div className="home-container">
+    <h2 className="home-title">Welcome To Our Page</h2>
+    <p className="home-text">
+      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.
+    </p>
+    <p className="home-text">
+      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.
+    </p>
+  </div>
+);
+
+export default Home;
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Navbar = () => (
+  <nav className="nav-Bar">
+    <ul className="nav-items">
+      <li className="nav-item link">
+        <Link to="/">Home</Link>
+      </li>
+      <li className="line">|</li>
+      <li className="nav-item link">
+        <Link to="/calculator">Calculator</Link>
+      </li>
+      <li className="line">|</li>
+      <li className="nav-item link">
+        <Link to="/quote">Quote</Link>
+      </li>
+    </ul>
+  </nav>
+);
+export default Navbar;
diff --git a/src/components/Quote.js b/src/components/Quote.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Quote = () => (
+  <p className="quote">
+    Mathematics is about numbers, equations,computations, or algorithms: its is
+    about understanding.- William Paul Thurston
+  </p>
+);
+
+export default Quote;