svelte-tutorial
A series of projects to practice with Svelte.
Each project should have a link redirecting to a live demo. That being said, it is possible to set up an environment to run the projects locally:
move into the desired folder
cd "Light Bright"install the necessary packages
npm installnpm run devnpm run dev
Light Bright
Toggle colorful, bright lights on and off.
Strongman
Raise a small mallet to hit a receptive surface.
Tournament Bracket
Hihglight stages for a hypothetical tournament-based sport competition.
Key Value Pairs
Add, update and delete key value pairs. Highlight the values with visualizations.
Stopwatch
Track the passing of time and the gap between successive laps.
Word Frequency
Estimate the absolute frequency of the words in the input text.
Wind Chill Index
Highlight the wind chill index.
Concentration
Match cards in pairs.
Infinity Maze
Moves within the boundaries of an endless maze.
Smart Watch
Tinker with several applications in a hypothetical smart watch.
Picross
Draw stylized figures with a pixelated look.
Markdown Editor
Create an online editor to compose and preview markdown syntax.
Tweet Component
Display a tweet in a reusable component.
Typing Adventure
Track key strokes and their correctness against a provided string of characters.
Line Charts
Highlight the google trends for the Tour de France.
Roman Clock
Display the current time in a classic visual.
Star Wars Crawl
Edit and animate the opening crawls from a Star Wars movie.
Contact US
Edit an interactive contact card.
Basic Arithmetic
Compute and animate basic arithmetic operations.
Icon Maker
Create icons of different sizes and color.
Bug Feature
Animate a small visual with spring motion.
Thermometer App
Describe a temperature in a given range.
Bit Shifting
Illustrate a binary counter and how the bitwise operators << and >> work.
Line Drawing Grid
Draw a line in a grid with limited resolution.
Single Page App
Lean on Sapper and then SvelteKit to develop a single page app with multiple routes.
School Closures Maps
Highlight school closures at a global scale with a choropleth map and an interactive dashboard.
Pixelated SVG
Create vector graphics with a pixelated look.
Colorful Building Bl.ocks
Celebrate the anniversary of D3 library with the colors of the bl.ocks created through blockbuilder.org.
Two Way Binding
Illustrate how Svelte binds the state to HTML elements.
Repeating Color Scheme
Toggle between two color schemes without user input.
Await
Explore the await block to:
Github Contributions
Highlight the contributions to a public repository with a series of area charts.
Actions
Explore the :use directive and Svelte actions to:
Countdown App
Count down an arbitrary number of hours, minutes and seconds.
Loto Seal
Search for Loto seal in the page.
Binding Typewriter
Explore input binding with input elements of type checkbox and radio.
Premier League Season
Highlight the 2020 to 2021 season of the football competition with a regular table and custom visualizations.
High-speed Trains
Highlight how high-speed trains have reduced travel times between Paris and other populous French cities.
F1 Tyres
Analyse the degradation and offset of different tyre compounds both with conventional visualizations and more striking visuals.
Seasonal Cheese
Highlight the seasonality of some types of cheese.
Dowsing Machine
Look for an item hidden behind one of five bushes.
Guess When
Guess when a video game was released in the span of a year.
Connect the Dots
Connect the points to trace the outline of a not-so-hidden figure.
Drawing Canvas
Draw with a series of selected colors.
Stopwatch Anew
Track the passing of time and the gap between successive laps.
Word Search
Find words hidden between superfluous letters.
Fubuki
Complete a grid so that the numbers in each column and row add up to the value described on each side.
Pong
Play a round of Pong or two. Two players. Keyboard input.
Delayed Countdown
Count down an arbitrary number of seconds after an arbitrary delay.
Match in Pairs
Match cards in pairs.
Donut Values
Highlight a specific value and an average in a donut chart.
Sokoban
Move crates above designated areas.
Slider Quiz
Answer questions with a number selecting the value in a range.
