Removed test script from production code

Styling updated for small devices
Test instructions updated
2022-06-30 12:27:29 +10:00 · 2022-06-30 12:24:46 +10:00 · 2022-06-30 12:09:08 +10:00 · 2022-06-30 12:00:38 +10:00 · 2022-06-30 03:09:00 +10:00 · 2022-06-30 02:22:24 +10:00
5 changed files with 27 additions and 16 deletions
@@ -1,4 +1,6 @@
-# Build-a-Random-Quote-Machine
+# Build a Random Quote Machine
+
+**Demo:** [random-quote-machine.radii.page](https://random-quote-machine.radii.page/)

 **Profile:** [https://www.freecodecamp.org/radii](https://www.freecodecamp.org/radii)

@@ -13,20 +15,24 @@ cd random-quote-machine
 npm install
 npm run build
 cd ..
-docker build -t radii/random-quote-machine:latest -f ./dockerfile .
+DOCKER_BUILDKIT=1 docker build -t radii/random-quote-machine:latest -f ./dockerfile ./random-quote-machine/build
 docker run -p 8081:80 -it radii/random-quote-machine
 ```

+Access WebApp at [http://localhost:8081](http://localhost:8081)
+
+Note: you may replace `8081` with any other port number where you wish to make service available.
+
 ## Run tests as:
-After building, go to to `build` sub-directory and edit `index.html` file and insert bellow code snippet immediately before closing `</body>` tag:
+After building, go to to `public` sub-directory and edit `index.html` file and insert bellow code snippet immediately before closing `</body>` tag:

 ```{html}
-<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`
+<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
 ```

-Than serve as:
+Than start development instance as:

 ```{bash}
-serve -s build
+npm start
 ```
-You should now see a hamburger on left of page. Tap/click it than select test suite `Random Quote Machine`. `Run Tests` and observe results.
+You should now see a hamburger on top-left of page. Tap/click it than select test suite `Random Quote Machine`. `Run Tests` and observe results.
@@ -0,0 +1,9 @@
+version: "2"
+
+services:
+  random-quote-machine:
+    build: .
+    image: radii/random-quote-machine:latest
+    ports:
+      - "127.0.0.1:8081:80"
+    restart: always 
@@ -1,4 +1,3 @@
 FROM nginx

-COPY nginx.conf /
-COPY random-quote-machine/build /usr/share/nginx/html
+COPY --chmod=755 ./ /usr/share/nginx/html
@@ -5,10 +5,7 @@
    <link rel="icon" href="%PUBLIC_URL%/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"
-    />
+    <meta name="description" content="Random quote machine" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +21,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>Random Quote Machine</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -57,14 +57,14 @@ class App extends React.Component {
              </p>
              <div className="row justify-content-center">
                <button
-                  className={`btn col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2 ${this.state.randomBackgroundColorClass}`}
+                  className={`btn col-10 mb-2 mb-sm-0 col-sm-5 col-md-4 col-lg-3 col-xl-2 ${this.state.randomBackgroundColorClass}`}
                  id="new-quote"
                  onClick={this.handleNewQuote}
                >
                  <FontAwesomeIcon icon={faShuffle} /> Random Quote
                </button>
                <a
-                  className="btn bg-color-twitter col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2 offset-1"
+                  className="btn bg-color-twitter col-10 col-sm-5 col-md-4 col-lg-3 col-xl-2 offset-sm-1"
                  href={`https://twitter.com/intent/tweet?text="${encodeURI(
                    `${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n`
                  )}&hashtags=quotes,freeCodeCamp`}
Author	SHA1	Message	Date
radii	92a95e9612	Removed test script from production code	2022-06-30 12:27:29 +10:00
radii	c18016aaa8	Styling updated for small devices	2022-06-30 12:24:46 +10:00
radii	e3b4870858	Test instructions updated	2022-06-30 12:09:08 +10:00
radii	a9fa5b46e1	docker files updated	2022-06-30 12:00:38 +10:00
radii	6fde538f8a	Demo link updated	2022-06-30 03:09:00 +10:00
radii	7c8df42cc6	Cosmetic changes to readme file	2022-06-30 02:22:24 +10:00
radii	8cf3180dfe	App title and description meta information updated	2022-06-30 02:19:06 +10:00
radii	cf03b3339e	Deployment instruction using docker added	2022-06-30 02:15:17 +10:00