How to achieve this design?

[hard pine]

guys chek this codepen idk how to like make this possible u can see the previous ccode i have cut out it was just too many repitition and now i cant think of how to make it?https://codepen.io/saad-shehzad-the-bashful/pen/azoRMNB

i know its a messs and it hurts your eyes (i am a newbie)

[floral forge]

you placed a gradient to the body, a gradient to the div and a gradient to the background as it seems

[hard pine]

yes isnt that how it works?

[floral forge]

you also used this font it seems, ```css
@import url(https://fonts.bunny.net/css?family=alkatra:400|outfit:400);

[floral forge]

what do you mean by that?

[hard pine]

i mean is it the best way to do that? am i making a mistake?

[hard pine]

yes

[floral forge]

if that's what your trying to achieve then yes, that's a good way to implement gradients, if not the only without using an actual image

i don't see no mistake in the way you got this styling

[hard pine]

So, you can see the code that is between the /* */ comments, which I used to change the gradient on clicking. However, it is not the best way and causes a lot of repetition. I am not trying to use the toggle. How can I do so?

[floral forge]

i wouldn

wouldn't go to js

i would just do a CSS animation

you can do positions on the gradient

[hard pine]

But it's a JavaScript practice as I am learning JavaScript and trying to make a basic project out of it.

[floral forge]

in that case, i would still prefer the use of CSS, you anyway have to use CSS with javascript to make it.

CSS will just make your life easier

like if you got a real case personally i would prefer using CSS and finishing in 5 minutes rather than JS and having to think about logic and how to do the animation (around 30 minutes for me)

[hard pine]

YES, using the toggle to, I think toggle in classes?

[floral forge]

you just make a JS toggle changing classes of the objects you want to animate, and then make css code applying the animation to the class which the animation is turned on

[south maple]

yes

[floral forge]

also i don't see no toggle in the example you showed us..

sooo

is your toggle a click?

[hard pine]

YES

[floral forge]

yes

alright

you can add the click toggle with JS

[floral forge]

click listener*

and change the class

yeah

now make a gradient animation

and assign it to the active class

and i recommend adding the class not toggle-ing it because you will have to put the non animated on the standard class

[hard pine]

I am doing that, but why is it already applying the gradient? I want to apply the gradient when I click it, and I also want to change the gradient of the main box and the body to the same gradient as the button clicked.

[hard pine]

i didnt quite understand this sorry?

[floral forge]

if you do <h1 class = "class1 class2"> now that h1 element has both class of class1 and class2

if you put the non animated gradient on class1

and then add and remove class2 with a toogle, you can add the gradient animation to class2 and skip having to re-write the whole gradient + you won't have to write the gradient x2 times incase of a change

😄

[hard pine]

i updated the github take a look