Math magicians: full website

README.md

@@ -24,7 +24,7 @@
 
 ## Live Demo 🌐
 
-### [Math-Magicians Link](https://bondok6.github.io/math-magicians/)
+### [Math-Magicians Link](http://Bondok6.github.io/math-magicians)
 
 ## Getting Started
 

package.json

@@ -1,5 +1,5 @@
 {
-  "homepage": "http://Bondok6.github.io/math-magicians",
+  "homepage": "https://bondok6.github.io/math-magicians/",
   "name": "math-magicians",
   "version": "0.1.0",
   "private": true,
@@ -12,6 +12,7 @@
     "react": "^17.0.2",
     "react-bootstrap": "^2.1.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,6 +1,25 @@
 import React from 'react';
-import Calculator from './components/Calculator';
+import { Routes, Route } from 'react-router-dom';
+import MainHeader from './components/MainHeader';
+import Home from './pages/Home';
+import Quote from './pages/Quote';
+import './styles/App.css';
+import CalculatorPage from './pages/CalculatorPage';
 
-const App = () => <Calculator />;
+const App = () => (
+  <>
+    <header>
+      <MainHeader />
+    </header>
+
+    <main>
+      <Routes>
+        <Route path="/math-magicians/" element={<Home />} />
+        <Route path="/math-magicians/calculator" element={<CalculatorPage />} />
+        <Route path="/math-magicians/quote" element={<Quote />} />
+      </Routes>
+    </main>
+  </>
+);
 
 export default App;

src/components/Calculator.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Row, Col, Button } from 'react-bootstrap';
-import calculate from './logic/calculate';
+import calculate from '../logic/calculate';
+import '../styles/Calculator.css';
 
 const Calculator = () => {
   const [result, setResult] = useState({
@@ -14,7 +15,7 @@ const Calculator = () => {
   };
 
   return (
-    <div className="container">
+    <>
       <Row className="m-3">
         <Col>
           <div className="w-100 p-2 display">
@@ -154,7 +155,7 @@ const Calculator = () => {
           </Button>
         </Col>
       </Row>
-    </div>
+    </>
   );
 };
 

src/components/MainHeader.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import '../styles/MainHeader.css';
+
+const MainHeader = () => (
+  <nav className="nav">
+    <h1 className="nav__title">Math Magicians</h1>
+    <ul className="nav__links">
+      <li>
+        <Link to="/math-magicians/" className="nav__link">
+          Home
+        </Link>
+      </li>
+      <li>
+        <Link to="/math-magicians/calculator" className="nav__link">
+          Calculator
+        </Link>
+      </li>
+      <li>
+        <Link to="/math-magicians/quote" className="nav__link">
+          Quote
+        </Link>
+      </li>
+    </ul>
+  </nav>
+);
+
+export default MainHeader;

src/index.js

@@ -1,7 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import './index.css';
+import './styles/index.css';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+// prettier-ignore
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+  document.getElementById('root'),
+);

src/pages/CalculatorPage.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Calculator from '../components/Calculator';
+import '../styles/CalculatorPage.css';
+
+const CalculatorPage = () => (
+  <section className=" container calculator-section">
+    <h2> Let&#39;s do some math ! </h2>
+    <div className="calculator">
+      <Calculator />
+    </div>
+  </section>
+);
+
+export default CalculatorPage;

src/pages/Home.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import '../styles/Home.css';
+
+const Home = () => (
+  <>
+    <section className=" container home-section">
+      <h2>Welcome to our page!</h2>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas eius,
+        dolorum ipsum consequatur nostrum eaque aut repellat id in non ut
+        numquam? Nobis beatae mollitia sapiente esse perferendis libero nulla.
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium
+        reiciendis molestias, earum a ab cumque totam! Minima praesentium
+        deserunt earum, doloribus sequi modi ratione alias eum voluptates
+        similique blanditiis vel!
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam excepturi
+        alias, tempora id possimus blanditiis laudantium laboriosam inventore
+        nam explicabo hic placeat eum, voluptatem amet aliquid mollitia
+        molestiae cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Quae nam nobis fugiat tempore tempora, nulla explicabo fuga perferendis
+        eveniet esse molestiae earum. Non accusantium unde, veniam sit deleniti
+        quis ut.
+      </p>
+    </section>
+  </>
+);
+
+export default Home;

src/pages/Quote.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import '../styles/Quote.css';
+
+const Quote = () => (
+  <>
+    <section className="container quote-section">
+      <h2>
+        <q>
+          Mathematics is not about numbers, equations, computations, or
+          algorithms: it is about understanding.
+        </q>
+        <span>- William Paul Thurstion.</span>
+      </h2>
+    </section>
+  </>
+);
+
+export default Quote;

src/styles/App.css

@@ -0,0 +1,8 @@
+header {
+  min-height: 10vh;
+}
+
+main {
+  width: 100vw;
+  min-height: 80vh;
+}

src/styles/Calculator.css

@@ -0,0 +1,10 @@
+.display {
+  background-color: gray;
+  font-size: 3rem;
+  height: 6rem;
+  text-align: end;
+}
+
+.p-4 {
+  font-size: 2rem;
+}

src/styles/CalculatorPage.css

@@ -0,0 +1,27 @@
+.calculator-section {
+  width: 100vw;
+  min-height: 80vh;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.calculator-section h2 {
+  font-size: 4rem;
+  align-self: flex-start;
+  margin-top: 10rem;
+}
+
+.calculator {
+  width: 60%;
+}
+
+@media screen and (max-width: 800px) {
+  .calculator-section {
+    flex-direction: column;
+  }
+
+  .calculator {
+    width: 100%;
+  }
+}

src/styles/Home.css

@@ -0,0 +1,12 @@
+.home-section {
+  margin-top: 5rem;
+}
+
+.home-section h2 {
+  font-size: 3rem;
+}
+
+.home-section p {
+  margin: 4rem 0;
+  text-align: justify;
+}

src/styles/MainHeader.css

@@ -0,0 +1,43 @@
+.nav {
+  width: 100vw;
+  min-height: 10vh;
+  background-color: var(--bg-secondary);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.nav__title {
+  font-size: 4rem;
+  font-weight: bolder;
+  letter-spacing: 0.5rem;
+  line-height: 1rem;
+  color: var(--gray-clr);
+  font-style: italic;
+  text-shadow: 0 0.5rem 1rem var(--border-clr);
+}
+
+.nav__links {
+  list-style-type: none;
+  display: flex;
+  gap: 2rem;
+}
+
+.nav__link {
+  text-decoration: none;
+  color: var(--white-clr);
+  transition: 0.4s;
+}
+
+.nav__link:hover,
+.nav__link:focus {
+  color: var(--border-clr);
+}
+
+@media screen and (max-width: 600px) {
+  .nav__title {
+    padding-top: 1rem;
+    font-size: 3rem;
+    letter-spacing: 0;
+  }
+}