Need help with css pong

hi
im new for coding, i was trying to do a pong game with Html Css and Js
i am pretty sure i do exactly like the tutorial i was watching but i have a
error : { expectedcss(css-lcurlyexpected)

*, *::after, *::before {
  box-sizing: border-box;
}

:root {
  --hue: 200;
  --saturation: 50%;
  --foreground-color: hsl(var(--hue), (var(--saturation), 75%);
  --background-color: hsl(var(--hue), (var(--saturation), 20%);
}


body {
    margin: 0;
    background-color: var(--background-color);
}

.paddle {
--position: 50; 

position: absolute;
background-color: var(--foreground-color);
top: calc(var(--position)* 1vh);
transform: translateY(-50%);
width: 1vh;
height: 10vh;

}

.paddle.left{
left: 1vw
}

.paddle.right{
right: 1vw;
}

are you sure that is correct?

i get a { expectedcss(css-lcurlyexpected) error just after

well its exactly like in the tutorial im 99% sure but dont work at 6.40 on this Beginner JavaScript Game Dev Project - YouTube

I am suspicious of it being just like the tutorial, you have more opening brackets than closing brackets

i have try this too who look better for me but still dont work

no, that’s just worse

have you ever used an hsl color before?

no its my first time/try to create/copy some code for pratic project for Js and first time i test css

i was learning Js and a bit of Html and i wanted to try and see some new way like learn by pratice i wanted to try to do Beginner JavaScript Game Dev Project - YouTube

everything was fine until 6:40 where i cant do modification like him where he change the hue to change the color
but the code at 6.40 and mine look the same no ?

*, *::after, *::before {
  box-sizing: border-box;
}

:root {
  --hue: 200;
  --saturation: 50%;
  --foreground-color: hsl(var(--hue), (var(--saturation), 75%);
  --background-color: hsl(var(--hue), (var(--saturation), 20%);
}


body {
    margin: 0;
    background-color: var(--background-color);
}

.paddle {
--position: 50; 

position: absolute;
background-color: var(--foreground-color);
top: calc(var(--position)* 1vh);
transform: translateY(-50%);
width: 1vh;
height: 10vh;

}

.paddle.left{
left: 1vw
}

.paddle.right{
right: 1vw;
}

In both of these two lines, you have an extra ( that should not be there. The video does not have the extra {.

hsl() is a function. The function has a name hsl and an opening ( and closing ) parentheses. The same is true for var()

This is your code:

hsl(var(--hue), (var(--saturation), 20%);

I think you might be misinterpreting the opening parentheses of the hsl() function as being part of the var() function.

hsl()
var()
hsl(var(), var(), 50%)
hsl(hue, saturation, lightness)
1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.