kothariji · kothariji · Oct 18, 2021 · Oct 17, 2021 · Oct 18, 2021
diff --git a/README.md b/README.md
@@ -1,11 +1,11 @@
-
 # QuoteWithMe
 
 Checkout Here:- https://quotewithme.herokuapp.com/
 
 A quote maker App ✒️📝, entirely built on React ⚛️ You can create your quote. You can change the color 🎨 of the background as well as the text color. Also, through the random-quote API 👨‍💻, you can generate random quotes. And finally 🚀, once done, you can download the file in png format 🌠
 
 ### Key Features
-- :trophy: You can dowload the quote template.
-- :trophy: Change the color of the vabckground as well as text.
+
+- :trophy: You can download the quote template.
+- :trophy: Change the color of the background as well as text.
 - :trophy: Generate a random quote(using API fetch).
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "dom-to-image": "^2.6.0",
     "file-saver": "^2.0.2",
     "html2canvas": "^1.0.0-rc.5",
+    "material-ui-color-picker": "^3.5.1",
     "omggif": "^1.0.10",
     "promise-polyfill": "^8.1.3",
     "react": "^16.13.1",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,63 +2,57 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico?v=2" />
     <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="%PUBLIC_URL%/logo192.png" />
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-    <!--
-      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 href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700&display=swap" rel="stylesheet">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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`.
-    -->
+    <link
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Inconsolata:400,700&display=swap"
+      rel="stylesheet"
+    />
+
     <title>Quote Maker</title>
 
     <style>
-    body{
-      /*background: #f6f6f6;*/ 
-      background-image: linear-gradient(to right top, #f6f6f6, #f1f1f1, #ebebeb, #e6e6e6, #e1e1e1);
-    }
-
+      body {
+        /*background: #f6f6f6;*/
+        background-image: linear-gradient(
+          to right top,
+          #f6f6f6,
+          #f1f1f1,
+          #ebebeb,
+          #e6e6e6,
+          #e1e1e1
+        );
+      }
     </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
-
-  <script>
-    var node = document.getElementById('my-node');
-    var btn = document.getElementById('foo');
-
-    btn.onclick = function() {
-      node.innerHTML = "I'm an image now."
-        domtoimage.toBlob(document.getElementById('my-node'))
-      .then(function(blob) {
-        window.saveAs(blob, 'my-node.png');
-  </script>
-</html>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.css b/src/App.css
@@ -8,8 +8,13 @@
   display: inline-flex;
   flex-direction: row;
   flex-wrap: wrap;
+  margin-bottom: 30px;
 }
 
 .generate {
   margin-top: 150px;
 }
+
+.color-picker {
+  cursor: pointer;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,8 +1,7 @@
-import React, { useState, Fragment } from "react";
-import UserInput from "./UserComponent/UserInput";
-import UserOutput from "./UserComponent/UserOutput";
-import AuthorInput from "./UserComponent/AuthorInput";
-import ColorBox from "./UserComponent/ColorBox";
+import React, { useState, Fragment } from "react"
+import domtoimage from "dom-to-image";
+import { saveAs } from "file-saver"
+import ColorPicker from 'material-ui-color-picker'
 import {
   FormControl,
   FormControlLabel,
@@ -11,11 +10,16 @@ import {
   RadioGroup,
 } from "@material-ui/core";
 
+
 import "./App.css";
-import Footer from "./UserComponent/Footer";
+import {
+  AuthorInput,
+  ColorBox,
+  Footer,
+  UserInput,
+  UserOutput
+} from "./Components/index"
 
-import domtoimage from "dom-to-image";
-import { saveAs } from "file-saver";
 
 const App = () => {
   const [textState, setTextState] = useState({
@@ -93,15 +97,14 @@ const App = () => {
   };
 
   const getQuote = () => {
-    fetch("https://thesimpsonsquoteapi.glitch.me/quotes")
+    const randomNumber = Math.floor(Math.random() * (1600 - 1 + 1) + 1)
+    fetch("https://type.fit/api/quotes")
       .then((res) => res.json())
       .then(
         (result) => {
-          console.log(result);
-          setTextState({ text: result[0].quote });
-          setAuthorTextState({ text: result[0].character });
+          setTextState({ text: result[randomNumber].text })
+          setAuthorTextState({ text: result[randomNumber].author })
         },
-
         (error) => {
           console.log(error);
         }
@@ -165,9 +168,21 @@ const App = () => {
                 color={code}
                 changeColor={() => handleColorChange(code)}
                 key={code}
+                className="color-box"
               />
             ))}
           </div>
+          <h5>OR</h5>
+          <h4>
+            Pick a Color
+          </h4>
+          <ColorPicker
+            floatingLabelText={radioState.value === "background" ? backState.color : textColorState.color}
+            variant='outlined'
+            name='color'
+            value={radioState.value === "background" ? backState.color : textColorState.color}
+            onChange={color => handleColorChange(color)}
+          />
         </div>
         <div className="col col-7">
           <button
@@ -176,7 +191,6 @@ const App = () => {
           >
             Generate Random Quote
           </button>
-
           <UserOutput
             text={textState.text}
             authorText={authorTextState.text}

diff --git a/src/UserComponent/AuthorInput.js → src/Components/AuthorInput/AuthorInput.js b/src/UserComponent/AuthorInput.js → src/Components/AuthorInput/AuthorInput.js
diff --git a/src/UserComponent/ColorBox.css → src/Components/ColorBox/ColorBox.css b/src/UserComponent/ColorBox.css → src/Components/ColorBox/ColorBox.css
@@ -7,6 +7,7 @@
 .ColorBox:hover {
   height: 110px;
   width: 110px;
+  cursor: pointer;
 }
 
 .ColorText {

diff --git a/src/UserComponent/ColorBox.js → src/Components/ColorBox/ColorBox.js b/src/UserComponent/ColorBox.js → src/Components/ColorBox/ColorBox.js
diff --git a/src/UserComponent/Footer.css → src/Components/Footer/Footer.css b/src/UserComponent/Footer.css → src/Components/Footer/Footer.css
diff --git a/src/UserComponent/Footer.js → src/Components/Footer/Footer.js b/src/UserComponent/Footer.js → src/Components/Footer/Footer.js
diff --git a/src/UserComponent/UserInput.css → src/Components/UserInput/UserInput.css b/src/UserComponent/UserInput.css → src/Components/UserInput/UserInput.css
diff --git a/src/UserComponent/UserInput.js → src/Components/UserInput/UserInput.js b/src/UserComponent/UserInput.js → src/Components/UserInput/UserInput.js
diff --git a/src/UserComponent/UserOutput.css → src/Components/UserOutput/UserOutput.css b/src/UserComponent/UserOutput.css → src/Components/UserOutput/UserOutput.css
diff --git a/src/UserComponent/UserOutput.js → src/Components/UserOutput/UserOutput.js b/src/UserComponent/UserOutput.js → src/Components/UserOutput/UserOutput.js
diff --git a/src/Components/index.js b/src/Components/index.js
@@ -0,0 +1,5 @@
+export { default as AuthorInput } from "./AuthorInput/AuthorInput"
+export { default as ColorBox } from "./ColorBox/ColorBox"
+export { default as Footer } from "./Footer/Footer"
+export { default as UserInput } from "./UserInput/UserInput"
+export { default as UserOutput } from "./UserOutput/UserOutput"