Created
January 19, 2020 01:59
-
-
Save colabottles/d2ff1d750a69bcf185f0daf15e52965f to your computer and use it in GitHub Desktop.
Ron Swanson Quote Generator // source https://jsbin.com/vevajip
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Ron Swanson Quote Generator</title> | |
| <style id="jsbin-css"> | |
| @import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap'); | |
| * { | |
| box-sizing: border-box; | |
| font: 1.1rem 'Alfa Slab One', Arial, Helvetica, sans-serif; | |
| } | |
| html, body{ | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| body { | |
| display: grid; | |
| grid-template-columns: 1fr max-content; | |
| background: #fff url('https://toddl.dev/img/ron.png') no-repeat bottom right; | |
| background-attachment: fixed; | |
| background-size: 75%; | |
| } | |
| h1 { | |
| display: flex; | |
| justify-content: center; | |
| align-content: center; | |
| font-size: 2rem; | |
| } | |
| button { | |
| display: flex; | |
| background-color: transparent; | |
| border: 3px solid #000; | |
| border-radius: 50px; | |
| -webkit-transition: all .1s ease-in-out; | |
| transition: all .1s ease-in-out; | |
| color: #000; | |
| padding: 1rem; | |
| margin: 1rem 3rem 0; | |
| } | |
| .button:hover { | |
| box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, .7); | |
| border: 3px solid #000; | |
| cursor: pointer; | |
| } | |
| blockquote { | |
| -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); | |
| clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); | |
| transition: 1.2s cubic-bezier(1, -1, 0, 2); | |
| background-color: #fa1; | |
| border-left: 15px solid #000; | |
| font: 1.25rem 'Alfa Slab One', Helvetica, Arial, sans-serif; | |
| font-weight: 400; | |
| letter-spacing: 0.05rem; | |
| margin: 1.5rem 2rem; | |
| padding: 1.5rem 1.5rem 8rem; | |
| max-width: 40vw; | |
| } | |
| blockquote:hover { | |
| transform: rotateX(180deg) | |
| rotateY(180deg) | |
| rotateZ(180deg) | |
| perspective(700px); | |
| transform-origin: center center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <h1>Ron Swanson Quote Generator</h1> | |
| <button class="button" id="getQuote">Give me more Ron Swanson!</button> | |
| <blockquote cite="Ron Swanson" id="quote">Getting the quote. Hold onto your boots...</blockquote> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| const quote = document.querySelector('blockquote'); // Get the blockquote | |
| const button = document.querySelector('button'); // Grab the button | |
| const grabURL = 'https://ron-swanson-quotes.herokuapp.com/v2/quotes'; // Grab the source | |
| // Grab those quotes | |
| function getResponse(response) { | |
| return response.ok ? response.json() : Promise.reject(response); | |
| } | |
| // Throw them quotes up | |
| function getRonQuote(data) { | |
| quote.innerHTML = data; | |
| } | |
| // Display if there is an error | |
| function displayError(err) { | |
| quote.innerHTML = 'There seems to be an error. I wanna punch you in the face so bad right now.'; | |
| } | |
| // Show dem quotes | |
| function getTheQuote() { | |
| fetch(grabURL) | |
| .then(getResponse) | |
| .then(getRonQuote) | |
| .catch(displayError); | |
| } | |
| getTheQuote(grabURL); // Get a first quote | |
| // Listen for the click on the button | |
| button.addEventListener( | |
| 'click', function() { | |
| getTheQuote(url); | |
| }, false); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap'); | |
| * { | |
| box-sizing: border-box; | |
| font: 1.1rem 'Alfa Slab One', Arial, Helvetica, sans-serif; | |
| } | |
| html, body{ | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| body { | |
| display: grid; | |
| grid-template-columns: 1fr max-content; | |
| background: #fff url('https://toddl.dev/img/ron.png') no-repeat bottom right; | |
| background-attachment: fixed; | |
| background-size: 75%; | |
| } | |
| h1 { | |
| display: flex; | |
| justify-content: center; | |
| align-content: center; | |
| font-size: 2rem; | |
| } | |
| button { | |
| display: flex; | |
| background-color: transparent; | |
| border: 3px solid #000; | |
| border-radius: 50px; | |
| -webkit-transition: all .1s ease-in-out; | |
| transition: all .1s ease-in-out; | |
| color: #000; | |
| padding: 1rem; | |
| margin: 1rem 3rem 0; | |
| } | |
| .button:hover { | |
| box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, .7); | |
| border: 3px solid #000; | |
| cursor: pointer; | |
| } | |
| blockquote { | |
| -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); | |
| clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); | |
| transition: 1.2s cubic-bezier(1, -1, 0, 2); | |
| background-color: #fa1; | |
| border-left: 15px solid #000; | |
| font: 1.25rem 'Alfa Slab One', Helvetica, Arial, sans-serif; | |
| font-weight: 400; | |
| letter-spacing: 0.05rem; | |
| margin: 1.5rem 2rem; | |
| padding: 1.5rem 1.5rem 8rem; | |
| max-width: 40vw; | |
| } | |
| blockquote:hover { | |
| transform: rotateX(180deg) | |
| rotateY(180deg) | |
| rotateZ(180deg) | |
| perspective(700px); | |
| transform-origin: center center; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">const quote = document.querySelector('blockquote'); // Get the blockquote | |
| const button = document.querySelector('button'); // Grab the button | |
| const grabURL = 'https://ron-swanson-quotes.herokuapp.com/v2/quotes'; // Grab the source | |
| // Grab those quotes | |
| function getResponse(response) { | |
| return response.ok ? response.json() : Promise.reject(response); | |
| } | |
| // Throw them quotes up | |
| function getRonQuote(data) { | |
| quote.innerHTML = data; | |
| } | |
| // Display if there is an error | |
| function displayError(err) { | |
| quote.innerHTML = 'There seems to be an error. I wanna punch you in the face so bad right now.'; | |
| } | |
| // Show dem quotes | |
| function getTheQuote() { | |
| fetch(grabURL) | |
| .then(getResponse) | |
| .then(getRonQuote) | |
| .catch(displayError); | |
| } | |
| getTheQuote(grabURL); // Get a first quote | |
| // Listen for the click on the button | |
| button.addEventListener( | |
| 'click', function() { | |
| getTheQuote(url); | |
| }, false); | |
| </script></body> | |
| </html |
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
| @import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap'); | |
| * { | |
| box-sizing: border-box; | |
| font: 1.1rem 'Alfa Slab One', Arial, Helvetica, sans-serif; | |
| } | |
| html, body{ | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| body { | |
| display: grid; | |
| grid-template-columns: 1fr max-content; | |
| background: #fff url('https://toddl.dev/img/ron.png') no-repeat bottom right; | |
| background-attachment: fixed; | |
| background-size: 75%; | |
| } | |
| h1 { | |
| display: flex; | |
| justify-content: center; | |
| align-content: center; | |
| font-size: 2rem; | |
| } | |
| button { | |
| display: flex; | |
| background-color: transparent; | |
| border: 3px solid #000; | |
| border-radius: 50px; | |
| -webkit-transition: all .1s ease-in-out; | |
| transition: all .1s ease-in-out; | |
| color: #000; | |
| padding: 1rem; | |
| margin: 1rem 3rem 0; | |
| } | |
| .button:hover { | |
| box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, .7); | |
| border: 3px solid #000; | |
| cursor: pointer; | |
| } | |
| blockquote { | |
| -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); | |
| clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); | |
| transition: 1.2s cubic-bezier(1, -1, 0, 2); | |
| background-color: #fa1; | |
| border-left: 15px solid #000; | |
| font: 1.25rem 'Alfa Slab One', Helvetica, Arial, sans-serif; | |
| font-weight: 400; | |
| letter-spacing: 0.05rem; | |
| margin: 1.5rem 2rem; | |
| padding: 1.5rem 1.5rem 8rem; | |
| max-width: 40vw; | |
| } | |
| blockquote:hover { | |
| transform: rotateX(180deg) | |
| rotateY(180deg) | |
| rotateZ(180deg) | |
| perspective(700px); | |
| transform-origin: center center; | |
| } |
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
| const quote = document.querySelector('blockquote'); // Get the blockquote | |
| const button = document.querySelector('button'); // Grab the button | |
| const grabURL = 'https://ron-swanson-quotes.herokuapp.com/v2/quotes'; // Grab the source | |
| // Grab those quotes | |
| function getResponse(response) { | |
| return response.ok ? response.json() : Promise.reject(response); | |
| } | |
| // Throw them quotes up | |
| function getRonQuote(data) { | |
| quote.innerHTML = data; | |
| } | |
| // Display if there is an error | |
| function displayError(err) { | |
| quote.innerHTML = 'There seems to be an error. I wanna punch you in the face so bad right now.'; | |
| } | |
| // Show dem quotes | |
| function getTheQuote() { | |
| fetch(grabURL) | |
| .then(getResponse) | |
| .then(getRonQuote) | |
| .catch(displayError); | |
| } | |
| getTheQuote(grabURL); // Get a first quote | |
| // Listen for the click on the button | |
| button.addEventListener( | |
| 'click', function() { | |
| getTheQuote(url); | |
| }, false); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment