ot | Help me for HTML CSS pls (I wanna die)

[glacial axle]

😭

WHY CAN'T I CLICK ON THIS FCKING BUTTONNNNNN

[cunning oracle]

se connecter?

[glacial axle]

oui

[cunning oracle]

show html

if you used the z-index i mentionned, it might be that

[cunning oracle]

what is the button supposed to do ? 🙂
you have no action on it

[glacial axle]

yes

but I can't click

like my mouse doesn't change for exemple

[cunning oracle]

yes

in your js add

document.getElementById('send').onclick = function() {
console.log('clicked on button');
}

[glacial axle]

.stupid

[raw yoke]

https://tenor.com/view/formula1-f1-i-am-stupid-stupid-gif-15825263

[cunning oracle]

also, if you are going to respect the html syntax

what you're doing is a connection form

[cunning oracle]

so it should be in a <form> tag

[glacial axle]

oh

[cunning oracle]

and to submit these you don't use a <button>
you use a <input type="submit">

[glacial axle]

didn't know

[cunning oracle]

no problem 😉

[glacial axle]

like tbh I have 1w left and I just begin (couldn't begin before)

I'm quite in shit

[cunning oracle]

what do you have to do overall

[glacial axle]

here is what I have to do

[cunning oracle]

oh thx

[glacial axle]

btw, do you know how to put text transparent with like [e-mail] in E-mail case when I'm not in?

[cunning oracle]

placeholder="[e-mail]"

[glacial axle]

in my HTML I guess?

[cunning oracle]

on the input tag ye

[glacial axle]

sry I ask stupid questions

[cunning oracle]

it's not a stupid question 🙂 you're learning the stuff

[glacial axle]

ye but I'm rly bad

others already have done their API

[cunning oracle]

what endpoints have you done so far

[glacial axle]

wdym

[cunning oracle]

GET /pokemons/{id} page 4

this is an endpoint

[glacial axle]

0

[cunning oracle]

maybe you want to start with this

[glacial axle]

I just have this page from all this project...

no I'll finish with this

[cunning oracle]

well you'll need the page at some point

[glacial axle]

last 2 times we had to build an API I didn't understand anything and didn't do it

I tried my best

but I just didn't understand anything

so I want to do what I know I can do 1st

do max % possible

[cunning oracle]

100% speedrun WR

[glacial axle]

cause I know that I'll spend the entire week on the API for nothing cause I wont have anything

WR = ?

[cunning oracle]

world record

[glacial axle]

oh

ok

but I'm bad. I don't have enough time

for others it's enough but for me who struggle it's not...

just, how can I change placeholer color?

I found

but I don't find how to put it a bit more on the right

[cunning oracle]

apparently it's gonna be input::placeholder

in css

[glacial axle]

ye

done

[cunning oracle]

can you remind me how much your school costs?

[glacial axle]

7000€/y

[cunning oracle]

d'oh

[glacial axle]

9000€/y from 3rd year

[cunning oracle]

and it's a 5y degree?

[glacial axle]

but last 2y is in "alternance"

[cunning oracle]

okok

[glacial axle]

so I don't pay

just pay 3 first year

but with fees and all, it's 30.000€ for 3y

[cunning oracle]

think i paid 35 euros overall for my 5y at uni

[glacial axle]

and you surely got more help than me

[cunning oracle]

im puzzled with the project, i can't see where you're supposed to hit to login

[glacial axle]

fr it's not even the school everyo)ne presented me

[cunning oracle]

what was it described as?

[glacial axle]

everyone was telling me "you come when you want as long as you give your projects in times"

I have a planning for everyday

[cunning oracle]

so you actually got lessons?

[glacial axle]

no

we don't have any lessons except english

[cunning oracle]

so what's the planning for then

[glacial axle]

for nothing

just we have to be here

that's all

10h - 17h

there is worst for sure

but what's the point to come if I don't have anything planned?

[cunning oracle]

what do the others do?

[glacial axle]

and distancial days but these are going to disappear cause it was director who was fighting against national direction who is changing everything just gave her demission

[glacial axle]

wdym

[cunning oracle]

the other students who come every day between 10 and 5

what do they do at the school

[glacial axle]

we all work

we are in a room

and we work

[cunning oracle]

what happens if you don't come to do the work and do it at home tho

[glacial axle]

so we are going to have to follow national direction: 8h - 20h everyday without day off

[glacial axle]

you can get fired

[cunning oracle]

not even saturday sunday?

[glacial axle]

weekend of course

[cunning oracle]

ah ok

[glacial axle]

but I have a day off during the week

usually tuesday (mardi ?)

but it change nearly every week...

[cunning oracle]

yes tuesday mardi

[glacial axle]

Quite annoying for me who wanted to find a job ):

[cunning oracle]

you already have one, it's the projects at school

[glacial axle]

yes

but I would need money

cause sadly money doesn't fall from sky

[cunning oracle]

parents can't afford the school?

[glacial axle]

moreover if next year I want to live with my gf, I'll have to pay

[glacial axle]

they pay

[cunning oracle]

anyway, how's this login page going

[cunning oracle]

slight details, how far is the placeholder frm the left?

[glacial axle]

10px

padding: 10px;

[cunning oracle]

first page, it says mobile phones and computers

[glacial axle]

yes

[cunning oracle]

so you can't use pixels as a unit

[glacial axle]

idk how to do without it

I only understand px...

[cunning oracle]

https://www.w3schools.com/cssref/css_units.php check the relative units 🙂

[glacial axle]

nearly everything is with px, I can't change everything...

[cunning oracle]

they gave you the css?

[glacial axle]

no

[cunning oracle]

you can change everything

[glacial axle]

it would be too long

I would have to find what it is in %

[cunning oracle]

https://github.com/Rebstew/historycraft-website/blob/main/assets/css/style.css

[glacial axle]

?

what's that?

[cunning oracle]

example of css i wrote, the px unit is barely used

[glacial axle]

wd for you

[cunning oracle]

all the texts i used rem

[glacial axle]

you are smarter than me

[cunning oracle]

i'm more experienced

[glacial axle]

this is not that I can't

just I have too many things to do

[cunning oracle]

you can fix this now or pile the shit and have a huge pile of shit to go through at the very end

choice is yours 🙂

[glacial axle]

I come back in a few minutes

I'm too depressed for now

[cunning oracle]

you can do this, don't worry. but you can probably not do this alone

[glacial axle]

at the beginning it was supposed to be done at 2

but after 4d they came and said "this was an error, this is to do alone"

[cunning oracle]

are you supposed to also code the backend? it's unclear from the pdf

[glacial axle]

yes

I'm supposed to do all

[cunning oracle]

okay

do you have a rough idea of where to start on that part, database, server technology..

i would suggest node, express and mongo

[glacial axle]

i will do with JS

cause I know JS

but everything with DB I'm lost

@cunning oracle btw, how can I center my div with relative things...

[cunning oracle]

node and express are using javascript, mongo stores json

[glacial axle]

ye for node ik

like it's nodejs so xD

[cunning oracle]

ye

[glacial axle]

I just did top: 50%; and left: 50%; ...

[cunning oracle]

it did work

[glacial axle]

?

[glacial axle]

oh..

[cunning oracle]

what i would use for all this fucky alignment is flex

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

everything that's about alignment i just use flex boxes now, it's just hyper convenient

[glacial axle]

thx

but

[cunning oracle]

how did you do it?

[cunning oracle]

hmm

[glacial axle]

and I didn't do it like that

tbh

this is the result of this code:

[cunning oracle]

oh.

tbh, they mentionned using bootstrap

which has super convenient classes to add for that

[glacial axle]

yes but I can't do all with it...

[cunning oracle]

https://getbootstrap.com/docs/4.0/utilities/flex/

wdym

[glacial axle]

I will never learn

[cunning oracle]

oh you will learn dw

[glacial axle]

I just want to at least do this..

Everyone did everything by their own

[cunning oracle]

alright

[glacial axle]

just this

just this page

just to understand...

[cunning oracle]

the percent idea is good, the problem is it's the position of the topleft corner

so if you wanna position it using that, you also need to subsctract the half width/height of your element, and i don't think in css you can know it

[glacial axle]

I found a way on internet to center horizontally

[cunning oracle]

yes

problem is always center vertically

in css

maybe a wee bit of flex box for this specific thing could help you finish

[glacial axle]

tbh I don't rly want to to be at the vertical center

here it's a bit up

[cunning oracle]

just check it's ok in mobile

[glacial axle]

oui

it's ok on mobile

