Svelte Fundamentals

Adding Neoconfetti

Svelte Fundamentals

Check out a free preview of the full Svelte Fundamentals course

The "Adding Neoconfetti" Lesson is part of the full, Svelte Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Rich walks through adding a burst of confetti for when the user wins the game using the Neoconfetti package.


Transcript from the "Adding Neoconfetti" Lesson

>> There's one last little detail that I would like to add to this, and that is I wanna reward the player, if they succeed, with a little bit of confetti. So we're gonna install the Neoconfetti package. Then I'm using pnpm but you can use npm. So that is @neoconfetti/svelte.

And we're gonna import that into the page.svelte component. And then if we get into the win state, state is won, Then we're gonna create a confetti element. I'm gonna give it some styles, make it fill the screen. Offset it so that it's in the center. And then make sure that it doesn't intercept any points or events.

And then the way that we use the Confetti library, it's an action, use:confetti. We give it a stageWidth, which is equal to the window's innerWidth. StageHeight which is equal to, The window's innerHeight. And then, hopefully, if we've done this right, and we play another game and we win, we're gonna see some confetti.

All right, so we're looking for a badger. That goes there. I don't think we've seen that yet. The squirrel, I think, was this guy. All right, we have some confetti.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now