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 install
-
npm run devnpm run dev
Toggle colorful, bright lights on and off.
Raise a small mallet to hit a receptive surface.
Hihglight stages for a hypothetical tournament-based sport competition.
Add, update and delete key value pairs. Highlight the values with visualizations.
Track the passing of time and the gap between successive laps.
Estimate the absolute frequency of the words in the input text.
Highlight the wind chill index.
Match cards in pairs.
Moves within the boundaries of an endless maze.
Tinker with several applications in a hypothetical smart watch.
Draw stylized figures with a pixelated look.
Create an online editor to compose and preview markdown syntax.
Display a tweet in a reusable component.
Track key strokes and their correctness against a provided string of characters.
Highlight the google trends for the Tour de France.
Display the current time in a classic visual.
Edit and animate the opening crawls from a Star Wars movie.
Edit an interactive contact card.
Compute and animate basic arithmetic operations.
Create icons of different sizes and color.
Animate a small visual with spring motion.
Describe a temperature in a given range.
Illustrate a binary counter and how the bitwise operators << and >> work.
Draw a line in a grid with limited resolution.
Lean on Sapper and then SvelteKit to develop a single page app with multiple routes.
Highlight school closures at a global scale with a choropleth map and an interactive dashboard.
Create vector graphics with a pixelated look.
Celebrate the anniversary of D3 library with the colors of the bl.ocks created through blockbuilder.org.
Illustrate how Svelte binds the state to HTML elements.
Toggle between two color schemes without user input.
Explore the await block to:
Highlight the contributions to a public repository with a series of area charts.
Explore the :use directive and Svelte actions to:
Count down an arbitrary number of hours, minutes and seconds.
Search for Loto seal in the page.
Explore input binding with input elements of type checkbox and radio.
Highlight the 2020 to 2021 season of the football competition with a regular table and custom visualizations.
Highlight how high-speed trains have reduced travel times between Paris and other populous French cities.
Analyse the degradation and offset of different tyre compounds both with conventional visualizations and more striking visuals.
Highlight the seasonality of some types of cheese.
Look for an item hidden behind one of five bushes.
Guess when a video game was released in the span of a year.
Connect the points to trace the outline of a not-so-hidden figure.
Draw with a series of selected colors.
Track the passing of time and the gap between successive laps.
Find words hidden between superfluous letters.
Complete a grid so that the numbers in each column and row add up to the value described on each side.
Play a round of Pong or two. Two players. Keyboard input.
Count down an arbitrary number of seconds after an arbitrary delay.
Match cards in pairs.
Highlight a specific value and an average in a donut chart.
Move crates above designated areas.
Answer questions with a number selecting the value in a range.