freeCodeCamp.org-Front-End-Dev-Libraries/Random-Quote-Machine
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: freeCodeCamp.org-Front-End-Dev-Libraries/Random-Quote-Machine:42dd806185f43e1ad9f219a3332a22ca304c6548
Branches Tags
freeCodeCamp.org-Front-End-Dev-Libraries/Random-Quote-Machine:master
..
compare: freeCodeCamp.org-Front-End-Dev-Libraries/Random-Quote-Machine:master
Branches Tags
freeCodeCamp.org-Front-End-Dev-Libraries/Random-Quote-Machine:master

8 Commits
42dd806185 .. master

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
5 changed files with 27 additions and 16 deletions
Expand all files Collapse all files
README.md
+13 -7
View File
@@ -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) **Profile:** [https://www.freecodecamp.org/radii](https://www.freecodecamp.org/radii)
@@ -13,20 +15,24 @@ cd random-quote-machine
npm install npm install
npm run build npm run build
cd .. 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 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: ## 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} ```{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} ```{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.
docker-compose.yml
+9
View File
@@ -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
dockerfile
+1 -2
View File
@@ -1,4 +1,3 @@
FROM nginx FROM nginx
COPY nginx.conf / COPY --chmod=755 ./ /usr/share/nginx/html
COPY random-quote-machine/build /usr/share/nginx/html
random-quote-machine/public/index.html
+2 -5
View File
@@ -5,10 +5,7 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta name="description" content="Random quote machine" />
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a 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. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Random Quote Machine</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
random-quote-machine/src/App.js
+2 -2
View File
@@ -57,14 +57,14 @@ class App extends React.Component {
</p> </p>
<div className="row justify-content-center"> <div className="row justify-content-center">
<button <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" id="new-quote"
onClick={this.handleNewQuote} onClick={this.handleNewQuote}
> >
<FontAwesomeIcon icon={faShuffle} /> Random Quote <FontAwesomeIcon icon={faShuffle} /> Random Quote
</button> </button>
<a <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( href={`https://twitter.com/intent/tweet?text="${encodeURI(
`${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n` `${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n`
)}&hashtags=quotes,freeCodeCamp`} )}&hashtags=quotes,freeCodeCamp`}