- 0 Downloads
- 33 Views
- Download Now View Demo
- HTML
- CSS
- JavaScript
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Random Quote</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="slider">
<div id="quote-div">
<!-- here goes the react content -->
</div>
</div>
<script src='https://fb.me/react-15.1.0.min.js'></script>
<script src='https://fb.me/react-dom-15.1.0.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/0x1000/random-quote-aZvQMx */
body {
background-color: #ffcece;
transition-property: background-color;
transition-duration: 1s;
color: black;
margin: 0;
font-family: Roboto-Thin;
font-weight: 100;
display: flex;
align-items: center;
}
div#quote-div {
width: 50%;
transition-property: background-color color;
transition-duration: 1s;
vertical-align: middle;
margin-left: 24%;
padding: 3%;
}
html, body {
height: 100%;
}
@media (min-device-width: 320px)
and (max-device-width: 667px) {
div#quote-div {
width: 80%;
margin-left: 8.5%;
}
}
@media (max-device-width: 320px) {
html {
height: 100%;
}
div#quote-div {
width: 100%;
margin-left: 0;
}
}
button {
border-radius: 4em;
cursor: pointer;
margin: 1em;
border: none;
width: 3em;
height: 3em;
background-color: white;
transition-property: background-color border;
transition-duration: 200ms;
}
.fa-angle-right {
font-size: 1.5em;
}
h3 {
width: 100%;
text-align: right;
font-weight:100;
}
em {
margin-right: 2em;
text-decoration: none;
font-family: Liberation;
opacity: 0.5;
font-size: 1.2em;
font-weight: 100;
}
h1.quote {font-family: "Great Vibes";font-weight: 100;font-size: 3em;}
div#quote-div {
margin-top: 2em;
border-radius: 0.5em;
}
button:hover {;
border: 0.2em solid;
opacity: 0.5;
}
button:active {
opacity: 0.2;
visibility: 0.5;
}
.fa-quote-left, .fa-quote-right {
font-size: 3em;
opacity: 0.5;
width: 100%;
color: ;
}
.fa-quote-right {
text-align: right;
}
.slider {
width: 100%;
height: 100%;
}
.buttons {
display: flex;
}
/*Downloaded from https://www.codeseek.co/0x1000/random-quote-aZvQMx */
var x = 0;
var bodyColor = ["#ffbe00", "#a7ff00", "tomato", "orange", "yellow", "lightgreen", "#ff5de2", "#00ffd2", "gray"];
function changeColor() {
var i = x++ % 9;
$("body").css("background-color", bodyColor[i]);
}
// our classes will follow as
// main body class that will change color on every change of quote
var QuoteBox = React.createClass({
displayName: "QuoteBox",
render: function render() {
return React.createElement(
"div",
{ className: "quoteBox" },
React.createElement(
"h1",
{ className: "quote" },
this.props.quote
),
React.createElement("i", { className: "fa fa-quote-right" }),
React.createElement(
"h3",
null,
React.createElement(
"em",
null,
this.props.author
)
)
);
}
});
var Button = React.createClass({
displayName: "Button",
render: function render() {
return React.createElement(
"button",
{ className: this.props.class, click: this.props.handler },
React.createElement("i", { className: "fa " + this.props.icon })
);
}
});
var App = React.createClass({
displayName: "App",
getQuoteFromServer: function getQuoteFromServer() {
var total = 10;
$.ajax({
url: "https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous",
headers: {
'X-Mashape-Key': "WMS4J7XVpxmshY8miRkzLb9zCvUbp1lDyO4jsnWQWOjhyoDbFG"
},
success: function (da) {
var d = JSON.parse(da);
console.log(da);
this.setState({ data: d, reload: false });
}.bind(this),
error: function () {
var e = {
quote: "Oh snap! try changing color by clicking refresh icon",
author: ""
};
this.setState({ data: e, reload: true });
}.bind(this)
});
},
getInitialState: function getInitialState() {
return {
data: { quote: "Loading...", author: "Loading..." },
reload: false
};
},
componentDidMount: function componentDidMount() {
this.getQuoteFromServer();
},
handleClick: function handleClick() {
this.getQuoteFromServer();
},
handleTweet: function handleTweet() {
var tweet_url = "https://twitter.com/share?&text=" + this.state.data.quote + "\n - " + this.state.data.author;
window.open(tweet_url);
},
render: function render() {
changeColor();
return React.createElement(
"div",
{ className: "quote-box" },
React.createElement("i", { className: "fa fa-quote-left" }),
React.createElement(QuoteBox, { quote: this.state.data.quote, author: this.state.data.author }),
React.createElement(
"div",
{ className: "buttons" },
React.createElement(
"button",
{ className: "change-button", onClick: this.handleClick },
React.createElement("i", { className: "fa fa-angle-right" })
),
React.createElement(
"button",
{ className: "tweet", onClick: this.handleTweet },
React.createElement("i", { className: "fa fa-twitter" })
),
this.state.reload ? React.createElement(
"button",
{ className: "reload", onClick: this.handleClick },
React.createElement("i", { className: "fa fa-refresh" })
) : ""
)
);
}
});
ReactDOM.render(React.createElement(App, null), document.getElementById('quote-div'));