Interactive number grid

Hi all… New to coding here. Trying again for a specific purpose, but the purpose keeps growing!

Originally I was simply trying to populate a googlesheets spreadsheet with data outputted from a simple python script. This I managed eventually! (yay me!).

However, my project has evolved, and I fear my needs have far surpassed my capabilities!

So… The question at hand - developing an interactive number grid. As I mentioned i’ve been dabbling with python, so would ideally like to continue on in this language.

What I am aiming to achieve, is a number grid from 1 up to potentially 10000, with specific numbers highlighted. The grid would be able to customize on the fly preferably, by adjusting the amount of columns.

Is anyone able to give some advice, or point me at some appropriate tutorials or sites, or tell me if i’m barking up the wrong tree entirely :slight_smile:



I’ve moved this to #curriculum-help:python to help specify the language and hope others can help.

Can you be more specific with your input/out goals?

do you want a variable like [10,10] that sets the grid size 10 by 10
then a random 1 or 0 for each cell, and say 1’s are background red.

Then you could change the [10,10] to [100,100] and make it larger?

The more info the better! Current code blocks/Screen shots of an example/Paint sketches of inputs & expected results :slight_smile:

Good luck & happy coding!


So the number grid would just be a generic 1-xxxxx number grid (as per attached image).

In this instance prime numbers are selected, but ideally you could either manually highlight the numbers or the running instance would have an input field that would parse comma separated values that would highlight accordingly. In the meantime, hard coding the highlighted numbers is what I have been doing.

I’m spitballing and reading on the fly, so will elaborate as I figure it out lol!

Thanks for moving post to appropriate area and the questions! Helps me rationalize my own thoughts as well! :slight_smile:


Let’s say you wanted to make it 100 X 100 (10,000) cells. And you wanted 3 buttons; ODD, EVEN, PRIME.

that is A LOT of “hard coding” to switch between the 3.

It’s easy to do ODD/EVEN with % remainder in JS (i’m sure there is a similar in python). Prime numbers do require a algorithm.

I would question your usage of a Google sheet in the first place, why not make a HTML table / static website?

BUT it really depends on your goal. And what you have already done is impressive connecting your code to the Sheets API :slight_smile:

Heh, thanks! :slight_smile: Connecting to the google api, and populating sheets was a fun mini project. Sheets was suitable originally for what I was doing (basically just outputting the results of a series of equations into appropriate cells), but yes, the project evolved and now GoogleSheets just isn’t suitable anymore.

Everything i’ve done thus far has just been connecting, equations and outputting text and the program ends. What i’m trying to achieve now (a functional GUI effectively) seems a lot more intimidating! But this may just be because I don’t understand how it works :wink:

I’ve often wanted to learn to code (I’m a Cisco/Windows Server engineer by trade), but I’m very goal focused - so I generally don’t start learning until I’m working towards a practical end.

Will go read up on the prime algorithm, and work with what you’ve given me so far - and see what I can work out!


@joatmon, this morning I stumbled into your post and though “Interactive number grid sounds like Sunday!”. So I did my quick version:

It turned out not really practical, as it takes about 650 ms for my algorithm to calculate primes up to 1,000,000 but codepen blocks any attempt to generate a million table cells with message “We stopped your script as it looks like you have infinite loop”. :man_facepalming:

Anyway, thanks for the idea and hopefully you will find anything interesting in my example

1 Like

Hah! So I take it “interactive number grids” are a common theme among new members are they? Sorry if I missed existing posts :slight_smile:

Looking at what you’ve created there, it’s similar to what i’ve been imagining - the prime difference (no pun intended!) is that what i’ve been trying to create has the ability to customize the grid columns, either on the fly via a click and drag method, or to specify prior to generating the grid, how many columns you would like.

On the fly would be optimal as it would allow quick and easy change of view for spotting emerging patterns.

Thanks for this! I haven’t really looked into the javascript side of things yet, so this will give me a template to begin working with from another point of view!

Also… Looking closer at the code… Dear god! Did you put that all together on a Sunday afternoon?? :smiley: Hopefully one day I’ll be able to code that quickly!

Have found some python code that looks really interesting. Using tkinter widgets to create an interactive GUI. I’m pulling apart code and reading how the class structures work on all the different aspects at the moment :slight_smile:

Between that, and the code that you guys have shown me, perhaps I can figure a way to do this!

Cheers guys!