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:

1. move into the desired folder

   cd "Light Bright"
   

2. install the necessary packages

   npm install
   

3. npm run dev

   npm 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:

• fetch world data

• search for a specific pokemon

Github Contributions

Highlight the contributions to a public repository with a series of area charts.

Actions

Explore the :use directive and Svelte actions to:

• lazy load images

• show more information with a tooltip

• share a string of text on twitter

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.