CSS struggles
https://codepen.io/brightDN/pen/dyQrBBN
Isn't css fun? :(
The
.retile-button is not correctly put to the center (its the button at the bottom
I changed my topbanner coloring a bit to see if it would be at 50% it isn't D: not even the start is
On top of that, quick flex-box question, how do I put a max on the amount of objects in a flexbox? Is that with flex-row-end:4? just guessing here
Basically I need to place them so they form a square, however this should also be a variable as the amount would differ with the amount of objects that will be in the flexbox28 Replies
place-items property is belongs to grid/flexbox you can use it independently try adding display:block; and margin-inline:auto; insteadWell, that did the trick, thanks
But how did
margin:auto not do the trick, usually that puts it to the middle no?
Unless it doesn't work on a buttonas I assume it's not a block-element but an inline-element
And what about my question about flexbox?
As a bingo that's not a square is kinda difficult to navigate xdiirc for margin:auto you need grid
or inset
ahh, so basically if there's no grid or no flex
doing
display:block and margin-inline:auto; is the safest go to if you wish your elements in the middle?if it's and inline level element like a <button> you need display: block if it is a block level element already margin-inline: auto is enough
alright, thanks
that's good to know, I used to think that
margin:auto always would do the trick
Knowing this will help me a whole lot, thanks you
But what about the issue with the flex-box? I gave it some thought myself (I haven't yet played around with it) but I was strugglign to come up with a solution inm y head
I can't really alter classElements in JavaScript, as far that I'm aware of
I know i can add and remove classes but I don't know if I can manipulate the classes myself
Tho if it is possible to manipulate classElements , then all I would need is an element to determine the max amount per rowyou can't do that with flexbox, this kind of things is for grid
hmm I see, so I should best use grid instead and is that value changeable using javascript or is there a setting that would make sure a grid always results in a square shape
Otherwise what I could do is make multiple classes to decide the grid max row
and change them using javascript but that feels like too big of a workaround, with too many classes doing noting
as only one would be used at a time
grid-tempalate-colums: repeat(4, 1fr) will give you 4 equal columns
ahh I see, but what if it needs to be more?
What I mean is, the bing ocan be for example 5x5, which would mean I'd need 5 colums and rows
The repeat(4,1fr) would only work if the bingo is a 4x4
the bingo could also be a 3x3, so then it would need repeat(3,1fr)
is there a way to change this without having to create multiple classes and toggle using javascript
element.classList.add("class) and element.classList.remove("class)you can use custom property and set it with js
element.style.setProperty("name", value)
then in css instead of the number you use var(--name)so basically
or did I understand it wrong?
no need to set it on the root
ahh, so I don't need to put it in the root alright
And I assume that the element would refer to
document.querySelector(".retile-button") ?
I didn't know you could change the attributes of cssclasses, this is handy to knowyes
okayy, one more question, as this is something that could be very useful
say that multiple styles have to change at once, as the ysometimes do
in css you'll put it in
:rootthen as a variable and every class that uses it will just use --var(varname)
How do you use the :root as the element in element.style.setProperty
as this would be the most efficient way
otherwise you would have to iterate over the DOC element and filter everything, no way that this would be the simplest and most efficient solution
for example, you wish to set a layout and make people choose their coloring and stuff
So in essence you'd have for example
:root is html element 😉
OH it is?
so then you can just do querySelector(":root") ?
I thought :root was css only xd but so its an html element alright
document.documentElementyeh so
document.querySelect(":root") right?
or is it literally just document.documentElement if you wish to select :root so meaning that document.documentElement = :rootdocument.querySelector(':root') but both should workah I see, so in essence
:root is just documentElement, as in every existing element in the projectdon't know what you mean by every existing element in the project but sure 😄
yeh, I worded that a bit weridly don't worry!
thanks for the help!
I think with these things figured out I'll be able to get V1 online
I don't see any other things I would need assistance with, tho for version V4 I'll probably need some advice on best practice because I do know of a way to do it but I hope there's an easier solution, but that's for over a month or so 😂
good luck 
(v2 would be a time challenge added, v3 would be migrating the data to json, bc this unfinished js file im using for the data is already more than 2000 lines and its not even 1/5th on the way so I rather put tis in a json file eventually so its not continiously loaded in and taking up space, v4 would then be languages)
so for languages, my idea is to just let my JS create the document based on the language, but I hope theres a simpler solution
v5 is maybe impossible, but I'll have to ask in the back-end for this one, as I'd want to migrate the json files to a database, free if possible with infinite calls (usually the freee ones have a max amount of calls) so that I can create a PvP environment with the bingo and sync up the pages with server-sided php as I don't think you can run php code from a gitPage (I don't wanna payup for this little for fun project)
And the pvp would also have a lockout version, meaning once one caught it no one else can, I can just use a database to get this done and letting the webpage read the database information out every 10 seconds, while not ideal its the solutation I came up with to replace the need for server-sided code as I don't have a server
unless a gitPage counts as a server, do you have any idea about this? @mannix_ would I be able to sync up multiple pc's so they'd have a room so to speak using a gitPage and PhP?
back end is black magic for me 😄
Right xd alright I'll ask in back-end when it comes to that point
if it's not possible then my bingo will just be singleplayer and V5 will be to copy your bingo and to input one from clipboard, so they can sort of play pvp
OH Speaking of this, Ive tried doing that once before but I couldn't get a direct paste going, I kept on getting errors, don't remember them tho, any idea on if its even possible to do a direct paste?
and then that'd be complete and I can finally put my first project to a portfolio xd getting projects for a portfolio to get a job in programming is taking so long tho, this is only my first project yet and its not even close to being finished as I'll also get a sort of wordle for it and a teambuilder, but also a typematchup chart and a dex