Grid issues
Okay so, I've been fiddling with this for over 30 minutes, trying various things but I just don't get the result I want
https://codepen.io/BrightDN-the-sasster/pen/RwEroVO
THis is the codepen, basically I need the items in the grid to be square and have the size of the border around adjusted to the size of the bingo (For some reason I'm even failing to get that right lol)
(As this is a 3x3, the squares can be a bit bigger just have to make sure it doesn't end up requiring scrolling as Id love this design to work both phone and pc alike)
If you look on the codepen, I got them square, but the grid is...Still big, bigger than the items it contains lol
But I was also wondering if it is possible to automatically change it depending on gridSize
it goes from 3x3 all the way to 7x7 obv the 7x7 requiring the smallest possible options
I was already thinking of doing it with a switch in javascript and switch out classes depending on chosen GridSize
But I was wondering if its possible to do this CSS only, as if it is, that'd be much more efficient
Basically, eventually it'll need to somewhat have the same idea as my prototype, just.. More, bigger, customizeable
https://brightdn.github.io/sv/
^ See how square they are in link above and not an enormous white spat next to it? I can't recreate what I originally made...
And one is w/ flexbox, the other w/ grid so I can't blindly take it over
The prototype was created w/ only 1 gridsize in mind, namely 5x5, in the current iteration of it it needs multiple sizes and so obv the design has to adjust correctly to it, but I am failing to do so
The javaScript I'll have to add will not be an issue, I can handle the js fine on my own, it's just css that's a weakpoint for me, as designing isn't my strong suit, so I never managed to find some love for css to really dig into it
(Shoutout to one of the people here that gave me more insight of how array manipulation works btw, its extremily useful, way more efficient than what I did)
38 Replies
My other prototype, also using grid is capable of keeping the grid good but the sizes are bad
I copied the code, but its no use, I don't know what's causing it to be different
Then again the grid adjusts to the outlines, the outlines don't adjust to the grid... which is not the desired outcome
As then they can't be square and then the bingo looks weird as hell
@.brightie if you want each bingo space to be square, but "not with a bunch of white space", do you mean you want to shrink the spaces? or you want to increase the size of the image + text?
Well
I don't know what's causing the white space on the right :p but its not supposed to be there
I think for the 3x3 I'd like the tiles (so img and text) bigger
I've tried just making them bigger before but the red black white background doesn't adjust along (its the parent element so I thought it would auto adjust if the child got bigger than the parent, but it didn't..)
for for example a 4x4 Id want the squares to be a bit smaller
I hope this makes sense
so something like this?
everything is centered in the space 🤔
that's the white space I'm talking about xd
The bingo is only 3x3, this enormous spat doesn't need to be there lol
I think its bc the grid tries to fix its size to the parent? But I need it the other way around tbh
bc as the gridsize changes, so should the height of the tiles
including text and images
the tiles on their own ill fiddle w after
thats just bc the image is too small
ohhh that space
yess, my apologies for the confusing communication
I should've send a picture of it from the start to avoid confusion
like this then?
yess exactly like that!
But if the grid size were to get bigger
In other words, 4x4, does it adjust correctly?
ah I see the issue
will need a few minutes then
I'm so annoyed tho
I've been fiddling w/ it for 15-30 mins
You instantly come w/ the solution 😂
doesn't quite shrink the space sizes down for 4x4, just adds another equally sized column so gonna try to get that desired effect
well, what I could do for adjusting is basically created classes
aka gridLarge, gridMedium etc etc
Then do whatever solution you gave for this 3x3
And then toggle using javascript, being basically
but I was wondering if its possible to use css only for it
As putting up a whole switch function for it (altho its better than using if if if if if if if) seems less efficient
hows this?
yes, that'd be perfect
but I would probably have to throw them into a classToggler?
Or are they automatically adjusted?
all automatic & css only
and you don't need width parameters, all you need is column count (and some logic to increase the number of pokemons/dom elements, otherwise you got a 4x4 with only 9 spaces filled lul)
for real?
Okay, now I'm actually fumingly annoyed 😂 I got lots to learn when it comes to css
But I never really gotten into it as I am so bad w/ design that I never enjoyed using css, altho it is a vital part of website development
oh I see, could you send the solution so that I can implement it into my css?
oh dw, I already have the function to make the correct amount of elements for the bingotable
sweet
cant paste cause of character limits but its pretty simple:
in the html, wrap
bingoGrid
in a new div called bingo-grid-wrapper
tbh, I also haven't used grid very often, maybe that's why I couldn't think of the css to use
But on my prototype it was adviced to use grid instead of flex and so I did
I see, it is indeed very simple
OH so aspect ratio is written like that, I thought it was like "1:1", that gave an error so I did 1, didn't give an error assumed it was correct lol
Okay so, if I understand it correctly, I need to put another div around my bingoGrid div and have the new div be the wrapper
I know I may sound stupid but, what is the reason for this being needed
basically the issue was
display: grid
growing to take up full width of the parent, so it needed something to wrap it and determine its size, aka .bingo-grid-wrapper
we can use aspect-ratio
to make sure the tiles are always square regardless of the changing size, and make that a grid as well to easily center stuff
finally the only thing that needs to change is the number in the repeat()
function for column count!
of course you can mess with .bingo-grid-wrapper
's width, such as adding max-width: 100%
or even one-liner it with width: min(500px, 100%)
which will take the lower of the 2 valuesyep that's it in terms of markup
for the first solution (not accounting for column count), i just added
width: fit-content
on .bingoGrid
, however this makes it so adding another column will increase the width of the entire grid by 1 more column (450x450 -> 600x600) since its fitting content that has a fixed width (150x150 x 4). so if we take the reverse approach and define the width via the parent, we don't need fit-content
well, I could probably change the number in repeat() using javascript
Or simply remove the repeat from css and using javascript add it to the html element as
document.element.setProperty("propertyName", "setPorperty"
does that sound like a good solution or is it not really best practice
I mean I know static placing css is usually bad practice but in this sense, it'll change depending on whats chosen and can change along without having to refresh the pageare you using some sort of framework?
or just vanilla js
vanilla js
I think the most efficient way to write it would be like
theres also setting the property directly like
bingoGridElement.style.color = "red"
but i dont know off the top of my head what itd be for grid template columns, maybe style.gridTemplateColumns
? 😂isn't that sort of what I suggested just worked out? XD
also, is there a difference between setAttribute and setProperty then?
As when I used setProperty in the prototype, it did as it was supposed to
This one was done using setProperty if I am not mistaken
and use whatever method you like to determine
columnCount
, such as <select>
<input type="radio/text/range/number">
oh yeah setProperty will be fine then
havent written that kinda code in foreverwell, I already am reading the gridSize off of what I have in the dialog (when they click submit, the selected gridSize is chosen)
the value of the gridSize.value is the amount of elements that have to be made
but to get the columnCount I can just take teh square root of it, as that'll return the columnCount bc 3x3 = 9
sqrt of 9 = 3
is setProperty outdated maybe?
don't think so, and it shouldn't be bad practice because its something you have to set dynamically, unless you're using forms and server rendering a new page with the requested grid size..
most people just use frameworks that abstract writing that code into quicker simpler forms
yh, I am not writing php xd
OH Speaking of serversided, do you have any idea if I could basically use github for server sided code?
As these projects are well, for fun
but I also kind of want to use them for portfolio to get a job as programmer
But a part of this bingo I want to basically do PVP
but I rather don't pay for a server
If the github thing isn't possible I may have to revert to using database and read the database every 10 seconds but that can cause issues and also overload the database
uh i dont do much backend stuff but if you mean github pages then no it's not possible, you will need some machine running somewhere to keep a service online
that being said most things have a pretty generous free tier if you don't have thousands of users; for example Oracle Cloud Free Tier is always free if you don't go over quota
reading database every 10 seconds sounds unoptimal, try to refactor so you only read when needed?
I already have a bout 4 projects in mind, you have any idea if that'd be enough for a portfolio and a job as programmer?
This bingo is one of them (it'll have more than just this, it'll also have a timed feature, so you're racing against the clock, if I somehow get it to work it'll have multiplayer, I think I also want the people to choose what color they want to use regardless of solo or pvp, gotta look into how to get an rgb/hex selector for that)
Second project would be actually solving a real life issue at my current workplace (work in a store...Being able to quickly take note of expiry dates and all that is crucial on top of that general store managing and item location as a lot of coworkers including myself dont always know where everything is, so quickly grabbing phone, typing in articlename, boom found xd
Third project would be several boardgames, but virtually, either against pc, programming that sounds like it could be fun, or against players
4th project, well, its making sidethings onto project 1, for example, yk wordle probably
But then a pokemon edition
Or a teambuilder, etc etc etc
Lots of add ons, ofc all different pages but all w/ the same github repository
well, that's the issue
if I can't use serversided code, both instances of the website can't know if the other has filled something in
Therefore I can't write a function to read the database based on that
for example w/ lockout, its crucial the enemy knows they can't hunt for that thing on the bingo anymore
But if I can't write it via server and am forced to use databases for it
I'll have to be able to make the players aware of this
Unless I somehwo find a way to put a listener..no I can't put a listener on a database
oh, ill take a look into that oracle cloud thing
I don't expect many users on this anyway, unless somehow a lot of pokemon game players want to do bingos and challenging someone to do a bingo race and somehow find their way to the website i made
I think it could all be done in memory so you could just use a server without a database. maybe even cloudflare workers which has a generous free tier as well. unless you're trying to store win/loss history
i would just follow this guys advice, decide if getting a job is more important or building things you like is more important
https://www.youtube.com/watch?v=oC483DTjRXU
Coder Foundry
YouTube
The 1 Coding Project Idea Guaranteed To Get You A Software Developm...
Learn to build the bug tracker at https://learn.coderfoundry.com/
Bobby Davis explains what coding project to build, how to build it, and how to present it to an employer.
- WHAT TO BUILD Use a design pattern like MVC, include an attractive UI, use a database, solve a business problem, and add user authentication
- HOW TO BUILD Write an ...
yeah, I didn't read your free server suggestion yet as I was writing my database solution and why it should have to read often
Oh, don't get me wrong, I do want to get a job as programmer, but I am writing these websites bc I want to, I play pokemon games myself, some friends of mine do too
And I feel like it could be something fun to do, some friendly competitions
And the storemanager is technically also bc I want to do it, the store I work in is having losses due to bad practices of keeping the store managed correctly (A lot of expired products are found several months or maybe years expired already) and I want to fix that issue
I like the challenge behind it, there'll be a whole lot of things I'll have to think of, its fun to challenge mself in that way
I also want to make games, I got so many projects running through my head of things I want to make, webwise as well as gamewise xD
if I can make a job out of what I enjoy doing, I see it as a win win
Ill check that video out in a moment
Alread tho, thanks for all the help
I see, so according to that video
A bugtracker would be the most suited application to write to get a job, almost gauranteed if the steps are followed
Well, I am going to write it regardless, I can use that for other projects too, esp when I start on the games
Keep track of those bugs will be a huge help
Thanks!