Here i made use of an api to access string of data from another hosted server. I used html, css, boostrap and javascript(jquery) for the coding.
A Pen by Ojini Chizoba Jude on CodePen.
Created
February 13, 2018 17:20
-
-
Save Deityhub/973c42eadd0ca2edbc4e5908fe742ec0 to your computer and use it in GitHub Desktop.
Random Quote Machine
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <meta charset="utf-8"> | |
| <title>Random Quote Generator</title> | |
| <meta name="viewport" content="width=device-width"> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" | |
| crossorigin="anonymous"> | |
| <link href="https://fonts.googleapis.com/css?family=Lemonada" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Random Quote Generator <i class="fa fa-refresh fa-spin fa-fw"></i> | |
| <span class="sr-only">Loading...</span></h1> | |
| <div class="quoteBody"> | |
| <p id="quote"></p> | |
| <p id="author"></p> | |
| </div> | |
| <div class="buttons"> | |
| <i class="tw newQuote fa fa-arrow-circle-right btn btn-lg btn-default" aria-hidden="true"> Next</i> | |
| <i class="tw fa fa-twitter btn btn-default btn-lg tweet" aria-hidden="true"> tweet</i> | |
| </div> | |
| <div class="views"> | |
| <a href="http://www.twitter.com/deityhub" target="_blank" title="coder">Deityhub</a> with <i class="fa fa-coffee" aria-hidden="true"></i> and <i class="fa fa-headphones" | |
| aria-hidden="true"></i><br> | |
| <a class="fa fa-facebook-square" aria-hidden="true" href="https://www.facebook.com/iamwireless.org" target="_blank"></a> | |
| <a class="fa fa-github" aria-hidden="true" href="https://github.com/deityhub" target="_blank"></a> | |
| <a class="fa fa-free-code-camp" aria-hidden="true" href="https://freecodecamp.com/deityhub" target="_blank"></a> | |
| <a class="fa fa-codepen" aria-hidden="true" href="https://codepen.io/deityhub" target="_blank"></a> | |
| </div> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function () { | |
| var quote; | |
| var author; | |
| function getNew() { | |
| $.ajax({ | |
| url: 'https://api.forismatic.com/api/1.0/', | |
| jsonp: 'jsonp', | |
| dataType: 'jsonp', | |
| data: { | |
| method: 'getQuote', | |
| format: 'jsonp', | |
| lang: 'en' | |
| }, | |
| success: function (response) { | |
| quote = response.quoteText; | |
| author = response.quoteAuthor; | |
| $('#quote').html(quote); | |
| if (author) { | |
| $('#author').text('- ' + author); | |
| } else { | |
| $('#author').text('- Unknown'); | |
| } | |
| $('.newQuote').off('click').on('click', function (event) { | |
| event.preventDefault(); | |
| getNew(); | |
| }); | |
| $('.tweet').off('click').on('click', function(url, text, author) { | |
| url = encodeURIComponent(url); | |
| text = encodeURIComponent("#RT @deiytyhub "+ '\"' + quote + '\"'); | |
| author = encodeURIComponent(response.quoteAuthor); | |
| window.open("http://twitter.com/intent/tweet?original_referer=" + url + "&text=" + text + " - " + author + "&url=" + url, "_blank"); | |
| }) | |
| } | |
| }) | |
| } | |
| getNew(); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| text-align: center; | |
| background: url("https://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-5-full.jpg"); | |
| background-repeat: no-repeat; | |
| color: white; | |
| } | |
| #author{ | |
| text-align: right; | |
| font-style: italic; | |
| } | |
| .container{ | |
| padding: 5px; | |
| text-align: center; | |
| } | |
| .quoteBody{ | |
| padding: 5px; | |
| margin: 20px auto; | |
| font-family: 'Lemonada'; | |
| width: 35%; | |
| height: auto; | |
| } | |
| .buttons{ | |
| margin-top: 5px; | |
| padding: 10px; | |
| } | |
| a{ | |
| text-decoration: none; | |
| color: white; | |
| } | |
| .views, .buttons, .quoteBody{ | |
| font-size: 1.2em; | |
| } | |
| .tw, h1, .views{ | |
| font-family: 'Lobster', cursive; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment