├── README.md
├── css
└── styles.css
├── js
└── scripts.js
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # Dev_Quotes
2 | Random quote generator using API in JS
3 | ## Demo
4 | 
5 | 
6 | 
7 |
--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
1 | body{
2 | font-family: 'Acme', sans-serif;
3 | background:#34495e;
4 | color:#fff;
5 | }
6 | .title{
7 | padding-top:40px;
8 | text-align: center;
9 | margin-bottom: 50px;
10 | }
11 | .quoteArea{
12 | padding:40px;
13 | font-size: 30px;
14 | border:5px solid #fff;
15 | margin-bottom: 30px;
16 | color: #fff;
17 | }
18 | .fa-heart{
19 | color:#ff1237;
20 | }
21 | .creator, .creator a{
22 | text-align: center;
23 | padding-top: 20px;
24 | }
--------------------------------------------------------------------------------
/js/scripts.js:
--------------------------------------------------------------------------------
1 | function randomQuote() {
2 | $.ajax({
3 | url: "https://api.forismatic.com/api/1.0/?",
4 | dataType: "jsonp",
5 | data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
6 | success: function (quoteData) {
7 |
8 | if (quoteData.quoteAuthor === '') {
9 | quoteData.quoteAuthor = 'Unknown';
10 | };
11 |
12 | $("#randomQuote").html(" " + quoteData.quoteText + "
‐" + quoteData.quoteAuthor + "
");
13 | $("#tweetMe").attr("href", "https://twitter.com/home/?status=" + quoteData.quoteText + ' - ' + quoteData.quoteAuthor);
14 | }
15 | });
16 | }
17 |
18 | function randomColor() {
19 | var colors = [
20 | '#34495e',
21 | '#6C7A89',
22 | '#ABB7B7',
23 | '#336E7B',
24 | '#8E44AD',
25 | '#674172',
26 | '#D2527F',
27 | '#96281B',
28 | '#34495e',
29 | '#16a085',
30 | '#f39c12',
31 | '#d35400',
32 | '#c0392b',
33 | '#7f8c8d',
34 | '#8e44ad'
35 | ];
36 | var choosedColor = colors[(Math.floor(Math.random() * 16))];
37 | return choosedColor;
38 | }
39 |
40 | $(function () {
41 | randomQuote();
42 | randomColor();
43 | });
44 |
45 | $("#newQuote").click(function () {
46 | $('body').css({'background': randomColor(), 'transition': 'all linear 0.2s'});
47 | randomQuote();
48 | });
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Random Quote Generator
15 |
16 |
17 |
19 |
20 |
21 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
Random Quote Generator
36 |
37 |
40 |
41 |
48 |
49 |
52 |
53 |