In this repo I set out to include and hopefully explain a series of projects using Svelte.js.
A light-bright app inspired by a take-home project at freeCodeCamp. A perfect way to ease in the framework and explain basic concepts, directly in the REPL.
Tags: getting started, repl, components, reactivity, events, dispatcher
A silly button allowing to raise a mallet and strike the puck of a carnival machine. Using SVG syntax, svelte reactivity and built-in motion functions.
Tags: reactivity, motion, spring, subscribe, tweened
Describe the eliminatory stages for a hypothetical sport competition, taking advantage of the <svelte:self> component.
Tags: self, store, custom store
Create a CRUD application to add/update/delete key value pairs. Highlight the items through D3 and two visualizations.
Tags: bind, custom store, crud, d3
Create an application allowing to track the passing of time and the lapse between laps.
Tags: setInterval, store, readable, animation, conditional statements
Elaborate the absolute frequency for every word included in a textarea element. Highlight the result through a table and a pie chart.
Tags: each, d3, fetch, animation
Compute the wind chill index on the basis of the input temperature and speed. Differentiate the result according to the chosen unit of measure.
Tags: form, dispatch, spread
A memory-based game in which cards are flipped and matched in pairs.
Tags: utils, each, svg, transition
An experiment with SVG syntax and the Aldous-Broder algorithm to create an endless game in which the player moves within the boundaries of a maze to reach a goal.
Tags: svg, algorithm, motion, grid, promise
Create a series of independent applications for a hypothetical smart watch.
Tags: svg, components
Recreate the basic structure of the popular puzzle game which allows to draw stylized figures with a pixelated look.
Tags: svg, table, transition
Create an online editor which allows to compose and preview markdown syntax.
Tags: markdown, markup, local storage
Create a reusable component to share a quote or even introduce an article.
Tags: readable, custom store
Build upon the concept developed in this pen to have an application tracking key strokes and their correctness against a provided string of characters.
Highlight the google trends for the Tour de France through simple, yet effective and reusable line charts.
Tags: d3, component
Use a readable store and SVG syntax to display the current time in a classic visual.
Tags: readable, svg, motion
Create an interactive form allowing to edit and show the opening crawls from a Star Wars movie.
Create an interactive contact card, editing and displaying the input information on two opposing sides.
Compute basic arithmetic operations and animate the solution with a staggered animation.
Create icons of different size using the Canvas API and the experimental Path2D interface.