Created
December 30, 2014 12:43
-
-
Save sharnie/5d86278b598934b30866 to your computer and use it in GitHub Desktop.
// source http://jsbin.com/tatifomewe
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600); | |
| body { | |
| background-color: #2ecc71; | |
| color: #fff; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .container { | |
| max-width: 300px; | |
| padding: 0 20px; | |
| margin: 0 auto; | |
| margin-top: -100px; | |
| margin-left: -100px; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| } | |
| .title { | |
| font-weight: 700; | |
| text-align: center; | |
| text-transform: uppercase; | |
| letter-spacing: 4px; | |
| font-size: 40px | |
| } | |
| .entry { | |
| display: inline-block; | |
| width: 100%; | |
| margin: 0 auto; | |
| text-align: center; | |
| padding: 15px 10px; | |
| border: none; | |
| outline: none; | |
| font-weight: 400; | |
| font-size: 18px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="title">Reverse</h1> | |
| <input type="text" class="entry" placeholder="Enter something cool..." /> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| var title = document.querySelector( '.title' ), | |
| entry = document.querySelector( '.entry' ); | |
| function reverse(s) { | |
| return s.split('').reverse().join(''); | |
| } | |
| function reverseTitle( entry ) { | |
| title.innerHTML = reverse( entry.value || "Reverse" ); | |
| } | |
| entry.addEventListener('change', function( evt ) { | |
| reverseTitle( evt.target ); | |
| }); | |
| entry.addEventListener('keypress', function( evt ) { | |
| reverseTitle( evt.target ); | |
| }); | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600); | |
| body { | |
| background-color: #2ecc71; | |
| color: #fff; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .container { | |
| max-width: 300px; | |
| padding: 0 20px; | |
| margin: 0 auto; | |
| margin-top: -100px; | |
| margin-left: -100px; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| } | |
| .title { | |
| font-weight: 700; | |
| text-align: center; | |
| text-transform: uppercase; | |
| letter-spacing: 4px; | |
| font-size: 40px | |
| } | |
| .entry { | |
| display: inline-block; | |
| width: 100%; | |
| margin: 0 auto; | |
| text-align: center; | |
| padding: 15px 10px; | |
| border: none; | |
| outline: none; | |
| font-weight: 400; | |
| font-size: 18px; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">document.addEventListener('DOMContentLoaded', function() { | |
| var title = document.querySelector( '.title' ), | |
| entry = document.querySelector( '.entry' ); | |
| function reverse(s) { | |
| return s.split('').reverse().join(''); | |
| } | |
| function reverseTitle( entry ) { | |
| title.innerHTML = reverse( entry.value || "Reverse" ); | |
| } | |
| entry.addEventListener('change', function( evt ) { | |
| reverseTitle( evt.target ); | |
| }); | |
| entry.addEventListener('keypress', function( evt ) { | |
| reverseTitle( evt.target ); | |
| }); | |
| });</script></body> | |
| </html> |
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
| @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600); | |
| body { | |
| background-color: #2ecc71; | |
| color: #fff; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .container { | |
| max-width: 300px; | |
| padding: 0 20px; | |
| margin: 0 auto; | |
| margin-top: -100px; | |
| margin-left: -100px; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| } | |
| .title { | |
| font-weight: 700; | |
| text-align: center; | |
| text-transform: uppercase; | |
| letter-spacing: 4px; | |
| font-size: 40px | |
| } | |
| .entry { | |
| display: inline-block; | |
| width: 100%; | |
| margin: 0 auto; | |
| text-align: center; | |
| padding: 15px 10px; | |
| border: none; | |
| outline: none; | |
| font-weight: 400; | |
| font-size: 18px; | |
| } |
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.addEventListener('DOMContentLoaded', function() { | |
| var title = document.querySelector( '.title' ), | |
| entry = document.querySelector( '.entry' ); | |
| function reverse(s) { | |
| return s.split('').reverse().join(''); | |
| } | |
| function reverseTitle( entry ) { | |
| title.innerHTML = reverse( entry.value || "Reverse" ); | |
| } | |
| entry.addEventListener('change', function( evt ) { | |
| reverseTitle( evt.target ); | |
| }); | |
| entry.addEventListener('keypress', function( evt ) { | |
| reverseTitle( evt.target ); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment