Merge pull request #6 from sentayhu19/full-website

Home and quote component created
sentayhu19 · Apr 27, 2022 · ae78152 · ae78152
2 parents ceaaea3 + 22e4162
commit ae78152
Show file tree

Hide file tree

Showing 15 changed files with 26,612 additions and 81 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,13 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
     "big-js": "^3.1.3",
     "big.js": "^6.1.1",
+    "randomized-string": "^1.2.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.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
@@ -14,6 +14,10 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Permanent+Marker&display=swap" rel="stylesheet">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
@@ -24,7 +28,7 @@
       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>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,16 +1,19 @@
 import React from 'react';
-import Calculator from './components/Calculator';
+import { Routes, BrowserRouter, Route } from 'react-router-dom';
+import Calculator from './components/Calculator/Calculator';
+import Home from './components/home/home';
+import Quote from './components/quotes/quotes';
+import NavBar from './components/Navigation/NavBar';
 
-class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+const App = () => (
+  <BrowserRouter>
+    <NavBar />
+    <Routes>
+      <Route exact path="/" element={<Home />} />
+      <Route path="/Calculator" element={<Calculator />} />
+      <Route path="/Quote" element={<Quote />} />
+    </Routes>
+  </BrowserRouter>
 
-  render() {
-    return (
-      <Calculator />
-    );
-  }
-}
+);
 export default App;
diff --git a/src/components/Calculator.js b/src/components/Calculator.js
diff --git a/src/components/Calculator/Calculator.css b/src/components/Calculator/Calculator.css
@@ -0,0 +1,12 @@
+.calc-wrap {
+  position: fixed;
+  right: 250px;
+  top: 220px;
+}
+
+@media only screen and (max-width: 1024px) {
+  .calc-wrap {
+    position: static;
+    margin: auto;
+  }
+}
diff --git a/src/components/Calculator/Calculator.js b/src/components/Calculator/Calculator.js
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import calculate from '../../logic/calculate';
+import './Calculator.css';
+
+const Calculator = () => {
+  const [currentCalc, setcalc] = useState({
+    next: '',
+    total: 0,
+    operation: '',
+  });
+  const { next, total, operation } = currentCalc;
+  const handleClick = (e) => {
+    e.preventDefault();
+    setcalc((state) => calculate({
+      next: state.next,
+      total: state.total,
+      operation: state.operation,
+    },
+    e.target.innerHTML));
+  };
+
+  return (
+    <>
+      <h2>Lets do some math!</h2>
+      <div className="calc-wrap">
+        <div id="input">
+          {total}
+          {' '}
+          {operation}
+          {' '}
+          {next}
+        </div>
+        <div id="row1">
+          <button type="button" className="op" onClick={handleClick}>AC</button>
+          <button type="button" className="op" onClick={handleClick}>+/-</button>
+          <button type="button" className="op" onClick={handleClick}>%</button>
+          <button type="button" className="operator" onClick={handleClick}>÷</button>
+        </div>
+        <div id="row2">
+          <button type="button" className="number" id="7" onClick={handleClick}>7</button>
+          <button type="button" className="number" id="8" onClick={handleClick}>8</button>
+          <button type="button" className="number" id="9" onClick={handleClick}>9</button>
+          <button type="button" className="operator" onClick={handleClick}>x</button>
+        </div>
+        <div id="row3">
+          <button type="button" className="number" id="4" onClick={handleClick}>4</button>
+          <button type="button" className="number" id="5" onClick={handleClick}>5</button>
+          <button type="button" className="number" id="6" onClick={handleClick}>6</button>
+          <button type="button" className="operator" onClick={handleClick}>-</button>
+        </div>
+
+        <div id="row4">
+          <button type="button" className="number" id="1" onClick={handleClick}>1</button>
+          <button type="button" className="number" id="2" onClick={handleClick}>2</button>
+          <button type="button" className="number" id="3" onClick={handleClick}>3</button>
+          <button type="button" className="operator" onClick={handleClick}>+</button>
+        </div>
+        <div id="row5">
+          <button type="button" id="n0" onClick={handleClick}>0</button>
+          <button type="button" className="number" onClick={handleClick}>.</button>
+          <button className="operator" type="button" onClick={handleClick}>=</button>
+        </div>
+      </div>
+    </>
+  );
+};
+export default Calculator;
diff --git a/src/components/Navigation/NavBar.css b/src/components/Navigation/NavBar.css
@@ -0,0 +1,48 @@
+nav {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  margin-top: 30px;
+  background-color: #3d3dc7;
+  color: white;
+}
+
+.nav-link-wrap {
+  list-style-type: none;
+  display: flex;
+  justify-content: space-between;
+  text-align: right;
+  margin-right: 40px;
+}
+
+a {
+  text-decoration: none;
+  color: white;
+}
+
+h1 {
+  margin-left: 40px;
+  background-color: #42378f;
+  background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%);
+}
+
+/* NAV Hover */
+
+.nav-link:hover {
+  color: yellow;
+}
+
+.logo-m {
+  font-size: 30px;
+}
+
+@media only screen and (max-width: 768px) {
+  .title {
+    display: none;
+  }
+
+  .nav-link-wrap {
+    gap: 50%;
+    margin-right: 100px;
+  }
+}
diff --git a/src/components/Navigation/NavBar.js b/src/components/Navigation/NavBar.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { generate } from 'randomized-string';
+import { alphanumeric } from 'randomized-string/lib/types';
+import './NavBar.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCalculator, faHome, faQuoteLeft } from '@fortawesome/free-solid-svg-icons';
+
+const IconSelector = (index) => {
+  if (index === 0) {
+    return <FontAwesomeIcon icon={faHome} title="Home" />;
+  }
+  if (index === 1) {
+    return <FontAwesomeIcon icon={faCalculator} title="Calculator" />;
+  }
+
+  return <FontAwesomeIcon icon={faQuoteLeft} title="quote" />;
+};
+const NavMenu = [
+  {
+    title: 'Home | ',
+    url: '/',
+    CName: 'nav-link',
+  },
+  {
+    title: 'Calculator | ',
+    url: '/Calculator',
+    CName: 'nav-link',
+  },
+  {
+    title: 'Quotes ',
+    url: '/Quote',
+    CName: 'nav-link',
+  },
+];
+
+const navhandler = (e) => {
+  document.getElementById(e.target.id).style.cssText = 'color: yellow;';
+};
+const NavBar = () => (
+  <>
+    <nav>
+      <a href={NavMenu[0].url}>
+        <h1>
+          <span className="logo-m">M</span>
+          ath Magician
+        </h1>
+      </a>
+      {' '}
+      <ul className="nav-link-wrap">
+        {NavMenu.map((item, index) => (
+          <li key={generate({ charset: alphanumeric })}>
+            <a className={item.CName} id={index} href={item.url} onClick={navhandler}>
+              {IconSelector(index)}
+              {'    '}
+              <span className="title">{item.title}</span>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  </>
+);
+export default NavBar;
diff --git a/src/components/home/home.css b/src/components/home/home.css
@@ -0,0 +1,12 @@
+p {
+  color: white;
+  margin-left: 40px;
+  margin-right: 40px;
+}
+
+h2 {
+  color: white;
+  margin-bottom: 60px;
+  margin-left: 40px;
+  margin-top: 70px;
+}
diff --git a/src/components/home/home.js b/src/components/home/home.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import './home.css';
+
+const Home = () => (
+  <>
+    <h2>Welcome To Our Page!</h2>
+    <p>
+      As time passed, many mathematicians gravitated towards universities
+      . An emphasis on free thinking and experimentation had begun in Britain &apos s oldest
+      universities beginning in the seventeenth century at
+      Oxford with the scientists Robert Hooke and Robert
+      Boyle, and at Cambridge where Isaac
+      Newton was Lucasian Professor of Mathematics and
+      Physics. Moving into the 19th century, the objective
+      of universities all across Europe evolved from
+      teaching the &quot regurgitation of knowledge &quot to
+      &quot encourag[ing] productive thinking. &quot In 1810,
+      Humboldt convinced the King of Prussia to
+      build a university in Berlin based on
+      Friedrich Schleiermacher &apos s
+      liberal ideas; the goal was to demonstrate
+      the process of the discovery of knowledge
+      and to teach students to &quot take account of
+      fundamental laws of science in all their thinking.&quot
+    </p>
+    <br />
+    <br />
+    <p>
+      British universities of this period adopted some
+      approaches familiar to the Italian and German
+      universities, but as they already enjoyed
+      substantial freedoms and autonomy the
+      changes there had begun with the Age of
+      Enlightenment, the same influences that
+      inspired Humboldt.
+      The Universities of Oxford and Cambridge
+      emphasized the importance of research,
+      arguably more authentically implementing
+      Humboldt &apos s idea
+      of a university than even German universities,
+      which were subject to state authority.
+      Overall, science (including mathematics)
+      became
+      the focus of universities in the 19th and
+      20th centuries.
+    </p>
+  </>
+);
+export default Home;
diff --git a/src/components/quotes/quotes.css b/src/components/quotes/quotes.css
@@ -0,0 +1,5 @@
+.quote {
+  width: 40%;
+  margin: auto;
+  padding-top: 10%;
+}