Merge pull request #7 from Yothu/feature/create-full-website

Create full website
Yothu · Feb 15, 2022 · 68e6ef3 · 68e6ef3
2 parents e07ed1a + b157bac
commit 68e6ef3
Show file tree

Hide file tree

Showing 16 changed files with 271 additions and 44 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "/static/css/main.3d1847f8.css",
-    "main.js": "/static/js/main.c5271a03.js",
+    "main.js": "/static/js/main.7e7c9609.js",
     "index.html": "/index.html",
     "main.3d1847f8.css.map": "/static/css/main.3d1847f8.css.map",
-    "main.c5271a03.js.map": "/static/js/main.c5271a03.js.map"
+    "main.7e7c9609.js.map": "/static/js/main.7e7c9609.js.map"
   },
   "entrypoints": [
     "static/css/main.3d1847f8.css",
-    "static/js/main.c5271a03.js"
+    "static/js/main.7e7c9609.js"
   ]
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.c5271a03.js"></script><link href="/static/css/main.3d1847f8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.7e7c9609.js"></script><link href="/static/css/main.3d1847f8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/build/static/js/main.7e7c9609.js b/build/static/js/main.7e7c9609.js
diff --git a/build/static/js/main.c5271a03.js.LICENSE.txt → build/static/js/main.7e7c9609.js.LICENSE.txt b/build/static/js/main.c5271a03.js.LICENSE.txt → build/static/js/main.7e7c9609.js.LICENSE.txt
@@ -4,6 +4,28 @@ object-assign
 @license MIT
 */
 
