diff --git a/package.json b/package.json
index d429d405..0a396063 100644
--- a/package.json
+++ b/package.json
@@ -5,17 +5,17 @@
"license": "MIT",
"version": "2.0.1",
"dependencies": {
- "@material-ui/core": "^4.5.1",
- "@material-ui/icons": "^4.5.1",
- "react": "^16.10.2",
- "react-dom": "^16.10.2",
+ "@material-ui/core": "^4.6.0",
+ "@material-ui/icons": "^4.6.0",
+ "react": "^16.11.0",
+ "react-dom": "^16.11.0",
"react-scripts": "3.2.0",
"unfetch": "^4.1.0"
},
"devDependencies": {
- "eslint": "^6.5.1",
+ "eslint": "^6.6.0",
"npm-run-all": "^4.1.5",
- "sass": "^1.23.0"
+ "sass": "^1.23.3"
},
"scripts": {
"start": "react-scripts start",
diff --git a/src/App.jsx b/src/App.jsx
index 9b7abed2..4f078d01 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import Greeting from './components/Greeting';
import Quote from './components/Quote';
import Search from './components/Search';
import Credit from './components/Credit';
+import Navbar from './components/Navbar';
import './css/index.css';
//* App
diff --git a/src/components/Background.jsx b/src/components/Background.jsx
index eaf03fb6..71fd51da 100644
--- a/src/components/Background.jsx
+++ b/src/components/Background.jsx
@@ -3,7 +3,7 @@ import React from 'react';
import Fetch from 'unfetch';
export default class Background extends React.Component {
- async getAndSetBackground() {
+ async setBackground() {
try { // First we try and get an image from the API...
let data = await Fetch('https://api.muetab.xyz/getImage?category=Outdoors');
data = await data.json();
@@ -19,7 +19,7 @@ export default class Background extends React.Component {
}
componentDidMount() {
- this.getAndSetBackground();
+ this.setBackground();
}
render() {
diff --git a/src/components/Clock.jsx b/src/components/Clock.jsx
index 1869d296..0854701d 100644
--- a/src/components/Clock.jsx
+++ b/src/components/Clock.jsx
@@ -17,7 +17,7 @@ export default class Clock extends React.Component {
if (h > 12) h = h - 12;
- this.setState({ date: `${('0' + h).slice(-2)}:${('0' + today.getMinutes()).slice(-2)}`, ampm: h >= 12 ? 'PM' : 'AM' });
+ this.setState({ date: `${('0' + h).slice(-2)}:${('0' + today.getMinutes()).slice(-2)}`, ampm: h >= 12 ? 'AM' : 'PM' });
this.timeout = setTimeout(() => this.startTime(), 500);
}
diff --git a/src/components/Greeting.jsx b/src/components/Greeting.jsx
index 8fe08bee..a3ff0463 100644
--- a/src/components/Greeting.jsx
+++ b/src/components/Greeting.jsx
@@ -14,6 +14,12 @@ export default class Greeting extends React.Component {
let t = 'Good evening'; // Set the default time string to "Good evening"
if (h < 12) t = 'Good morning'; // If it's before 12am, set the time string to "Good morning"
else if (h < 18) t = 'Good afternoon'; // If it's before 6pm, set the time string to "Good afternoon"
+
+ // Events
+ const today = new Date();
+ if (today.getMonth() === 0 && today.getDate() === 1) t = 'Happy new year';
+ else if (today.getMonth() === 11 && today.getDate() === 25) t = 'Merry Christmas';
+ else if (today.getMonth() === 9 && today.getDate() === 31) t = 'Happy Halloween';
this.setState({ greeting: t }); // Set the state to the time string
}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
new file mode 100644
index 00000000..e5eca673
--- /dev/null
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,19 @@
+//* Imports
+import RefreshIcon from '@material-ui/icons/Refresh';
+import LocalPizzaIcon from '@material-ui/icons/LocalPizza';
+import React from 'react';
+
+export default class Search extends React.Component {
+ render() {
+ return (
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/components/Quote.jsx b/src/components/Quote.jsx
index a69e3b30..21b1e102 100644
--- a/src/components/Quote.jsx
+++ b/src/components/Quote.jsx
@@ -18,8 +18,9 @@ export default class Quote extends React.Component {
data = await data.json();
this.setState({ quote: data.quote, author: data.author });
} catch (e) { // ..and if that fails we load one locally
- const num = Math.floor(Math.random() * (20 - 1 + 1)) + 1; // Get random number between 1-20
- this.setState({ quote: quotes[num].quote, author: quotes[num].author });
+ // const num = Math.floor(Math.random() * (20 - 1 + 1)) + 1; // Get random number between 1-20
+ const quote = quotes[Math.floor(Math.random() * quotes.length)];
+ this.setState({ quote: quote.quote, author: quote.author });
}
}
diff --git a/src/css/index.css b/src/css/index.css
index ba78553d..4ae8655e 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1 +1 @@
-.clock{font-size:4em;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}.ampm{font-size:.5em}.greeting{margin:0;font-size:1.6em;text-shadow:0 0 25px rgba(0,0,0,.3)}.quote{font-size:.8em;text-shadow:0 0 25px rgba(0,0,0,.3)}@media screen and (min-width: 600px){.quote{margin-left:30%;margin-right:30%}}.quoteauthor{font-size:.9em;letter-spacing:.5px;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}i.material-icons,h1.quoteauthor{display:inline}.searchbar{position:absolute;left:20px;top:20px;display:flex;flex-direction:row;display:block;color:#fff;font-family:"Lexend Deca"}.searchbar button{cursor:pointer;outline:none;display:inline}.searchbar button i.material-icons{text-shadow:0 0 25px rgba(0,0,0,.3)}.searchbar input[type=text]{font-size:calc(5px + 1.2vmin);background:none;border:2px solid #fff;padding:10px;color:#fff;position:absolute;box-shadow:0 0 25px rgba(0,0,0,.3);z-index:1}.input.searchtext{border:none}.searchbarform{display:flex;flex-direction:row;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}#location,#photographer{font-size:calc(10px + 1.2vmin);text-shadow:0 0 25px rgba(0,0,0,.3);text-overflow:ellipsis}#location{margin-bottom:-10px}#photographer{position:absolute;bottom:10px;left:50px;width:1000px}.locationicon{font-size:calc(10px + 1.2vmin);cursor:pointer}.MuiSvgIcon-root{position:absolute;bottom:2px;left:2px;width:100em;height:100em;font-size:2rem;text-shadow:0 2px 25px rgba(0,0,0,.3)}.credits{bottom:2px;left:0px;position:absolute;text-align:left;min-width:50px}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted #000;bottom:15px;left:10px}.tooltip .tooltiptext{visibility:hidden;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:20px;position:absolute;z-index:1;position:absolute;bottom:40px;left:60px;margin-left:-60px;opacity:0;transition:opacity 1s}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}body{background:#2f3640;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Lexend Deca";overflow:hidden}#center{margin-left:2vw;margin-right:2vw;display:flex;flex-direction:column;justify-content:center;font-size:calc(10px + 2vmin);text-align:center}::placeholder{color:#fff;opacity:1}#root{background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:fixed;min-height:100vh;display:grid;color:#fff}@font-face{font-family:"Lexend Deca";src:url("/./fonts/LexendDeca-Regular.woff2") format("woff2")}/*# sourceMappingURL=index.css.map */
+.clock{font-size:4em;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}.ampm{font-size:.5em}.greeting{margin:0;font-size:1.6em;text-shadow:0 0 25px rgba(0,0,0,.3)}.quote{font-size:.8em;text-shadow:0 0 25px rgba(0,0,0,.3)}@media screen and (min-width: 600px){.quote{margin-left:30%;margin-right:30%}}.quoteauthor{font-size:.9em;letter-spacing:.5px;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}i.material-icons,h1.quoteauthor{display:inline}.searchbar{position:absolute;left:20px;top:20px;display:flex;flex-direction:row;display:block;color:#fff;font-family:"Lexend Deca"}.searchbar button{cursor:pointer;outline:none;display:inline}.searchbar button i.material-icons{text-shadow:0 0 25px rgba(0,0,0,.3)}.searchbar input[type=text]{font-size:calc(5px + 1.2vmin);background:none;border:2px solid #fff;padding:10px;color:#fff;position:absolute;box-shadow:0 0 25px rgba(0,0,0,.3);z-index:1}.input.searchtext{border:none}.searchbarform{display:flex;flex-direction:row;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}#location,#photographer{font-size:calc(10px + 1.2vmin);text-shadow:0 0 25px rgba(0,0,0,.3);text-overflow:ellipsis}#location{margin-bottom:-10px}#photographer{position:absolute;bottom:10px;left:50px;width:1000px}.locationicon{font-size:calc(10px + 1.2vmin);cursor:pointer}.MuiSvgIcon-root{position:absolute;bottom:2px;left:2px;width:100em;height:100em;font-size:2rem;text-shadow:0 2px 25px rgba(0,0,0,.3)}.credits{bottom:2px;left:0px;position:absolute;text-align:left;min-width:50px}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted #000;bottom:15px;left:10px}.tooltip .tooltiptext{visibility:hidden;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:20px;position:absolute;z-index:1;position:absolute;bottom:40px;left:60px;margin-left:-60px;opacity:0;transition:opacity 1s}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}.navbar1{top:50px;right:0px;position:absolute;text-align:right;min-width:50px}.navbar2{top:50px;right:50px;position:absolute;text-align:right;min-width:50px}.PizzaIcon{margin-right:20px}.pizza{right:2000px}body{background:#2f3640;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Lexend Deca";overflow:hidden}#center{margin-left:2vw;margin-right:2vw;display:flex;flex-direction:column;justify-content:center;font-size:calc(10px + 2vmin);text-align:center}::placeholder{color:#fff;opacity:1}#root{background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:fixed;min-height:100vh;display:grid;color:#fff}@font-face{font-family:"Lexend Deca";src:url("/./fonts/LexendDeca-Regular.woff2") format("woff2")}/*# sourceMappingURL=index.css.map */
diff --git a/src/css/index.css.map b/src/css/index.css.map
index d6319bf0..991d56a8 100644
--- a/src/css/index.css.map
+++ b/src/css/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/modules/_clock.scss","../scss/modules/_greeting.scss","../scss/modules/_quote.scss","../scss/modules/_search.scss","../scss/modules/_credit.scss","../scss/modules/_miscellaneous.scss"],"names":[],"mappings":"AAAA,OACE,cACA,SACA,oCAGF,MACE,eCPF,UACI,SACA,gBACA,oCCHJ,OACE,eACA,oCAGF,qCACE,OACE,gBACA,kBAIJ,aACE,eACA,oBACA,SACA,oCAGF,gCAEE,eCrBF,WACI,kBACA,UACA,SACA,aACA,mBACA,cACA,WACA,0BAEA,kBACI,eACA,aAMA,eAJA,mCACI,oCAMR,4BACI,8BACA,gBACA,sBACA,aACA,WACA,kBACA,mCACA,UAIR,kBACI,YAGJ,eACI,aACA,mBACA,6CCxCJ,wBAEE,+BACA,oCACA,uBAGF,UACE,oBAGF,cACE,kBACA,YACA,UACA,aAGF,cACE,+BACA,eAGF,iBACE,kBACA,WACA,SACA,YACA,aACA,eACA,sCAGF,SACE,WACA,SACA,kBACA,gBACA,eAGF,SACE,kBACA,qBACA,8BACA,YACA,UAEA,sBACE,kBACA,sBACA,WACA,kBACA,kBACA,aACA,kBACA,UACA,kBACA,YACA,UACA,kBAEA,UACA,sBAIJ,4BACE,mBACA,UCrEF,KACE,mBACA,SACA,mCACA,kCACA,0BACA,gBAGF,QACE,gBACA,iBACA,aACA,sBACA,uBACA,6BACA,kBAGF,cACE,WACA,UAGF,MACE,sBACA,4BACA,2BACA,4BACA,iBACA,aACA,WAGF,WACE,0BACA","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/modules/_clock.scss","../scss/modules/_greeting.scss","../scss/modules/_quote.scss","../scss/modules/_search.scss","../scss/modules/_credit.scss","../scss/modules/_navbar.scss","../scss/modules/_miscellaneous.scss"],"names":[],"mappings":"AAAA,OACE,cACA,SACA,oCAGF,MACE,eCPF,UACI,SACA,gBACA,oCCHJ,OACE,eACA,oCAGF,qCACE,OACE,gBACA,kBAIJ,aACE,eACA,oBACA,SACA,oCAGF,gCAEE,eCrBF,WACI,kBACA,UACA,SACA,aACA,mBACA,cACA,WACA,0BAEA,kBACI,eACA,aAMA,eAJA,mCACI,oCAMR,4BACI,8BACA,gBACA,sBACA,aACA,WACA,kBACA,mCACA,UAIR,kBACI,YAGJ,eACI,aACA,mBACA,6CCxCJ,wBAEE,+BACA,oCACA,uBAGF,UACE,oBAGF,cACE,kBACA,YACA,UACA,aAGF,cACE,+BACA,eAGF,iBACE,kBACA,WACA,SACA,YACA,aACA,eACA,sCAGF,SACE,WACA,SACA,kBACA,gBACA,eAGF,SACE,kBACA,qBACA,8BACA,YACA,UAEA,sBACE,kBACA,sBACA,WACA,kBACA,kBACA,aACA,kBACA,UACA,kBACA,YACA,UACA,kBAEA,UACA,sBAIJ,4BACE,mBACA,UCrEF,SACI,SACA,UACA,kBACA,iBACA,eAGJ,SACI,SACA,WACA,kBACA,iBACA,eAGJ,WACI,kBAGJ,OACI,aCrBJ,KACE,mBACA,SACA,mCACA,kCACA,0BACA,gBAGF,QACE,gBACA,iBACA,aACA,sBACA,uBACA,6BACA,kBAGF,cACE,WACA,UAGF,MACE,sBACA,4BACA,2BACA,4BACA,iBACA,aACA,WAGF,WACE,0BACA","file":"index.css"}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 38c558d9..ebc4c284 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
-//* Render
+//* Render
ReactDOM.render(
,
document.getElementById('root')
diff --git a/src/quotes.json b/src/quotes.json
index 7c060cf0..4caf0b95 100644
--- a/src/quotes.json
+++ b/src/quotes.json
@@ -1,102 +1,80 @@
-{
- "1": {
+[
+ {
"author": "Robert De Niro",
"quote": "Time goes on. So whatever you’re going to do, do it. Do it now. Don’t wait."
},
- "2": {
+ {
"author": "Walt Disney",
"quote": "All our dreams can come true, if we have the courage to pursue them."
},
- "3": {
+ {
"author": "Confucius",
"quote": "It does not matter how slowly you go as long as you do not stop."
- },
- "4": {
+ }, {
"author": "Roy T. Bennett",
"quote": "Believe in yourself. You are braver than you think, more talented than you know, and capable of more than you imagine."
- },
- "5": {
+ }, {
"author": "Wayne Dyer",
"quote": "If you believe it will work out, you’ll see opportunities. If you believe it won’t, you will see obstacles."
- },
- "6": {
+ }, {
"author": "George Addair",
"quote": "Everything you’ve ever wanted is on the other side of fear."
- },
- "7": {
+ }, {
"author": "Winston Churchill",
"quote": "Success is not final, failure is not fatal: it is the courage to continue that counts."
- },
- "8": {
+ }, {
"author": "Paulo Coelho",
"quote": "There is only one thing that makes a dream impossible to achieve: the fear of failure"
- },
- "9": {
+ }, {
"author": "Brian Tracy",
"quote": "Your true success in life begins only when you make the commitment to become excellent at what you do."
- },
- "10": {
+ }, {
"author": "Chantal Sutherland",
"quote": "Believe in yourself, take on your challenges, dig deep within yourself to conquer fears. Never let anyone bring you down. You got to keep going."
- },
- "11": {
+ }, {
"author": "Les Brown",
"quote": "Too many of us are not living our dreams because we are living our fears."
- },
- "12": {
+ }, {
"author": "Bob Riley",
"quote": "Hard times don’t create heroes. It is during the hard times when the ‘hero’ within us is revealed."
- },
- "13": {
+ }, {
"author": "Jack Canfield",
"quote": "If you can tune into your purpose and really align with it, setting goals so that your vision is an expression of that purpose, then life flows much more easily."
- },
- "14": {
+ }, {
"author": "Napolean Hill",
"quote": "Whatever the mind can conceive and believe, it can achieve."
- },
- "15": {
+ }, {
"author": "Jim Rohn",
"quote": "Don’t wish it were easier. Wish you were better."
- },
- "16": {
+ }, {
"author": "Serena Williams",
"quote": "A champion is defined not by their wins but by how they can recover when they fall."
- },
- "17": {
+ }, {
"author": "Sheryl Sandberg",
"quote": "Motivation comes from working on things we care about."
- },
- "18": {
+ }, {
"author": "Reese Witherspoon",
"quote": "With the right kind of coaching and determination you can accomplish anything."
- },
- "19": {
+ }, {
"author": "Hazrat Inayat Khan",
"quote": "Some people look for a beautiful place. Others make a place beautiful."
- },
- "20": {
+ }, {
"author": "Albert Einstein",
"quote": "Life is like riding a bicycle. To keep your balance, you must keep moving."
- },
- "21": {
+ }, {
"author": "Walt Disney",
"quote": "The way to get started is to quit talking and begin doing."
- },
- "22": {
+ }, {
"author": "Winston Churchill",
"quote": "A pessimist sees the difficulty in every opportunity; an optimist sees the opportunity in every difficulty."
- },
- "23": {
+ }, {
"author": "Will Rogers",
"quote": "Don't let yesterday take up too much of today."
- },
- "24": {
+ }, {
"author": "Vince Lombardi",
"quote": "It's not whether you get knocked down, it's whether you get up."
- },
- "25": {
+ }, {
"author": "Steve Jobs",
"quote": "If you are working on something that you really care about, you don’t have to be pushed. The vision pulls you."
}
-}
+]
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 3f3abf52..4eed1bc9 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -4,4 +4,5 @@
@import 'modules/quote';
@import 'modules/search';
@import 'modules/credit';
+@import 'modules/navbar';
@import 'modules/miscellaneous';
\ No newline at end of file
diff --git a/src/scss/modules/_navbar.scss b/src/scss/modules/_navbar.scss
new file mode 100644
index 00000000..e8f1a759
--- /dev/null
+++ b/src/scss/modules/_navbar.scss
@@ -0,0 +1,31 @@
+.navbar1 {
+ top: 50px;
+ right: 0px;
+ position: absolute;
+ text-align: right;
+ min-width: 50px;
+}
+
+.navbar2 {
+ top: 50px;
+ right: 50px;
+ position: absolute;
+ text-align: right;
+ min-width: 50px;
+}
+
+.navbar2 {
+ top: 50px;
+ right: 100px;
+ position: absolute;
+ text-align: right;
+ min-width: 50px;
+}
+
+.PizzaIcon {
+ margin-right: 20px;
+}
+
+.pizza {
+ right: 2000px;
+}
\ No newline at end of file