Styling
* custom font `quicksand` * font-awesome icons * random background and text colors * quote center alignment and author name right * layout etc. like horizontally and vertically center in a card
This commit is contained in:
parent
39de62a7cc
commit
1813e6ae02
119
random-quote-machine/package-lock.json
generated
119
random-quote-machine/package-lock.json
generated
@ -8,6 +8,11 @@
|
||||
"name": "random-quote-machine",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.1.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.1.1",
|
||||
"@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.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
@ -2159,6 +2164,75 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
|
||||
"integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==",
|
||||
"hasInstallScript": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-svg-core": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
|
||||
"integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-brands-svg-icons": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz",
|
||||
"integrity": "sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-regular-svg-icons": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz",
|
||||
"integrity": "sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
|
||||
"integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/react-fontawesome": {
|
||||
"version": "0.1.18",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
|
||||
"integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
|
||||
"react": ">=16.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
|
||||
@ -18298,6 +18372,51 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
|
||||
"integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA=="
|
||||
},
|
||||
"@fortawesome/fontawesome-svg-core": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
|
||||
"integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.1.1"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-brands-svg-icons": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz",
|
||||
"integrity": "sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.1.1"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-regular-svg-icons": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz",
|
||||
"integrity": "sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.1.1"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
|
||||
"integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.1.1"
|
||||
}
|
||||
},
|
||||
"@fortawesome/react-fontawesome": {
|
||||
"version": "0.1.18",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
|
||||
"integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
|
||||
"requires": {
|
||||
"prop-types": "^15.8.1"
|
||||
}
|
||||
},
|
||||
"@humanwhocodes/config-array": {
|
||||
"version": "0.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
|
||||
|
||||
@ -3,6 +3,11 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.1.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.1.1",
|
||||
"@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.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
import React from "react";
|
||||
import { faTwitter } from "@fortawesome/free-brands-svg-icons";
|
||||
import { faShuffle } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faQuoteLeft } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faQuoteRight } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faCode } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import "./App.scss";
|
||||
import { quotesAndAuthors } from "./quotes";
|
||||
|
||||
@ -8,50 +14,77 @@ class App extends React.Component {
|
||||
this.state = {
|
||||
quotesAndAuthors: quotesAndAuthors,
|
||||
randomIndex: Math.floor(Math.random() * quotesAndAuthors.length),
|
||||
randomColorClass: `color-${Math.floor(Math.random() * 5) + 1}`,
|
||||
};
|
||||
this.state.randomQuote =
|
||||
this.state.quotesAndAuthors[this.state.randomIndex].quote;
|
||||
this.state.randomAuthor =
|
||||
this.state.quotesAndAuthors[this.state.randomIndex].author;
|
||||
this.handleNewQuote = this.handleNewQuote.bind(this);
|
||||
this.state.randomBackgroundColorClass = `bg-${this.state.randomColorClass}`;
|
||||
}
|
||||
|
||||
handleNewQuote() {
|
||||
this.setState((state) => ({
|
||||
randomIndex: Math.floor(Math.random() * state.quotesAndAuthors.length),
|
||||
randomColorClass: `color-${Math.floor(Math.random() * 10) + 1}`,
|
||||
}));
|
||||
this.setState((state) => ({
|
||||
randomQuote: state.quotesAndAuthors[state.randomIndex].quote,
|
||||
randomAuthor: state.quotesAndAuthors[state.randomIndex].author,
|
||||
randomBackgroundColorClass: `bg-${state.randomColorClass}`,
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="body">
|
||||
<div className="quote-box" id="quote-box">
|
||||
<p className="text" id="text">
|
||||
{this.state.randomQuote}
|
||||
</p>
|
||||
<p className="author" id="author">
|
||||
{this.state.randomAuthor}
|
||||
</p>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
id="new-quote"
|
||||
onClick={this.handleNewQuote}
|
||||
>
|
||||
New Quote
|
||||
</button>
|
||||
<a
|
||||
href={`https://twitter.com/intent/tweet?text="${encodeURI(
|
||||
`${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n`
|
||||
)}&hashtags=quotes,freeCodeCamp`}
|
||||
className=""
|
||||
id="tweet-quote"
|
||||
>
|
||||
Tweet Quote
|
||||
</a>
|
||||
<div
|
||||
className={`body d-flex align-items-center min-vh-100 ${this.state.randomBackgroundColorClass}`}
|
||||
>
|
||||
<div className="container">
|
||||
<div className="card">
|
||||
<div className="card-body " id="quote-box">
|
||||
<h4 className={`quote ${this.state.randomColorClass}`} id="text">
|
||||
<FontAwesomeIcon icon={faQuoteLeft} />
|
||||
{` ${this.state.randomQuote} `}
|
||||
<FontAwesomeIcon icon={faQuoteRight} />
|
||||
</h4>
|
||||
<p
|
||||
className={`author ${this.state.randomColorClass}`}
|
||||
id="author"
|
||||
>
|
||||
- {this.state.randomAuthor}
|
||||
</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}`}
|
||||
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"
|
||||
href={`https://twitter.com/intent/tweet?text="${encodeURI(
|
||||
`${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n`
|
||||
)}&hashtags=quotes,freeCodeCamp`}
|
||||
id="tweet-quote"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTwitter} /> Tweet Quote
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p>
|
||||
<a
|
||||
className="link-light"
|
||||
href="https://radii.dev/freeCodeCamp.org-Front-End-Dev-Libraries/Build-a-Random-Quote-Machine"
|
||||
>
|
||||
<FontAwesomeIcon icon={faCode} /> {`Source Code & License`}
|
||||
</a>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1 +1,66 @@
|
||||
@font-face {
|
||||
font-family: "quicksand";
|
||||
/* license: url("https://radii.page/fonts/Quicksand-Regular.txt"); */
|
||||
src: local("quicksand") url("./quicksand.ttf") format("tff");
|
||||
}
|
||||
|
||||
$font-family-base: quicksand, roboto !default;
|
||||
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
$colors: #73a857, #3f2e7a, #bdbb99, #77b1a9, #fb6964, #9b59b6, #2c3e50, #27ae60,
|
||||
#f39c12, #16a085;
|
||||
|
||||
@for $i from 1 through length($colors) {
|
||||
$color: nth($colors, $i);
|
||||
.color-#{$i} {
|
||||
color: $color;
|
||||
}
|
||||
.bg-color-#{$i} {
|
||||
background-color: $color;
|
||||
color: white;
|
||||
&:hover {
|
||||
background-color: darken($color, 10%);
|
||||
color: white;
|
||||
}
|
||||
&:focus {
|
||||
background-color: $color;
|
||||
color: white;
|
||||
}
|
||||
&:focus:hover {
|
||||
background-color: darken($color, 10%);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quote {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.author {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.bg-color-twitter {
|
||||
$twitter-color: #1d9bf0;
|
||||
background-color: $twitter-color;
|
||||
color: white;
|
||||
&:hover {
|
||||
background-color: darken($twitter-color, 10%);
|
||||
color: white;
|
||||
}
|
||||
&:focus {
|
||||
background-color: $twitter-color;
|
||||
color: white;
|
||||
}
|
||||
&:focus:hover {
|
||||
background-color: darken($twitter-color, 10%);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
BIN
random-quote-machine/src/quicksand.ttf
Normal file
BIN
random-quote-machine/src/quicksand.ttf
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user