+/**
+ * React Router DOM v6.2.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.2.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
 /** @license React v0.20.2
  * scheduler.production.min.js
  *

diff --git a/build/static/js/main.7e7c9609.js.map b/build/static/js/main.7e7c9609.js.map
diff --git a/build/static/js/main.c5271a03.js b/build/static/js/main.c5271a03.js
diff --git a/build/static/js/main.c5271a03.js.map b/build/static/js/main.c5271a03.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,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",
     "web-vitals": "^2.1.4"
   },

diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,9 @@
 import './App.css';
 import React from 'react';
+import { Routes, Route } from 'react-router-dom';
 import Calculator from './components/Calculator';
+import Home from './components/Home';
+import Quote from './components/Quote';
 
 class App extends React.Component {
   constructor(props) {
@@ -10,7 +13,11 @@ class App extends React.Component {
 
   render() {
     return (
-      <Calculator />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/calculator" element={<Calculator />} />
+        <Route path="/quote" element={<Quote />} />
+      </Routes>
     );
   }
 }

diff --git a/src/components/Calculator.js b/src/components/Calculator.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Header from './Header';
 import calculate from './logic/calculate';
 
 const Style = {
@@ -22,41 +23,49 @@ function Calculator() {
   }
 
   return (
-    <div className="container">
-      <div className="row">
-        <div className={`result col-12 p-3 text-white text-end border-mid-gray ${darkGray}`}>
-          { state.next || state.operation || state.total || 0 }
+    <div className="whole-page">
+      <Header />
+      <section id="calculator-section" className="whole-section bg-light-blue container-fluid px-sm-5 p-3">
+        <div className="row">
+          <p className="calculator-text p-3 col-12 col-md-5 text-white">Lets do some Math!</p>
+          <div id="calculator" className="container p-3">
+            <div className="row">
+              <div className={`result col-12 p-3 text-white text-end border-mid-gray ${darkGray}`}>
+                { state.next || state.operation || state.total || 0 }
+              </div>
+            </div>
+            <div className="row">
+              <button type="button" onClick={() => press(obj, 'AC')} className={`col-3 ${button} ${lightGray}`}>AC</button>
+              <button type="button" onClick={() => press(obj, '+/-')} className={`col-3 ${button} ${lightGray}`}>+/-</button>
+              <button type="button" onClick={() => press(obj, '%')} className={`col-3 ${button} ${lightGray}`}>%</button>
+              <button type="button" onClick={() => press(obj, '÷')} className={`col-3 ${button} ${orange}`}>÷</button>
+            </div>
+            <div className="row">
+              <button type="button" onClick={() => press(obj, '7')} className={`col-3 ${button} ${lightGray}`}>7</button>
+              <button type="button" onClick={() => press(obj, '8')} className={`col-3 ${button} ${lightGray}`}>8</button>
+              <button type="button" onClick={() => press(obj, '9')} className={`col-3 ${button} ${lightGray}`}>9</button>
+              <button type="button" onClick={() => press(obj, 'x')} className={`col-3 ${button} ${orange}`}>x</button>
+            </div>
+            <div className="row">
+              <button type="button" onClick={() => press(obj, '4')} className={`col-3 ${button} ${lightGray}`}>4</button>
+              <button type="button" onClick={() => press(obj, '5')} className={`col-3 ${button} ${lightGray}`}>5</button>
+              <button type="button" onClick={() => press(obj, '6')} className={`col-3 ${button} ${lightGray}`}>6</button>
+              <button type="button" onClick={() => press(obj, '-')} className={`col-3 ${button} ${orange}`}>-</button>
+            </div>
+            <div className="row">
+              <button type="button" onClick={() => press(obj, '1')} className={`col-3 ${button} ${lightGray}`}>1</button>
+              <button type="button" onClick={() => press(obj, '2')} className={`col-3 ${button} ${lightGray}`}>2</button>
+              <button type="button" onClick={() => press(obj, '3')} className={`col-3 ${button} ${lightGray}`}>3</button>
+              <button type="button" onClick={() => press(obj, '+')} className={`col-3 ${button} ${orange}`}>+</button>
+            </div>
+            <div className="row">
+              <button type="button" onClick={() => press(obj, '0')} className={`col-6 ${button} ${lightGray}`}>0</button>
+              <button type="button" onClick={() => press(obj, '.')} className={`col-3 ${button} ${lightGray}`}>.</button>
+              <button type="button" onClick={() => press(obj, '=')} className={`col-3 ${button} ${orange}`}>=</button>
+            </div>
+          </div>
         </div>
-      </div>
-      <div className="row">
-        <button type="button" onClick={() => press(obj, 'AC')} className={`col-3 ${button} ${lightGray}`}>AC</button>
-        <button type="button" onClick={() => press(obj, '+/-')} className={`col-3 ${button} ${lightGray}`}>+/-</button>
-        <button type="button" onClick={() => press(obj, '%')} className={`col-3 ${button} ${lightGray}`}>%</button>
-        <button type="button" onClick={() => press(obj, '÷')} className={`col-3 ${button} ${orange}`}>÷</button>
-      </div>
-      <div className="row">
-        <button type="button" onClick={() => press(obj, '7')} className={`col-3 ${button} ${lightGray}`}>7</button>
-        <button type="button" onClick={() => press(obj, '8')} className={`col-3 ${button} ${lightGray}`}>8</button>
-        <button type="button" onClick={() => press(obj, '9')} className={`col-3 ${button} ${lightGray}`}>9</button>
-        <button type="button" onClick={() => press(obj, 'x')} className={`col-3 ${button} ${orange}`}>x</button>
-      </div>
-      <div className="row">
-        <button type="button" onClick={() => press(obj, '4')} className={`col-3 ${button} ${lightGray}`}>4</button>
-        <button type="button" onClick={() => press(obj, '5')} className={`col-3 ${button} ${lightGray}`}>5</button>
-        <button type="button" onClick={() => press(obj, '6')} className={`col-3 ${button} ${lightGray}`}>6</button>
-        <button type="button" onClick={() => press(obj, '-')} className={`col-3 ${button} ${orange}`}>-</button>
-      </div>
-      <div className="row">
-        <button type="button" onClick={() => press(obj, '1')} className={`col-3 ${button} ${lightGray}`}>1</button>
-        <button type="button" onClick={() => press(obj, '2')} className={`col-3 ${button} ${lightGray}`}>2</button>
-        <button type="button" onClick={() => press(obj, '3')} className={`col-3 ${button} ${lightGray}`}>3</button>
-        <button type="button" onClick={() => press(obj, '+')} className={`col-3 ${button} ${orange}`}>+</button>
-      </div>
-      <div className="row">
-        <button type="button" onClick={() => press(obj, '0')} className={`col-6 ${button} ${lightGray}`}>0</button>
-        <button type="button" onClick={() => press(obj, '.')} className={`col-3 ${button} ${lightGray}`}>.</button>
-        <button type="button" onClick={() => press(obj, '=')} className={`col-3 ${button} ${orange}`}>=</button>
-      </div>
+      </section>
     </div>
   );
 }

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function Header() {
+  return (
+    <header className="container-fluid px-sm-5 p-3 border border-2 border-dark bg-sea-blue border-light-blue">
+      <nav className="d-flex justify-content-between">
+        <h1 className="text-white m-0">Math Magicians</h1>
+        <div className="d-flex justify-content-center align-items-center">
+          <Link className="route-text px-2 py-1 text-decoration-none text-white" to="/">Home</Link>
+          <Link className="route-text px-2 py-1 text-decoration-none text-white" to="/calculator">Calculator</Link>
+          <Link className="route-text px-2 py-1 text-decoration-none text-white" to="/quote">Quote</Link>
+        </div>
+      </nav>
+    </header>
+  );
+}
+
+export default Header;
diff --git a/src/components/Home.js b/src/components/Home.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import Header from './Header';
+import './Style.css';
+
+function Home() {
+  return (
+    <div className="whole-page">
+      <Header />
+      <section id="home-section" className="whole-section container-fluid px-sm-5 p-3 bg-light-blue">
+        <h2 className="text-white py-3">Welcome to Math!</h2>
+        <div className="home-text-container bg-sea-blue p-3">
+          <p className="text-white py-3">
+            {' '}
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Curabitur elementum vitae lacus eget dapibus. Aliquam volutpat, turpis
+            interdum dapibus placerat, est neque imperdiet nisl, quis placerat
+            tortor diam non erat. Suspendisse ultrices bibendum orci, eget varius
+            eros gravida ac. Donec quis risus quis nulla semper ullamcorper. Mauris
+            tristique mi dolor, ac aliquet nisi tristique sed. Ut bibendum, magna
+            at consequat accumsan, nibh quam egestas lorem, rhoncus varius est augue
+            nec nibh. Nulla facilisi.
+            {' '}
+          </p>
+          <p className="text-white py-3">
+            {' '}
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Curabitur elementum vitae lacus eget dapibus. Aliquam volutpat, turpis
+            interdum dapibus placerat, est neque imperdiet nisl, quis placerat
+            tortor diam non erat. Suspendisse ultrices bibendum orci, eget varius
+            eros gravida ac. Donec quis risus quis nulla semper ullamcorper. Mauris
+            tristique mi dolor, ac aliquet nisi tristique sed. Ut bibendum, magna
+            at consequat accumsan, nibh quam egestas lorem, rhoncus varius est augue
+            nec nibh. Nulla facilisi.
+            {' '}
+          </p>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default Home;
diff --git a/src/components/Quote.js b/src/components/Quote.js
@@ -0,0 +1,19 @@
+import Header from './Header';
+import './Style.css';
+
+function Quote() {
+  return (
+    <div className="whole-page">
+      <Header />
+      <section id="quote-section" className="whole-section bg-light-blue container-fluid d-flex py-auto justify-content-center align-items-center px-sm-5 p-3">
+        <p className="quote m-3 p-3 text-white bg-sea-blue">
+          Without mathematics, theres nothing you can do.
+          Everything around you is mathematics. Everything around you is
+          numbers. - Shakuntala Devi
+        </p>
+      </section>
+    </div>
+  );
+}
+
+export default Quote;
diff --git a/src/components/Style.css b/src/components/Style.css
@@ -0,0 +1,47 @@
+:root {
+  --color1: #7395ae;
+  --color2: #557a95;
+  --color3: #5d5c61;
+}
+
+.bg-sea-blue {
+  background-color: var(--color2) !important;
+}
+
+.bg-light-blue {
+  background-color: var(--color1) !important;
+}
+
+.whole-page {
+  min-height: 100vh;
+}
+
+.route-text {
+  font-size: 1.5rem;
+  background-color: var(--color1);
+  border-radius: 8px;
+  margin: 3px 0.5rem;
+}
+
+.route-text:hover {
+  border: 2px solid white;
+  margin: 1px 0.5rem;
+}
+
+.whole-section {
+  min-height: calc(100vh - 85px);
+}
+
+.home-text-container {
+  border-radius: 8px;
+  font-size: 1.2rem;
+}
+
+.calculator-text {
+  font-size: 2rem;
+}
+
+.quote {
+  font-size: 1.8rem;
+  border-radius: 10px;
+}