rocketacademy · ignatiusgabrieltan · Sep 24, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,13 +1,17 @@
 {
+  "homepage": "https://ignatiusgabrieltan.github.io",
   "name": "project1-bootcamp",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "gh-pages": "^6.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build"
   },
@@ -27,5 +31,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "web-vitals": "^3.4.0"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/Guitar 4 you-01.png b/public/images/Guitar 4 you-01.png
diff --git a/public/images/acoustic guitar.png b/public/images/acoustic guitar.png
diff --git a/public/images/acoustic guitar.png:Zone.Identifier b/public/images/acoustic guitar.png:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://www.washburn.com/wp-content/uploads/2018/06/AG70CE-FRONT.png
+HostUrl=https://www.washburn.com/wp-content/uploads/2018/06/AG70CE-FRONT.png
diff --git a/public/images/acoustic-guitar-close-up-beautiful-colored-background.jpg:Zone.Identifier b/public/images/acoustic-guitar-close-up-beautiful-colored-background.jpg:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://www.freepik.com/free-photo/acoustic-guitar-close-up-beautiful-colored-background_9434975.htm
+HostUrl=https://downloadscdn6.freepik.com/169016/4/3530.jpg?filename=acoustic-guitar-close-up-beautiful-colored-background.jpg&token=exp=1694859061~hmac=e1bb2e7892462b1c518fad8a741aed6d
diff --git a/public/images/chords.jpg b/public/images/chords.jpg
diff --git a/public/images/chords.jpg:Zone.Identifier b/public/images/chords.jpg:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://www.libertyparkmusic.com/wp-content/uploads/Chord-diagram-7.jpg
+HostUrl=https://www.libertyparkmusic.com/wp-content/uploads/Chord-diagram-7.jpg
diff --git a/public/images/electric guitar.png b/public/images/electric guitar.png
diff --git a/public/images/electric guitar.png:Zone.Identifier b/public/images/electric guitar.png:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://www.prestigeguitars.com/wp-content/uploads/2017/10/classic-sb-front.png
+HostUrl=https://www.prestigeguitars.com/wp-content/uploads/2017/10/classic-sb-front.png
diff --git a/public/images/guitar.jpg:Zone.Identifier b/public/images/guitar.jpg:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://www.long-mcquade.com/files/25289/4853647ce0ea63ff32c26bcbe2d89dbb.jpg
+HostUrl=https://www.long-mcquade.com/files/25289/4853647ce0ea63ff32c26bcbe2d89dbb.jpg
diff --git a/public/images/menu guitar.jpg b/public/images/menu guitar.jpg
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,18 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <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=Kavoon&display=swap"
+      rel="stylesheet"
+    />
+    <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=Kavoon&family=Libre+Franklin&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +36,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>Rocket Bootcamp Project</title>
+    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "Rocket Project",
-  "name": "Rocket Bootcamp Project",
+  "short_name": "React App",
+  "name": "Create React App Sample",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.css b/src/App.css
@@ -7,6 +7,12 @@
   pointer-events: none;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -17,3 +23,16 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/App.js b/src/App.js
@@ -1,20 +1,39 @@
 import React from "react";
-import logo from "./logo.png";
 import "./App.css";
+import MenuPage from "./Components/Menu-page";
+import LearnChords from "./Components/LearnChords";
 
 class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: "MENU",
+    };
+  }
+
+  toChordsPage = () => {
+    this.setState({
+      page: "LEARNCHORDS",
+    });
+  };
+
+  toMenuPage = () => {
+    this.setState({
+      page: "MENU",
+    });
+  };
+
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-        </header>
+        {this.state.page === "MENU" && (
+          <MenuPage changeToChordsPage={this.toChordsPage} />
+        )}
+        {this.state.page === "LEARNCHORDS" && (
+          <LearnChords changeToMenuPage={this.toMenuPage} />
+        )}
       </div>
     );
   }
 }
-
 export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
diff --git a/src/Components/AG-Buttons.css b/src/Components/AG-Buttons.css
@@ -0,0 +1,93 @@
+.index-AG {
+  background-color: transparent;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+}
+
+.AG-Buttons {
+  align-items: flex-start;
+  display: inline-flex;
+  gap: 25px;
+  justify-content: center;
+  position: absolute;
+  top: 25px;
+}
+
+.index-AG .button {
+  background: none;
+  border: none;
+  color: #ffffff;
+  font-family: "Libre Franklin", Helvetica;
+  font-size: 30px;
+  font-weight: 400;
+  height: 46px;
+  letter-spacing: 0;
+  line-height: normal;
+  margin-top: -1px;
+  position: relative;
+  text-align: center;
+  width: 38px;
+}
+
+.index-AG .a-chord {
+  height: 92px;
+  left: 402px;
+  position: absolute;
+  top: 118px;
+  width: 61px;
+}
+
+.fingering {
+  position: absolute;
+  left: -75px;
+}
+
+.index-AG .b-chord {
+  height: 92px;
+  left: 182px;
+  position: absolute;
+  top: 120px;
+  width: 281px;
+}
+
+.index-AG .c-chord {
+  height: 92px;
+  left: 251px;
+  position: absolute;
+  top: 118px;
+  width: 281px;
+}
+
+.index-AG .d-chord {
+  height: 92px;
+  left: 251px;
+  position: absolute;
+  top: 118px;
+  width: 281px;
+}
+
+.index-AG .e-chord {
+  height: 92px;
+  left: 325px;
+  position: absolute;
+  top: 118px;
+  width: 281px;
+}
+
+.index-AG .f-chord {
+  height: 92px;
+  left: 251px;
+  position: absolute;
+  top: 118px;
+  width: 281px;
+}
+
+.index-AG .g-chord {
+  height: 92px;
+  left: 325px;
+  position: absolute;
+  top: 118px;
+  width: 281px;
+}
diff --git a/src/Components/AG-Buttons.js b/src/Components/AG-Buttons.js
@@ -0,0 +1,89 @@
+import React from "react";
+import "./AG-Buttons.css";
+import AChord from "./audio/A-Chord.mp3";
+import BChord from "./audio/B-Chord.mp3";
+import CChord from "./audio/C-Chord.mp3";
+import DChord from "./audio/D-Chord.mp3";
+import EChord from "./audio/E-Chord.mp3";
+import FChord from "./audio/F-Chord.mp3";
+import GChord from "./audio/G-Chord.mp3";
+
+class AGButtons extends React.Component {
+  play = (sound) => {
+    new Audio(sound).play();
+  };
+
+  render() {
+    const { changeMajorChord } = this.props;
+    return (
+      <div className="index-AG">
+        <div className="AG-Buttons">
+          <button
+            className="button"
+            onClick={() => {
+              changeMajorChord("A");
+              this.play(AChord);
+            }}
+          >
+            A
+          </button>
+          <button
+            className="button"
+            onClick={() => {
+              changeMajorChord("B");
+              this.play(BChord);
+            }}
+          >
+            B
+          </button>
+          <button
+            className="button"
+            onClick={() => {
+              changeMajorChord("C");
+              this.play(CChord);
+            }}
+          >
+            C
+          </button>
+          <button
+            className="button"
+            onClick={() => {
+              changeMajorChord("D");
+              this.play(DChord);
+            }}
+          >
+            D
+          </button>
+          <button
+            className="button"
+            onClick={() => {
+              changeMajorChord("E");
+              this.play(EChord);
+            }}
+          >
+            E
+          </button>
+          <button
+            className="button"
+            onClick={() => {
+              changeMajorChord("F");
+              this.play(FChord);
+            }}
+          >
+            F
+          </button>
+          <button
+            className="button"
+            onClick={() => {
+              changeMajorChord("G");
+              this.play(GChord);
+            }}
+          >
+            G
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+export default AGButtons;
diff --git a/src/Components/AmGm-Buttons.css b/src/Components/AmGm-Buttons.css
@@ -0,0 +1,32 @@
+.index {
+  background-color: transparent;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+}
+
+.AmGm-Buttons {
+  align-items: flex-start;
+  display: inline-flex;
+  gap: 25px;
+  position: absolute;
+  left: 65px;
+  top: 25px;
+}
+
+.index .button {
+  background: none;
+  border: none;
+  color: #ffffff;
+  font-family: "Libre Franklin", Helvetica;
+  font-size: 30px;
+  font-weight: 400;
+  height: 46px;
+  letter-spacing: 0;
+  line-height: normal;
+  margin-top: -1px;
+  position: relative;
+  text-align: center;
+  width: 38px;
+}