Last active
July 1, 2018 21:20
-
-
Save nebil/601ad6d54b595fa84481b6173fac1822 to your computer and use it in GitHub Desktop.
🐣 Un ejemplo minimalista de HTML/CSS con JavaScript 🐣
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='es'> | |
| <head> | |
| <meta charset='utf-8'> | |
| <title>Ejemplo</title> | |
| <style media='screen'> | |
| body { | |
| margin: 0px auto; | |
| padding: 3ex 3em; | |
| max-width: 680px; | |
| background-color: #FAFAFA; | |
| color: #333; | |
| font-family: Liberation Sans, Helvetica, Arial, sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p id='my-paragraph'>este párrafo no tendrá mucho sentido</p> | |
| <input id='my-button' type='button' value="¡Desordenar!"> | |
| <!-- Ahora, traemos el archivo escrito en JavaScript. --> | |
| <script src='script.js' type='application/javascript'></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
| (() => { | |
| // Traducido a ES2015 desde: https://stackoverflow.com/a/2724594 | |
| // Lo que estoy escribiendo acá permite extender | |
| // las funcionalidades de un Array en JavaScript. | |
| // NB: esto no es considerado una buena práctica. | |
| Array.prototype.shuffle = function shuffle() { | |
| let i = this.length; | |
| if (i === 0) return this; | |
| while (--i) { | |
| const randint = Math.floor(Math.random() * (i + 1)); | |
| [this[i], this[randint]] = [this[randint], this[i]]; | |
| } | |
| return this; | |
| }; | |
| // Ahora, le agregamos un 'event listener' al botón. | |
| // El objetivo es que, cada vez que haga clic en él, | |
| // se ejecute la función (i.e. callback) que entregaré como argumento. | |
| document.getElementById('my-button').addEventListener('click', () => { | |
| console.log('Hice clic en el botón.'); // Sólo para ver que el clic está funcionando. | |
| const para = document.getElementById('my-paragraph'); // Primero, obtengo el párrafo. | |
| const text = para.innerHTML; // Luego, le extraigo su texto. | |
| para.innerHTML = text.split(' ').shuffle().join(' '); // Y le doy palabras mezcladas. | |
| }); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment