This pen generates random quotes on the click of a button and uses Twitter API to post it to user's twitter feed .
A Pen by Neeraj Pandey on CodePen.
Created
January 22, 2017 11:07
-
-
Save anonymous/62da7c2b20fc60cc63fedfae5f18a501 to your computer and use it in GitHub Desktop.
Random Quote Generator
This file contains hidden or 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 rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Marck+Script" /> | |
| <div class="container-fluid"> | |
| <canvas id="canvas"></canvas> | |
| <body> | |
| <div id="cent"> | |
| <div class="well text-center" id="mains"> | |
| <div class="row"> | |
| <div style="color:Green;font-family :Marck Script;font-size:30px" class="col-xs-12 text-center" id="ade"></div></div> | |
| <div class="yes col-xs-6"><button class="text-center btn btn-success animated shake" id="gen" onClick=tweets();>Motivate Me</button></div> | |
| <div class="yes1 col-xs-6"><button class="animated bounce btn btn-primary" id="post">Tweet it for me</button> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </div> |
This file contains hidden or 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
| function tweets(){ | |
| var quotes = | |
| [ | |
| "The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.", | |
| "Keep love in your heart. A life without it is like a sunless garden when the flowers are dead.", | |
| "It is during our darkest moments that we must focus to see the light.", | |
| "One of the most beautiful qualities of true friendship is to understand and to be understood.", | |
| "In three words I can sum up everything I've learned about life: it goes on." | |
| ] | |
| var x = Math.floor(Math.random()*quotes.length); | |
| var q = quotes[x]; | |
| document.getElementById("ade").innerHTML= q; | |
| hue = Math.floor(Math.random()*500); | |
| }; | |
| "use strict"; | |
| var canvas = document.getElementById('canvas'), | |
| ctx = canvas.getContext('2d'), | |
| w = canvas.width = window.innerWidth, | |
| h = canvas.height = window.innerHeight, | |
| hue = 300,//this changes the color of the setup | |
| stars = [], | |
| count = 0, | |
| maxStars = 1400; | |
| // Thanks @jackrugile for the performance tip! http://codepen.io/jackrugile/pen/BjBGoM | |
| // Cache gradient | |
| var canvas2 = document.createElement('canvas'), | |
| ctx2 = canvas2.getContext('2d'); | |
| canvas2.width = 100; | |
| canvas2.height = 100; | |
| var half = canvas2.width/2, | |
| gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half); | |
| gradient2.addColorStop(0.025, '#fff'); | |
| gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)'); | |
| gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)'); | |
| gradient2.addColorStop(1, 'transparent'); | |
| ctx2.fillStyle = gradient2; | |
| ctx2.beginPath(); | |
| ctx2.arc(half, half, half, 0, Math.PI * 2); | |
| ctx2.fill(); | |
| // End cache | |
| function random(min, max) { | |
| if (arguments.length < 2) { | |
| max = min; | |
| min = 0; | |
| } | |
| if (min > max) { | |
| var hold = max; | |
| max = min; | |
| min = hold; | |
| } | |
| return Math.floor(Math.random() * (max - min + 1)) + min; | |
| } | |
| function maxOrbit(x,y) { | |
| var max = Math.max(x,y), | |
| diameter = Math.round(Math.sqrt(max*max + max*max)); | |
| return diameter/2; | |
| } | |
| var Star = function() { | |
| this.orbitRadius = random(maxOrbit(w,h)); | |
| this.radius = random(60, this.orbitRadius) / 12; | |
| this.orbitX = w / 2; | |
| this.orbitY = h / 2; | |
| this.timePassed = random(0, maxStars); | |
| this.speed = random(this.orbitRadius) / 50000; | |
| this.alpha = random(2, 10) / 10; | |
| count++; | |
| stars[count] = this; | |
| } | |
| Star.prototype.draw = function() { | |
| var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX, | |
| y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY, | |
| twinkle = random(10); | |
| if (twinkle === 1 && this.alpha > 0) { | |
| this.alpha -= 0.05; | |
| } else if (twinkle === 2 && this.alpha < 1) { | |
| this.alpha += 0.05; | |
| } | |
| ctx.globalAlpha = this.alpha; | |
| ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius); | |
| this.timePassed += this.speed; | |
| } | |
| for (var i = 0; i < maxStars; i++) { | |
| new Star(); | |
| } | |
| function animation() { | |
| ctx.globalCompositeOperation = 'source-over'; | |
| ctx.globalAlpha = 0.8; | |
| ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)'; | |
| ctx.fillRect(0, 0, w, h) | |
| ctx.globalCompositeOperation = 'lighter'; | |
| for (var i = 1, l = stars.length; i < l; i++) { | |
| stars[i].draw(); | |
| }; | |
| window.requestAnimationFrame(animation); | |
| } | |
| animation(); |
This file contains hidden or 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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
This file contains hidden or 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
| .yes | |
| { | |
| left:0px; | |
| } | |
| canvas { | |
| width= 840px; | |
| opacity: 2; | |
| z-index=-1; | |
| position:absolute ; | |
| top:0; | |
| left:0; | |
| } | |
| button | |
| { | |
| position : relative ; | |
| } | |
| .well | |
| { height : 100px; | |
| margin: 150px; | |
| position:center; | |
| width : 500px ; | |
| }; | |
| #ade{ | |
| ; | |
| }; | |
| .yes{ | |
| ; | |
| width: 130px; | |
| }; | |
| #mains | |
| { | |
| z-index: 10; | |
| position: relative; | |
| }; | |
| #cent{ | |
| position:absolute; | |
| top:50%; | |
| left:50%; | |
| margin-top:-50px; /* this is half the height of your div*/ | |
| margin-left:-100px; | |
| height:200px ; | |
| } |
This file contains hidden or 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" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment