trent/fcc-challenges
1
0
Fork 0
mirror of https://github.com/TrentSPalmer/fcc-challenges.git synced 2024-11-21 19:31:29 -08:00
Code Issues Projects Releases Wiki Activity

update random-quote-machine

Browse Source
This commit is contained in:
Trent Palmer 2020-04-06 03:19:43 -07:00
parent 2627db15bd
commit 5ef5e70118
21 changed files with 128 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
random-quote-machine/build/asset-manifest.json
View File

@ -1,22 +1,22 @@
{
"files": {
"main.css": "/fcc-challenges/random-quote-machine/build/static/css/main.899e3888.chunk.css",
"main.js": "/fcc-challenges/random-quote-machine/build/static/js/main.b6838136.chunk.js",
"main.js.map": "/fcc-challenges/random-quote-machine/build/static/js/main.b6838136.chunk.js.map",
"main.css": "/fcc-challenges/random-quote-machine/build/static/css/main.5a3875ee.chunk.css",
"main.js": "/fcc-challenges/random-quote-machine/build/static/js/main.13413d36.chunk.js",
"main.js.map": "/fcc-challenges/random-quote-machine/build/static/js/main.13413d36.chunk.js.map",
"runtime-main.js": "/fcc-challenges/random-quote-machine/build/static/js/runtime-main.905bafdb.js",
"runtime-main.js.map": "/fcc-challenges/random-quote-machine/build/static/js/runtime-main.905bafdb.js.map",
"static/js/2.a720d7f8.chunk.js": "/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js",
"static/js/2.a720d7f8.chunk.js.map": "/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js.map",
"index.html": "/fcc-challenges/random-quote-machine/build/index.html",
"precache-manifest.00884933380590505cabd88c9e1af2d6.js": "/fcc-challenges/random-quote-machine/build/precache-manifest.00884933380590505cabd88c9e1af2d6.js",
"precache-manifest.46f3e4e9f0fc0a551e5d11c3cf0c4b89.js": "/fcc-challenges/random-quote-machine/build/precache-manifest.46f3e4e9f0fc0a551e5d11c3cf0c4b89.js",
"service-worker.js": "/fcc-challenges/random-quote-machine/build/service-worker.js",
"static/css/main.899e3888.chunk.css.map": "/fcc-challenges/random-quote-machine/build/static/css/main.899e3888.chunk.css.map",
"static/css/main.5a3875ee.chunk.css.map": "/fcc-challenges/random-quote-machine/build/static/css/main.5a3875ee.chunk.css.map",
"static/js/2.a720d7f8.chunk.js.LICENSE.txt": "/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js.LICENSE.txt"
},
"entrypoints": [
"static/js/runtime-main.905bafdb.js",
"static/js/2.a720d7f8.chunk.js",
"static/css/main.899e3888.chunk.css",
"static/js/main.b6838136.chunk.js"
"static/css/main.5a3875ee.chunk.css",
"static/js/main.13413d36.chunk.js"
]
}

