✔ Learn Svelte's basic functionalities
✔ Understand Svelte's advantages
✔ Start a simple Svelte project
✔ Deploy a Svelte project
All the required information to install dependencies can be found in SETUP.md.
💡 You may want to take a look at the Svelte tutorial and documentation for this workshop.
To begin with, we will learn how to create a simple component and display it in our page.
Create a components directory in src/ which will contain a file named TopBar.svelte.
Inside it, you'll create a basic top bar that will be fixed at the top of your page and display the title of your application.
Display your component with a cool style 🚀
For this, you can use CSS or a UI library like Svelte Materialify
Then, you can call it inside your App.svelte to display it 🤩
You've created your first Svelte components, that's cool! But your application is a bit empty, isn't it sad? 😢
Create file named Event.svelte in src/components, it will contain a component to display an event with the following props:
idas anumbertitleas astringdescriptionas astringstartingDateas aDateendDateas aDate
💡 You can export these variables as types with a script module to define your properties.
💡 You may want to create an array with every month of the year displayed properly. The same applies for the days of the week.
Then, create two events in your App.svelte and display them.
Don't forget to apply styles to your components 😉
It's time to add more events 🚀
Create a Button component which opens a Form component in the center of your page.
Your Button must store the state of your form (open or closed) as a boolean. You must also add two functions to control the state of the Form component.
You have to display another Button to close the page when it's open.
Add fields to your Form component to add new events.
You must add the following fields:
event namedescriptionstart dateend date
💡 The input tag will be useful.
💡 Take a look at the on:submit property.
A button must appear to cancel the form and another one to submit it. It should add an event to your page.
💡 You should use a store to synchronize your components.
Congratulations! You made your first Svelte application. To go further, consider implementing the following bonuses:
- Add a login form to handle multiple users.
- Create multiple pages using SvelteKit
- Implement Dark Theme support.
 Tom Chauveau |
|---|
🚀 Don't hesitate to follow us on our different networks, and put a star 🌟 on
PoC'srepositories.