[cunning oracle]

good good

let'#s move on then

[glacial axle]

idk how to do to move it lower

@cunning oracleany idea? /:

[cunning oracle]

maybe flex 😄
but you should really move on to the next bits

[glacial axle]

wdym

[cunning oracle]

the rest of the project

[glacial axle]

I can't now, it's not even at the center

it's like this

[cunning oracle]

oh

just put display: flex and align-items:center to the container that holds your form

[glacial axle]

already done

#login {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2e2e2e;
    background-size: cover;
    max-width: 700px;
    height: 400px;
    border-radius: 30px;
    box-shadow: -5px 5px 15px rgb(31, 31, 31);
    scale: 130%;
    opacity: 0.98;
    margin: 0 auto;
    vertical-align: baseline;
}

[cunning oracle]

show the html?

[glacial axle]

<!DOCTYPE html>
<html>
    <head>
        <html lang="fr">
        <meta charset="utf-8">
        <title>Pokedex - Connexion</title>
        <link rel="stylesheet" href="login.css">
        <script src="login.js"></script>
    </head>
    <body>
        <!-- <img id="back" src="Assets/ethan_ho_oh_hd_pokemon.jpg"> -->
        <div id="login">
            <center>
                <h3>Connectes-toi</h3>
                <br>
                <h5 id="mail_title">E-mail :</h5>
                <input type="email" id="mail" pattern=".+@" required placeholder="[e-mail]">
                <br>
                <h5 id="pass_title">Mot de passe</h5>
                <input type="password" id="mdp" required placeholder="Mot de passe">
                <br>
            <button id="send" type="button">Se connecter</button>
            </center>
        </div>
    </body>
</html>

[cunning oracle]

ah ik

it's the body tag that doesn't take all the height of the window.

also, to make it work, your login div MUST be inside another container where you will apply the flex rules (align content, justify content..)

you shouldn't do it on body

<!DOCTYPE html>
<html>
    <head>
        <html lang="fr">
        <meta charset="utf-8">
        <title>Pokedex - Connexion</title>
        <link rel="stylesheet" href="login.css">
        <script src="login.js"></script>
    </head>
    <body>
        <div class="centeredContent">
            <div id="login">
                    <h3>Connectes-toi</h3>
                    <br>
                    <h5 id="mail_title">E-mail :</h5>
                    <input type="email" id="mail" pattern=".+@" required placeholder="[e-mail]">
                    <br>
                    <h5 id="pass_title">Mot de passe</h5>
                    <input type="password" id="mdp" required placeholder="Mot de passe">
                    <br>
                <button id="send" type="button">Se connecter</button>
            </div>
        </div>
    </body>
</html>

#login {
    background-color: #2e2e2e;
    background-size: cover;
    width: 25%;
    max-width: 700px;
    height: 400px;
    border-radius: 30px;
    box-shadow: -5px 5px 15px rgb(31, 31, 31);
    opacity: 0.98;
}

.centeredContent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh
}

(i used height 100vh for the content not spreading enough in height)

[glacial axle]

@cunning oracle hey thx for the help, can I ask you something else?

[cunning oracle]

ofc

[glacial axle]

when it's like this, the box doesn't "open" on sides

it makes the box rly small

it would be better it "opens" on sides

[cunning oracle]

ermmm, say it jn french pls 😂

[glacial axle]

😭

Je suis si nulle que ça ? 😭

en gros

pour que ça s'élargisse sur téléphone

par que ça reste aussi petit

car c'est adapté pour PC mais sur tel... /:

[cunning oracle]

ah yes erm… i usually use bootstrap for that lol. it allows you to define different sizes in percent in flex, depending on the screen size

[glacial axle]

it's not important so I'll now do the back

no, I'll do the create acc page

[cunning oracle]

you need media queries (google it) to define breakpoints that basically mean “this js a phone”, “this is a tablet “ “this is a computer “

yeah you should 😉

[glacial axle]

it means I have to do a new button

@cunning oracle

:c

[cunning oracle]

si

it should be an <a> tag btw, that sends you on the register page

[cunning oracle]

yes

[glacial axle]

yes

and it does what I showed u

[cunning oracle]

also you don’t need to use that many ids, most of what you want to format is gonna be classes 🙂

use id if you need some specific behaviour in js

[glacial axle]

I learnt that id and class is the same

and I like id

so I use id

[cunning oracle]

(you can also add behaviours to all elements in a class but it’s more tedious)

not really, an id has to be unique

if you do #foo, you know there can be only 1 element on the whole page that fits

[glacial axle]

seems logic?

[cunning oracle]

it does yeah 😄

so imo, you shouldn’t use ids to apply css, most of the time

but rather put the css in a class, that you will reuse on similar components (buttons for instance)

[glacial axle]

@cunning oraclejust how do I move this up pls :c

[cunning oracle]

just put it in your div, under the connect button?

[glacial axle]

.

and I want it to be out of the grey box

[cunning oracle]

where is it in the html

with the flez thing it should be centered and just under the big form

[glacial axle]

I puted it out of center cause else it makes all move

[cunning oracle]

put it in the centeredContent siv

but not in login

[cunning oracle]

also remove the center tags inside the form, you shouldn’t need them as they’re deprecated

hmm

flex-direction: column

add that in centeredColumn in the css

[glacial axle]

oh

well done

[cunning oracle]

yay

[glacial axle]

do you think there is a way to put it closer from the box?

I found a way

it's a bit of solution Z but it works xD

[cunning oracle]

how did you do it?

[glacial axle]

I removed margin bottom from login

puted it in new

and added a top margin in new again

[cunning oracle]

yeah reducing the margin was the way to di it

[glacial axle]

I removed the margin

this was the margin which was here to move the case a bit upward

[cunning oracle]

ok time to do some backend now

hope the people around you will have some tips to give you 🙂

[glacial axle]

ok I wont ask you anything anymore dw

[cunning oracle]

well you can, but i might not know

[glacial axle]

here I'm doing new acc front

it should be quick

@cunning oraclejust, why is my button like this? I don't manage to make it wider

[cunning oracle]

shiw the html of the button and the css associated

in the inspector

[glacial axle]

When I have my mouse on it

it just show me center /:

and now it works I make it wider

but still

button still doesn't work

[cunning oracle]

open the center tag on the right

[cunning oracle]

click on yout button in the inspector and check the width of it in the effective css

also, absolute link in the href? no good

[glacial axle]

??

[glacial axle]

why

[cunning oracle]

because the links won’t work on another computer

[glacial axle]

yes but I don't have any other choice /:

it's not in the same foler

[cunning oracle]

do ../ to climb the file hierarchy

[glacial axle]

oh thx

[cunning oracle]

also, avoid spaces in the folder names

[glacial axle]

ok

but if we come back to my button

why can't I click on it :c

[cunning oracle]

because a button has no default behaviour

and with css you’ve removed the visual cues that it’s clicked

[glacial axle]

oh

how do I bring it back

[cunning oracle]

you need to add :active iirc to change the colour to a darker colour than that when it is not clicked

a new class

with just the color

[glacial axle]

like that?

[cunning oracle]

yea

idk if it’s one or two : for the subclass

[glacial axle]

@cunning oracleI'm definitely better for backend than frontend lmao

[cunning oracle]

ah good 🙂

i prefer frontend personally

[mint skiff]

ooh a html thread

this will be helpful

[mint skiff]

also im not the best person to give advice on this but isn't the <centre> tag outdated in html5

[cunning oracle]

it is deprecated ye

[mint skiff]

yea

[cunning oracle]

it serves no syntaxic purpose and therefore should ditch

[mint skiff]

learned that the hard way

until last week, i had no idea how powerful html animations could be

[cunning oracle]

don't need more help?

[glacial axle]

I wont finish so no

but thx

[cunning oracle]

you won’t finish as in?

[glacial axle]

didn't understand :c

[cunning oracle]

what do you mean with that

for what reasons

[glacial axle]

login/registration system

[glacial axle]

cause I just don't understand how to do

[cunning oracle]

people at school haven’t been able to explain to you how to make this bit?

[glacial axle]

they didn't explain me

[cunning oracle]

not teachers, but classmates

[glacial axle]

yes, they didn't explain me

[cunning oracle]

you’ve asked but they didn’t explain? 😦

[glacial axle]

I asked one

but he doesn't know how to do too

[cunning oracle]

well, you have to ask more until you find one that knows

it’s part of the job 🙂

[glacial axle]

I don't talk to others

[cunning oracle]

unless you’re excellent, you can’t afford to stay isolated and not talk to people, i’m sorry!

[glacial axle]

I don't know how to do

I'm worst at talking to ppl than progamation, just to give you an idea...

@cunning oracleI asked to as 2nd person, she told me to watch tutorials

[cunning oracle]

very helpful..

surely one of them will have a wee bit of time to explain to you 🙏

[glacial axle]

@cunning oracleHey, do you know why it's like that? /:

[cunning oracle]

what do you want to do

[glacial axle]

the image to be in my circle

[cunning oracle]

oh i see. what you want to do is draw the image that changes first, then draw the circle ontop of it.

so i would put 2 img tags in a div, that each take the same dimension

the circle being transparent in tbe middle

do you follow what i mean?

[glacial axle]

no

[cunning oracle]

first you draw the image in a square or sth

then ontop of that, you draw the blue image with a transparent circle in the middle

[glacial axle]

this is a button

[cunning oracle]

actually, the logo image just needs to fit in the center of the djv

set a background image to the button then, why is it a button

[glacial axle]

it' s a button cause I want it to redirect to yr profile

[cunning oracle]

alright, important bit about html

it’s a language that describes a page, it’s tags are syntax bits that have a specific meaning

if clicking on something doesn’t submit a form, but it changes the page you’re on, then jt has to be an <a> tag

in an a tag you can also have children like with the button tag

do you understand how to do it now or not?

[glacial axle]

I'm back

[cunning oracle]

hi back

[glacial axle]

but yes i understood

[cunning oracle]

great, hmu if you can’t pull it off 😉

[glacial axle]

hmu = ?

[cunning oracle]

hit me up

= tell me

[glacial axle]

ok ok

[glacial axle]

@cunning oracle hey, do you know how to espace my cards but they still stay at the middle?

[cunning oracle]

use the gap property on the thing that has the display: flex, example gap: 1em

i googled “flex margin between items” just so you know

[glacial axle]

ok thx

@cunning oracleuh..

[cunning oracle]

hmm

apparently there’s row-gap and column-gap

try either

[glacial axle]

nope

[cunning oracle]

hmm

it looks like there was a space already though, maybe one of your margins?

[glacial axle]

I deleted it but didn't change anything so no

[cunning oracle]

hmmm, in the inspector, click on the card in the middle and check the effective style, you should be able to see some margin there ig

take the name of the css property and try to tweak it

[glacial axle]

I found something but it doesn't change the fact that it's one column

[cunning oracle]

hmm

[glacial axle]

@cunning oracle

[cunning oracle]

hmm weird

can you inspect the top line to see how much space it takes?

[cunning oracle]

oh you removed flex

with display grid

[cunning oracle]

have you tried adding align-items: center to your #cartes @glacial axle

[glacial axle]

sorry I was too tired and I stopped to work

[cunning oracle]

npnp

[glacial axle]

@cunning oraclebut I'm back this morning and it didn't work ):

[cunning oracle]

did that change anything

[glacial axle]

nothing

[cunning oracle]

can you show me the same screenshot with the cartes selected and the inspector open?

[glacial axle]

with that?

[cunning oracle]

yes

[cunning oracle]

i can’t see the classes on #cartes :c

[glacial axle]

@cunning oracle

[cunning oracle]

keep on trying with the css, maybe there’s one column too many columns?

i can try something around 12:30 on my machine

[glacial axle]

I went on something else

cause time

I'm running out of time

[cunning oracle]

yep you are

[glacial axle]

@cunning oraclehey, were you able to try what you wanted?

[cunning oracle]

no but i can do it now

[glacial axle]

if you want this would be cool!

[cunning oracle]

ok, try justify-self: center on a card

does it give you the result you want? if it doesn’t, i will need a drawing of it

[glacial axle]

they moved a bit

[cunning oracle]

you defined 4 columns on your grid template column, is it what you want?

also no need for a br tag since you use display grid

[glacial axle]

no

only 3

[cunning oracle]

remove one “auto”

basically, align-items: center on the container will center vertically
justify-self: center on the content will center horizontally

like this

@glacial axle

[glacial axle]

Sry

I'm the subway to school

[cunning oracle]

ok np

[glacial axle]

I'll do it once I'm at home

[cunning oracle]

so, did you manage to send something that worked somewhat?

[glacial axle]

It's only frontend