This commit is contained in:
Mr Brickly
2019-11-06 19:03:17 +00:00
parent 40452b71bf
commit 39969cde6d
13 changed files with 100 additions and 63 deletions

View File

@@ -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

View File

@@ -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() {

View File

@@ -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);
}

View File

@@ -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
}

19
src/components/Navbar.jsx Normal file
View File

@@ -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 (
<div className="navbar-container">
<div className='navbar1'>
<RefreshIcon className='locationicon' />
</div>
<div className='navbar2'>
<LocalPizzaIcon className='pizzaicon'/>
</div>
</div>
);
}
}

View File

@@ -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 });
}
}

View File

@@ -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 */

View File

@@ -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"}
{"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"}

View File

@@ -3,7 +3,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
//* Render
//* Render
ReactDOM.render(
<App/>,
document.getElementById('root')

View File

@@ -1,102 +1,80 @@
{
"1": {
[
{
"author": "Robert De Niro",
"quote": "Time goes on. So whatever youre going to do, do it. Do it now. Dont 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, youll see opportunities. If you believe it wont, you will see obstacles."
},
"6": {
}, {
"author": "George Addair",
"quote": "Everything youve 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 dont 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": "Dont 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 dont have to be pushed. The vision pulls you."
}
}
]

View File

@@ -4,4 +4,5 @@
@import 'modules/quote';
@import 'modules/search';
@import 'modules/credit';
@import 'modules/navbar';
@import 'modules/miscellaneous';

View File

@@ -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;
}