Last active
February 19, 2020 21:53
-
-
Save shduff/10484f62ab416ec4db7cdcb7dbcd647d to your computer and use it in GitHub Desktop.
A grid of squares you can click to color...
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
| <html> | |
| <head> | |
| <style> | |
| .on { | |
| background-color:black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var Square = function(size) { // define a new function to make a circle of a given radius | |
| var self = this; | |
| this.size = size; // store the radius we're given | |
| this.div = document.createElement('div'); // create the div that we're going to use to display the circle | |
| this.div.style.width = size + 'px'; // set its width | |
| this.div.style.height = size + 'px'; // and height to twice our radius | |
| this.div.style.display = 'inline-block'; | |
| this.div.style.border = '1px dotted darkgrey'; | |
| this.div.addEventListener('click', function() { | |
| self.div.classList.toggle('on'); | |
| console.log(self.div.classList); | |
| }); | |
| document.body.appendChild(this.div); // and then stick the div we've created in our page; | |
| }; | |
| for (var i = 0; i < 500; i++) { // make ten of them | |
| new Square(80); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment