Skip to content

Commit aecbd08

Browse files
author
Artem
committed
Initial commit
0 parents  commit aecbd08

File tree

5 files changed

+200
-0
lines changed

5 files changed

+200
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
9+
<link rel="stylesheet" href="styles.css">
10+
<title>Random Quote Machine</title>
11+
</head>
12+
13+
<body>
14+
<div class="quote-container" id="quote-box">
15+
<div class="text-container">
16+
<p class="quote">
17+
<i class="fa fa-quote-left"></i>
18+
<span id="text"></span>
19+
</p>
20+
<p id="author"></p>
21+
</div>
22+
<div class="button-container">
23+
<a href="#" class="button" id="tweet-quote" target="_blank"><i class="fa fa-twitter"></i></a>
24+
<button href="#" class="button" id="new-quote">New quote</button>
25+
</div>
26+
</div>
27+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
28+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
29+
<script src="script.js"></script>
30+
</body>
31+
32+
</html>

‎script.js

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
const projectName = 'random-quote-machine';
2+
let quotesData;
3+
4+
var colors = [
5+
'#652705',
6+
'#4c1f27',
7+
'#342842',
8+
'#212d49',
9+
'#223048',
10+
'#431a03',
11+
'#32141a',
12+
'#231a2c',
13+
'#161e31',
14+
'#172030',
15+
];
16+
var currentQuote = '',
17+
currentAuthor = '';
18+
19+
function getQuotes() {
20+
return $.ajax({
21+
headers: {
22+
Accept: 'application/json'
23+
},
24+
url:
25+
'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json',
26+
success: function (jsonQuotes) {
27+
if (typeof jsonQuotes === 'string') {
28+
quotesData = JSON.parse(jsonQuotes);
29+
}
30+
}
31+
});
32+
}
33+
34+
function getRandomQuote() {
35+
return quotesData.quotes[
36+
Math.floor(Math.random() * quotesData.quotes.length)
37+
];
38+
}
39+
40+
function getQuote() {
41+
let randomQuote = getRandomQuote();
42+
43+
currentQuote = randomQuote.quote;
44+
currentAuthor = randomQuote.author;
45+
46+
$('#tweet-quote').attr(
47+
'href',
48+
'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' +
49+
encodeURIComponent('"' + currentQuote + '" ' + currentAuthor)
50+
);
51+
52+
$('.text-container').animate({ opacity: 0 }, 500, function () {
53+
$(this).animate({ opacity: 1 }, 500);
54+
$('#author').html('- ' + randomQuote.author);
55+
});
56+
57+
$('.quote').animate({ opacity: 0 }, 500, function () {
58+
$(this).animate({ opacity: 1 }, 500);
59+
$('#text').text(randomQuote.quote);
60+
});
61+
62+
var color = Math.floor(Math.random() * colors.length);
63+
$('html body').animate(
64+
{
65+
backgroundColor: colors[color],
66+
color: colors[color]
67+
},
68+
1000
69+
);
70+
$('.button').animate(
71+
{
72+
backgroundColor: colors[color]
73+
},
74+
1000
75+
);
76+
}
77+
78+
$(document).ready(function () {
79+
getQuotes().then(() => {
80+
getQuote();
81+
});
82+
83+
$('#new-quote').on('click', getQuote);
84+
});

‎styles.css

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
list-style: none;
7+
vertical-align: baseline;
8+
}
9+
10+
body {
11+
background-color: #47365a;
12+
color: #47365a;
13+
font-family: 'Raleway', sans-serif;
14+
font-weight: 400;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
height: 100vh;
19+
font-size: 1rem;
20+
}
21+
22+
div {
23+
position: relative;
24+
z-index: 2;
25+
}
26+
27+
a {
28+
text-decoration: none;
29+
}
30+
31+
button {
32+
border: none;
33+
outline: none;
34+
cursor: pointer;
35+
}
36+
37+
.quote-container {
38+
position: absolute;
39+
top: 20%;
40+
margin: auto;
41+
width: 450px;
42+
background-color: #fff;
43+
padding: 2rem;
44+
}
45+
46+
.text-container{
47+
text-align: center;
48+
}
49+
50+
.quote {
51+
font-weight: 500;
52+
font-size: 1.75em;
53+
}
54+
55+
#author {
56+
text-align: right;
57+
margin-top: 1rem;
58+
width: 450px;
59+
height: auto;
60+
text-align: right;
61+
}
62+
63+
.button-container {
64+
margin-top: 2rem;
65+
display: flex;
66+
align-items: flex-end;
67+
justify-content: space-between;
68+
}
69+
.button {
70+
background-color: #47365a;
71+
color: #fff;
72+
padding: 0.5rem;
73+
border-radius: 5px;
74+
cursor: pointer;
75+
}
76+
.button:hover {
77+
opacity: 0.9;
78+
}
79+
80+
#new-quote {
81+
float: right;
82+
}

0 commit comments

Comments
 (0)