2
random-quote-machine/build/index.html
View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="#"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/fcc-challenges/random-quote-machine/build/manifest.json"/><title>Random Quote Machine - Build a Random Quote Machine - Front End Libraries Projects</title><link href="/fcc-challenges/random-quote-machine/build/static/css/main.899e3888.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div><script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script></div><br/></div><script>!function(e){function r(r){for(var n,a,l=r[0],i=r[1],c=r[2],p=0,s=[];p<l.length;p++)a=l[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var i=t[l];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/fcc-challenges/random-quote-machine/build/";var l=this["webpackJsonprandom-quote-machine"]=this["webpackJsonprandom-quote-machine"]||[],i=l.push.bind(l);l.push=r,l=l.slice();for(var c=0;c<l.length;c++)r(l[c]);var f=i;t()}([])</script><script src="/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js"></script><script src="/fcc-challenges/random-quote-machine/build/static/js/main.b6838136.chunk.js"></script></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="#"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/fcc-challenges/random-quote-machine/build/manifest.json"/><title>Random Quote Machine - Build a Random Quote Machine - Front End Libraries Projects</title><link href="/fcc-challenges/random-quote-machine/build/static/css/main.5a3875ee.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div><script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script></div><br/></div><script>!function(e){function r(r){for(var n,a,l=r[0],i=r[1],c=r[2],p=0,s=[];p<l.length;p++)a=l[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var i=t[l];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/fcc-challenges/random-quote-machine/build/";var l=this["webpackJsonprandom-quote-machine"]=this["webpackJsonprandom-quote-machine"]||[],i=l.push.bind(l);l.push=r,l=l.slice();for(var c=0;c<l.length;c++)r(l[c]);var f=i;t()}([])</script><script src="/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js"></script><script src="/fcc-challenges/random-quote-machine/build/static/js/main.13413d36.chunk.js"></script></body></html>

10
random-quote-machine/build/precache-manifest.00884933380590505cabd88c9e1af2d6.js → random-quote-machine/build/precache-manifest.46f3e4e9f0fc0a551e5d11c3cf0c4b89.js
View File

@ -1,11 +1,11 @@
self.__precacheManifest = (self.__precacheManifest || []).concat([
{
"revision": "6a2813c9c6957d8e6199403c5c886df0",
"revision": "99ef77b17413e6450fa3790ae1af27ad",
"url": "/fcc-challenges/random-quote-machine/build/index.html"
},
{
"revision": "048b92ff9f1302b8fcae",
"url": "/fcc-challenges/random-quote-machine/build/static/css/main.899e3888.chunk.css"
"revision": "cccf938117650c611ad2",
"url": "/fcc-challenges/random-quote-machine/build/static/css/main.5a3875ee.chunk.css"
},
{
"revision": "d3143f0d5b138769b7fe",
@ -16,8 +16,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js.LICENSE.txt"
},
{
"revision": "048b92ff9f1302b8fcae",
"url": "/fcc-challenges/random-quote-machine/build/static/js/main.b6838136.chunk.js"
"revision": "cccf938117650c611ad2",
"url": "/fcc-challenges/random-quote-machine/build/static/js/main.13413d36.chunk.js"
},
{
"revision": "eb03df68ff6e16ade204",

2
random-quote-machine/build/service-worker.js
View File

@ -14,7 +14,7 @@
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
importScripts(
"/fcc-challenges/random-quote-machine/build/precache-manifest.00884933380590505cabd88c9e1af2d6.js"
"/fcc-challenges/random-quote-machine/build/precache-manifest.46f3e4e9f0fc0a551e5d11c3cf0c4b89.js"
);
self.addEventListener('message', (event) => {

2
random-quote-machine/build/static/css/main.5a3875ee.chunk.css Normal file
View File

@ -0,0 +1,2 @@
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{text-align:center}.App-header{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin)}.blue-background{color:#fff}.yellow-background{color:#000}.QuoteBox{background-color:#fff;text-align:center;max-width:80%;max-height:60vh;width:800px;height:500px;border-radius:10px;box-shadow:4px 3px #000}.red-complimentary-background{background-color:#006aff;color:#fff}.blue-complimentary-background{background-color:#ff1500;color:#fff}.yellow-complimentary-background{background-color:#9400ff;color:#000}.quote-box-top{height:20%}.quote-box-middle{height:40%;display:flex;flex-direction:column;justify-content:space-around}.quote-box-bottom{height:40%;display:flex;flex-direction:row;justify-content:flex-start}.quote-box-underneath{height:0%}.quote-box-bottom-left,.quote-box-bottom-right{width:50%;display:flex;flex-direction:row;justify-content:space-around}@media (orientation:portrait) and (max-device-width:767px){.QuoteBox{max-height:60vh}.quote-box-top{height:10%}.quote-box-middle{height:50%}.quote-box-bottom{height:40%}.quote-box-underneath{height:0%}}.NewQuote{text-align:center;height:45%;width:45%;border:none;border-radius:5px;font-size:.8em;font-weight:700;margin:auto}.NewQuote:focus{outline:0}@media (orientation:portrait) and (max-device-width:767px){.NewQuote{height:40%}}@media (orientation:landscape) and (max-device-height:450px){.NewQuote{height:60%;font-size:1em}}.TweetQuote{height:45%;width:45%;border:none;border-radius:5px;font-size:2.2em;font-weight:700;display:flex;flex-direction:column;margin:auto}.TweetQuote:focus{outline:0}.red-background{background-color:#ff1500;color:#000}.blue-background{background-color:#006aff;color:#eaff00}.yellow-background{background-color:#eaff00;color:#006bff}.TweetQuote>a{margin:auto}@media (orientation:portrait) and (max-device-width:767px){.TweetQuote{height:40%}}@media (orientation:landscape) and (max-device-height:450px){.TweetQuote{height:60%}}.red{color:#00ff94}.blue,.yellow{color:#fff}.text{font-weight:700}.author,.text{margin-left:10%;margin-right:10%}.author{font-style:oblique}p{font-size:.7em;margin:auto}@media (orientation:portrait) and (max-device-width:767px){p{font-size:.9em}}@media (orientation:landscape) and (max-device-height:450px){p{font-size:.9em}}
/*# sourceMappingURL=main.5a3875ee.chunk.css.map */

1
random-quote-machine/build/static/css/main.5a3875ee.chunk.css.map Normal file
View File

File diff suppressed because one or more lines are too long

2
random-quote-machine/build/static/css/main.899e3888.chunk.css
View File

@ -1,2 +0,0 @@
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{text-align:center}.App-header{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin)}.blue-background{color:#fff}.yellow-background{color:#000}.QuoteBox{background-color:#fff;text-align:center;max-width:80%;max-height:60vh;width:500px;height:500px;border-radius:10px;box-shadow:4px 3px #000}.red-complimentary-background{background-color:#0080ff;color:#fff}.blue-complimentary-background{background-color:#7fff00;color:#fff}.yellow-complimentary-background{background-color:#8000ff;color:#000}.quote-box-top{height:70%;display:flex;flex-direction:column;justify-content:space-around}.quote-box-bottom{height:30%;display:flex;flex-direction:row;justify-content:flex-start}.quote-box-bottom-left,.quote-box-bottom-right{width:50%;display:flex;flex-direction:row;justify-content:space-around}.NewQuote{text-align:center;height:60%;width:45%;border:none;border-radius:5px;font-size:.8em;font-weight:700}.NewQuote:focus{outline:0}.TweetQuote{height:60%;width:45%;border:none;border-radius:5px;font-size:2.2em;font-weight:700;display:flex;flex-direction:column;justify-content:center;align-content:center}.tweetQuoteContainer{height:100%;width:100%;display:flex;flex-direction:row;justify-content:space-around}.TweetQuote:focus{outline:0}.red-background{background-color:red;color:#000}.blue-background{background-color:#00f;color:#ff8000}.yellow-background{background-color:#ff0;color:#0080ff}.red{color:#00ff80}.blue{color:#00f}.yellow{color:#ff0}.text{font-weight:700}.author,.text{margin-left:10%;margin-right:10%}.author{font-style:oblique}
/*# sourceMappingURL=main.899e3888.chunk.css.map */

1
random-quote-machine/build/static/css/main.899e3888.chunk.css.map
View File

@ -1 +0,0 @@
{"version":3,"sources":["index.css","App.css","QuoteBox.css","NewQuote.css","TweetQuote.css","TextAuthor.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,mJAEY,CACZ,kCAAmC,CACnC,iCACF,CAEA,KACE,yEAEF,CCZA,KACE,iBACF,CAEA,YACE,gBAAiB,CACjB,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,sBAAuB,CACvB,4BACF,CAOA,iBAEE,UACF,CAEA,mBAEE,UACF,CC1BA,UACE,qBAAuB,CACvB,iBAAkB,CAClB,aAAc,CACd,eAAgB,CAChB,WAAY,CACZ,YAAa,CACb,kBAAmB,CACnB,uBACF,CAEA,8BACE,wBAAyB,CACzB,UACF,CAEA,+BACE,wBAAyB,CACzB,UACF,CAEA,iCACE,wBAAyB,CACzB,UACF,CAEA,eACE,UAAW,CACX,YAAa,CACb,qBAAsB,CACtB,4BACF,CAEA,kBACE,UAAW,CACX,YAAa,CACb,kBAAmB,CACnB,0BACF,CASA,+CACE,SAAU,CACV,YAAa,CACb,kBAAmB,CACnB,4BACF,CCpDA,UACE,iBAAkB,CAClB,UAAW,CACX,SAAU,CACV,WAAY,CACZ,iBAAkB,CAClB,cAAgB,CAChB,eACF,CAEA,gBACE,SACF,CCZA,YACE,UAAW,CACX,SAAU,CACV,WAAY,CACZ,iBAAkB,CAClB,eAAgB,CAChB,eAAiB,CACjB,YAAa,CACb,qBAAsB,CACtB,sBAAuB,CACvB,oBACF,CAEA,qBACE,WAAY,CACZ,UAAW,CACX,YAAa,CACb,kBAAmB,CACnB,4BACF,CAEA,kBACE,SACF,CAEA,gBACE,oBAAyB,CACzB,UACF,CAEA,iBACE,qBAAyB,CACzB,aACF,CAEA,mBACE,qBAAyB,CACzB,aACF,CCtCA,KACE,aACF,CAEA,MACE,UACF,CAEA,QACE,UACF,CAEA,MAGE,eACF,CAEA,cALE,eAAgB,CAChB,gBAQF,CAJA,QAGE,kBACF","file":"main.899e3888.chunk.css","sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n",".App {\n text-align: center;\n}\n\n.App-header {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n}\n\n.red-background {\n background-color: #ff0000;\n color: black;\n}\n\n.blue-background {\n background-color: #0000ff;\n color: white;\n}\n\n.yellow-background {\n background-color: #ffff00;\n color: black;\n}\n",".QuoteBox {\n background-color: white;\n text-align: center;\n max-width: 80%;\n max-height: 60vh;\n width: 500px;\n height: 500px;\n border-radius: 10px;\n box-shadow: 4px 3px black;\n}\n\n.red-complimentary-background {\n background-color: #0080ff;\n color: white;\n}\n\n.blue-complimentary-background {\n background-color: #7fff00;\n color: white;\n}\n\n.yellow-complimentary-background {\n background-color: #8000ff;\n color: black;\n}\n\n.quote-box-top {\n height: 70%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n}\n\n.quote-box-bottom {\n height: 30%;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n}\n\n.quote-box-bottom-left {\n width: 50%;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n\n.quote-box-bottom-right {\n width: 50%;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n",".NewQuote {\n text-align: center;\n height: 60%;\n width: 45%;\n border: none;\n border-radius: 5px;\n font-size: 0.8em;\n font-weight: bold;\n}\n\n.NewQuote:focus {\n outline: 0;\n}\n\n.red-background {\n background-color: #ff0000;\n color: #000000;\n}\n\n.blue-background {\n background-color: #0000ff;\n color: #ff8000;\n}\n\n.yellow-background {\n background-color: #ffff00;\n color: #0080ff;\n}\n",".TweetQuote {\n height: 60%;\n width: 45%;\n border: none;\n border-radius: 5px;\n font-size: 2.2em;\n font-weight: bold;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-content: center;\n}\n\n.tweetQuoteContainer {\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n\n.TweetQuote:focus {\n outline: 0;\n}\n\n.red-background {\n background-color: #ff0000;\n color: #000000;\n}\n\n.blue-background {\n background-color: #0000ff;\n color: #ff8000;\n}\n\n.yellow-background {\n background-color: #ffff00;\n color: #0080ff;\n}\n",".red {\n color: #00ff80;\n}\n\n.blue {\n color: #0000ff;\n}\n\n.yellow {\n color: #ffff00;\n}\n\n.text {\n margin-left: 10%;\n margin-right: 10%;\n font-weight: bold;\n}\n\n.author {\n margin-left: 10%;\n margin-right: 10%;\n font-style: oblique;\n}\n"]}

2
random-quote-machine/build/static/js/main.13413d36.chunk.js Normal file
View File

File diff suppressed because one or more lines are too long

1
random-quote-machine/build/static/js/main.13413d36.chunk.js.map Normal file
View File

File diff suppressed because one or more lines are too long

2
random-quote-machine/build/static/js/main.b6838136.chunk.js
View File

File diff suppressed because one or more lines are too long

1
random-quote-machine/build/static/js/main.b6838136.chunk.js.map
View File

File diff suppressed because one or more lines are too long

6
random-quote-machine/src/App.css
View File

@ -12,16 +12,16 @@
}
.red-background {
background-color: #ff0000;
background-color: #ff1500;
color: black;
}
.blue-background {
background-color: #0000ff;
background-color: #006aff;
color: white;
}
.yellow-background {
background-color: #ffff00;
background-color: #eaff00;
color: black;
}

26
random-quote-machine/src/NewQuote.css
View File

@ -1,11 +1,12 @@
.NewQuote {
text-align: center;
height: 60%;
height: 45%;
width: 45%;
border: none;
border-radius: 5px;
font-size: 0.8em;
font-weight: bold;
margin: auto;
}
.NewQuote:focus {
@ -13,16 +14,29 @@
}
.red-background {
background-color: #ff0000;
background-color: #ff1500;
color: #000000;
}
.blue-background {
background-color: #0000ff;
color: #ff8000;
background-color: #006Aff;
color: #eaff00;
}
.yellow-background {
background-color: #ffff00;
color: #0080ff;
background-color: #eaff00;
color: #006bff;
}
@media (orientation: portrait) and (max-device-width: 767px) {
.NewQuote {
height: 40%;
}
}
@media (orientation: landscape) and (max-device-height: 450px) {
.NewQuote {
height: 60%;
font-size: 1em;
}
}

6
random-quote-machine/src/NewQuote.js
View File

@ -30,11 +30,7 @@ class NewQuote extends React.Component {
const colors = ["red-background", "blue-background", "yellow-background"];
const newQuoteClass = "NewQuote " + colors[this.props.colorCount];
return (
<button
onClick={this.handleClick}
className={newQuoteClass}
id="new-quote"
>
<button onClick={this.handleClick} className={newQuoteClass} id="new-quote">
Click Me!
</button>
);

38
random-quote-machine/src/QuoteBox.css
View File

@ -3,41 +3,49 @@
text-align: center;
max-width: 80%;
max-height: 60vh;
width: 500px;
width: 800px;
height: 500px;
border-radius: 10px;
box-shadow: 4px 3px black;
}
.red-complimentary-background {
background-color: #0080ff;
background-color: #006aff;
color: white;
}
.blue-complimentary-background {
background-color: #7fff00;
background-color: #ff1500;
color: white;
}
.yellow-complimentary-background {
background-color: #8000ff;
background-color: #9400ff;
color: black;
}
.quote-box-top {
height: 70%;
height: 20%;
}
.quote-box-middle {
height: 40%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.quote-box-bottom {
height: 30%;
height: 40%;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.quote-box-underneath {
height: 0%;
}
.quote-box-bottom-left {
width: 50%;
display: flex;
@ -51,3 +59,21 @@
flex-direction: row;
justify-content: space-around;
}
@media (orientation: portrait) and (max-device-width: 767px) {
.QuoteBox {
max-height: 60vh;
}
.quote-box-top {
height: 10%;
}
.quote-box-middle {
height: 50%;
}
.quote-box-bottom {
height: 40%;
}
.quote-box-underneath {
height: 0%;
}
}

4
random-quote-machine/src/QuoteBox.js
View File

@ -19,6 +19,8 @@ class QuoteBox extends React.Component {
return (
<div className={quoteBoxClass} id="quote-box">
<div className="quote-box-top">
</div>
<div className="quote-box-middle">
<TextAuthor />
</div>
<div className="quote-box-bottom">
@ -29,6 +31,8 @@ class QuoteBox extends React.Component {
<NewQuote />
</div>
</div>
<div className="quote-box-underneath">
</div>
</div>
);
}

23
random-quote-machine/src/TextAuthor.css
View File

@ -1,13 +1,13 @@
.red {
color: #00ff80;
color: #00ff94;
}
.blue {
color: #0000ff;
color: white;
}
.yellow {
color: #ffff00;
color: white;
}
.text {
@ -21,3 +21,20 @@
margin-right: 10%;
font-style: oblique;
}
p {
font-size: .7em;
margin: auto;
}
@media (orientation: portrait) and (max-device-width: 767px) {
p {
font-size: .9em;
}
}
@media (orientation: landscape) and (max-device-height: 450px) {
p {
font-size: .9em;
}
}

2
random-quote-machine/src/TextAuthor.js
View File

@ -27,7 +27,7 @@ class TextAuthor extends React.Component {
const textClass = "text " + colors[this.props.colorCount];
const authorClass = "author " + colors[this.props.colorCount];
return (
<div style={{ fontSize: ".7em" }}>
<div>
<p className={textClass} id="text">
{quote}
</p>

39
random-quote-machine/src/TweetQuote.css
View File

@ -1,5 +1,5 @@
.TweetQuote {
height: 60%;
height: 45%;
width: 45%;
border: none;
border-radius: 5px;
@ -7,16 +7,7 @@
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.tweetQuoteContainer {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
margin: auto;
}
.TweetQuote:focus {
@ -24,16 +15,32 @@
}
.red-background {
background-color: #ff0000;
background-color: #ff1500;
color: #000000;
}
.blue-background {
background-color: #0000ff;
color: #ff8000;
background-color: #006aff;
color: #eaff00;
}
.yellow-background {
background-color: #ffff00;
color: #0080ff;
background-color: #eaff00;
color: #006bff;
}
.TweetQuote > a {
margin: auto;
}
@media (orientation: portrait) and (max-device-width: 767px) {
.TweetQuote {
height: 40%;
}
}
@media (orientation: landscape) and (max-device-height: 450px) {
.TweetQuote {
height: 60%;
}
}

14
random-quote-machine/src/TweetQuote.js
View File

@ -21,21 +21,11 @@ class TweetQuote extends React.Component {
);
}
return (
<div className="tweetQuoteContainer">
<div className={tweetQuoteClass}>
<a
href={href}
target="_blank"
rel="noopener noreferrer"
id="tweet-quote"
>
<FontAwesomeIcon
icon={faTwitter}
className={colors[this.props.colorCount]}
/>
<a href={href} target="_blank" rel="noopener noreferrer" id="tweet-quote">
<FontAwesomeIcon icon={faTwitter} className={colors[this.props.colorCount]}/>
</a>
</div>
</div>
);
}
}