Created
May 9, 2017 11:29
-
-
Save zaratan/ead3974d563024a2785fc1d4c1edc712 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/keyeguyoye
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"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .wheredivgoes { | |
| display: flex; | |
| width: 480px; | |
| flex-flow: row wrap; | |
| } | |
| .wheredivgoes > div { | |
| background-color: lightgrey; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="btn-clean">CLEAN</button> | |
| <section class="wheredivgoes"> | |
| </section> | |
| <script id="jsbin-javascript"> | |
| function Drawer(size, container) { | |
| this.size = size; | |
| this.container = container || $('.wheredivgoes'); | |
| } | |
| Drawer.prototype = { | |
| addEvents: function(){ | |
| $('div').on('mouseover',function(){$(this).css('background-color','black');}) | |
| }, | |
| drawGrid: function(){ | |
| for(var row =0; row < this.size; row++){ | |
| for(var cell=0; cell < this.size; cell++){ | |
| this.drawCell(); | |
| } | |
| } | |
| this.addEvents(); | |
| }, | |
| cleanGrid: function(){ | |
| this.container.html(""); | |
| }, | |
| drawCell: function(){ | |
| this.container.append(this.cellElement()) | |
| }, | |
| cellElement: function(){ | |
| return $('<div style="'+this.cellStyle()+'"></div>'); | |
| }, | |
| cellSize: function(){ | |
| if(!this.cellSizeCalc){ | |
| var containerWidth = this.container.width(); | |
| this.cellSizeCalc = (containerWidth/ this.size); | |
| } | |
| return this.cellSizeCalc; | |
| }, | |
| cellStyle: function(){ | |
| if(!this.cellStyleCalc){ | |
| this.cellStyleCalc = 'width: '+this.cellSize()+'px; height: '+this.cellSize()+'px'; | |
| } | |
| return this.cellStyleCalc; | |
| } | |
| } | |
| var btnCleanClick = function(){ | |
| drawer.cleanGrid(); | |
| var size = prompt('grid size ?') | |
| drawer = new Drawer(size); | |
| drawer.drawGrid(); | |
| } | |
| var drawer = new Drawer(16); | |
| drawer.drawGrid(); | |
| $('#btn-clean').click(btnCleanClick); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">.wheredivgoes { | |
| display: flex; | |
| width: 480px; | |
| flex-flow: row wrap; | |
| } | |
| .wheredivgoes > div { | |
| background-color: lightgrey; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| function Drawer(size, container) { | |
| this.size = size; | |
| this.container = container || $('.wheredivgoes'); | |
| } | |
| Drawer.prototype = { | |
| addEvents: function(){ | |
| $('div').on('mouseover',function(){$(this).css('background-color','black');}) | |
| }, | |
| drawGrid: function(){ | |
| for(var row =0; row < this.size; row++){ | |
| for(var cell=0; cell < this.size; cell++){ | |
| this.drawCell(); | |
| } | |
| } | |
| this.addEvents(); | |
| }, | |
| cleanGrid: function(){ | |
| this.container.html(""); | |
| }, | |
| drawCell: function(){ | |
| this.container.append(this.cellElement()) | |
| }, | |
| cellElement: function(){ | |
| return $('<div style="'+this.cellStyle()+'"></div>'); | |
| }, | |
| cellSize: function(){ | |
| if(!this.cellSizeCalc){ | |
| var containerWidth = this.container.width(); | |
| this.cellSizeCalc = (containerWidth/ this.size); | |
| } | |
| return this.cellSizeCalc; | |
| }, | |
| cellStyle: function(){ | |
| if(!this.cellStyleCalc){ | |
| this.cellStyleCalc = 'width: '+this.cellSize()+'px; height: '+this.cellSize()+'px'; | |
| } | |
| return this.cellStyleCalc; | |
| } | |
| } | |
| var btnCleanClick = function(){ | |
| drawer.cleanGrid(); | |
| var size = prompt('grid size ?') | |
| drawer = new Drawer(size); | |
| drawer.drawGrid(); | |
| } | |
| var drawer = new Drawer(16); | |
| drawer.drawGrid(); | |
| $('#btn-clean').click(btnCleanClick);</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
| .wheredivgoes { | |
| display: flex; | |
| width: 480px; | |
| flex-flow: row wrap; | |
| } | |
| .wheredivgoes > div { | |
| background-color: lightgrey; | |
| } |
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
| function Drawer(size, container) { | |
| this.size = size; | |
| this.container = container || $('.wheredivgoes'); | |
| } | |
| Drawer.prototype = { | |
| addEvents: function(){ | |
| $('div').on('mouseover',function(){$(this).css('background-color','black');}) | |
| }, | |
| drawGrid: function(){ | |
| for(var row =0; row < this.size; row++){ | |
| for(var cell=0; cell < this.size; cell++){ | |
| this.drawCell(); | |
| } | |
| } | |
| this.addEvents(); | |
| }, | |
| cleanGrid: function(){ | |
| this.container.html(""); | |
| }, | |
| drawCell: function(){ | |
| this.container.append(this.cellElement()) | |
| }, | |
| cellElement: function(){ | |
| return $('<div style="'+this.cellStyle()+'"></div>'); | |
| }, | |
| cellSize: function(){ | |
| if(!this.cellSizeCalc){ | |
| var containerWidth = this.container.width(); | |
| this.cellSizeCalc = (containerWidth/ this.size); | |
| } | |
| return this.cellSizeCalc; | |
| }, | |
| cellStyle: function(){ | |
| if(!this.cellStyleCalc){ | |
| this.cellStyleCalc = 'width: '+this.cellSize()+'px; height: '+this.cellSize()+'px'; | |
| } | |
| return this.cellStyleCalc; | |
| } | |
| } | |
| var btnCleanClick = function(){ | |
| drawer.cleanGrid(); | |
| var size = prompt('grid size ?') | |
| drawer = new Drawer(size); | |
| drawer.drawGrid(); | |
| } | |
| var drawer = new Drawer(16); | |
| drawer.drawGrid(); | |
| $('#btn-clean').click(btnCleanClick); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment