├── Actions ├── Append │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ ├── main.js │ │ └── utils.js ├── Lazy Load Images │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ ├── main.js │ │ └── utils.js ├── README.md ├── Selection │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ ├── main.js │ │ └── utils.js └── Tooltip │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── global.css │ ├── icon.svg │ └── index.html │ ├── rollup.config.js │ ├── scripts │ └── setupTypeScript.js │ └── src │ ├── App.svelte │ ├── main.js │ └── utils.js ├── Await ├── Pokemon Search │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ ├── Entry.svelte │ │ ├── Favorite.svelte │ │ ├── Stats.svelte │ │ └── main.js ├── README.md └── World Data │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── global.css │ ├── icon.svg │ └── index.html │ ├── rollup.config.js │ ├── scripts │ └── setupTypeScript.js │ └── src │ ├── App.svelte │ └── main.js ├── Basic Arithmetic ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Calculator.svelte │ ├── Display.svelte │ ├── main.js │ └── utils.js ├── Binding Typewriter ├── Checkbox │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ └── main.js ├── README.md └── Radio │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── global.css │ ├── icon.svg │ └── index.html │ ├── rollup.config.js │ ├── scripts │ └── setupTypeScript.js │ └── src │ ├── App.svelte │ └── main.js ├── Bit Shifting ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ └── main.js ├── Bug Feature ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ └── bug.svg ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ └── main.js ├── Colorful Building Bl.ocks ├── Colorful Blocks │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ └── main.js ├── Final Demo │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ ├── Blocks.svelte │ │ ├── Highlight.svelte │ │ └── main.js ├── Highlight Component │ ├── .gitignore │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ ├── Highlight.svelte │ │ └── main.js ├── README.md ├── canvas Blocks │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ └── main.js ├── canvas Squares │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ └── main.js ├── treemap Colors │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ └── main.js └── viewBox Transition │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── global.css │ ├── icon.svg │ └── index.html │ ├── rollup.config.js │ ├── scripts │ └── setupTypeScript.js │ └── src │ ├── App.svelte │ └── main.js ├── Concentration ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ ├── index.html │ ├── script.js │ └── style.css ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Card.svelte │ ├── Victory.svelte │ ├── main.js │ └── utils.js ├── Connect the Dots ├── .gitignore ├── README.md ├── drawing.svg ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ └── main.js ├── Contact US ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Back.svelte │ ├── Front.svelte │ ├── Illustration.svelte │ ├── main.js │ └── utils.js ├── Countdown App ├── Count Down Interact and Tween │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ ├── Input.svelte │ │ ├── Output.svelte │ │ └── main.js ├── Count Down │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ ├── Input.svelte │ │ ├── Output.svelte │ │ └── main.js ├── Event Forwarding and Component Binding │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ ├── Input.svelte │ │ └── main.js ├── Final Demo │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ ├── Input.svelte │ │ ├── Keypad.svelte │ │ ├── Timer.svelte │ │ └── main.js └── README.md ├── Delayed Countdown ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── src │ ├── App.svelte │ ├── app.css │ ├── lib │ │ ├── DelayedCountdown.svelte │ │ ├── stores.js │ │ └── utils.js │ ├── main.js │ └── vite-env.d.ts └── vite.config.js ├── Donut Values ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── public │ └── icon.svg ├── src │ ├── App.svelte │ ├── app.css │ ├── lib │ │ └── Donut.svelte │ ├── main.js │ └── vite-env.d.ts └── vite.config.js ├── Dowsing Machine ├── .gitignore ├── README.md ├── layout │ ├── index.html │ └── style.css ├── package-lock.json ├── package.json ├── public │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ └── main.js ├── Drawing Canvas ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Canvas.svelte │ ├── Palette.svelte │ └── main.js ├── F1 Tyres ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── ColumnChart.svelte │ ├── TyreDegradation.svelte │ ├── TyreOffset.svelte │ └── main.js ├── Fubuki ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── main.js │ └── utils.js ├── Github Contributions ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── AreaChart.svelte │ ├── Contributions.svelte │ ├── Contributor.svelte │ ├── Contributors.svelte │ ├── dataset.js │ ├── main.js │ └── stores.js ├── Guess When ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── GameReveal.svelte │ ├── data.js │ └── main.js ├── High-speed Trains ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── ColumnChart.svelte │ ├── SliceChart.svelte │ ├── data.js │ └── main.js ├── Icon Maker ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ └── icon.svg ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Canvas.svelte │ └── main.js ├── Infinity Maze ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ ├── Game UI │ │ ├── index.html │ │ └── style.css │ ├── Maze Algorithm │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── Maze Grid │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── Maze Player │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── Maze Promise │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ └── Maze viewBox │ │ ├── index.html │ │ ├── script.js │ │ └── style.css ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Arrow.svelte │ ├── Controls.svelte │ ├── Square.svelte │ ├── main.js │ └── utils.js ├── Key Value Pairs ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ ├── Add Items │ │ ├── index.html │ │ └── style.css │ ├── Highlight Items │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ └── List Items │ │ ├── index.html │ │ └── style.css ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Form.svelte │ ├── List.svelte │ ├── SVG.svelte │ ├── Visualization.svelte │ ├── main.js │ └── stores.js ├── Light Bright ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Board.svelte │ ├── Controls.svelte │ ├── Header.svelte │ ├── main.js │ └── utils.js ├── Line Charts ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Bicycle.svelte │ ├── Header.svelte │ ├── LineChart.svelte │ ├── main.js │ └── utils.js ├── Line Drawing Grid ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Grid.svelte │ └── main.js ├── Loto Seal ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ └── main.js ├── Markdown Editor ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ ├── UI - Editor │ │ ├── index.html │ │ └── style.css │ ├── UI - Preview │ │ ├── index.html │ │ └── style.css │ ├── checkmark.svg │ ├── code.svg │ ├── download.svg │ ├── link.svg │ ├── modify.svg │ ├── preview.svg │ └── save.svg ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Editor.svelte │ ├── Preview.svelte │ ├── main.js │ └── utils.js ├── Match in Pairs ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── src │ ├── App.svelte │ ├── app.css │ ├── lib │ │ ├── Controls.svelte │ │ ├── Data.svelte │ │ ├── Game.svelte │ │ └── utils.js │ ├── main.js │ └── vite-env.d.ts └── vite.config.js ├── Picross ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ ├── SVG │ │ ├── eraser.svg │ │ ├── o.svg │ │ ├── pencil.svg │ │ └── x.svg │ ├── Table Data │ │ ├── README.md │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── UI - Play Table │ │ ├── index.html │ │ └── style.css │ ├── UI - Select Level │ │ ├── index.html │ │ └── style.css │ └── UI - Win Game │ │ ├── index.html │ │ ├── script.js │ │ └── style.css ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Form.svelte │ ├── Game.svelte │ ├── Selection.svelte │ ├── Victory.svelte │ ├── main.js │ └── utils.js ├── Pixelated SVG ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ └── main.js ├── Pong ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── src │ ├── App.svelte │ ├── app.css │ ├── lib │ │ ├── Pong.svelte │ │ └── utils.js │ ├── main.js │ └── vite-env.d.ts └── vite.config.js ├── Premier League Season ├── D3 Circular Packing │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ ├── Packing.svelte │ │ └── main.js ├── D3 Hexbin │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ ├── Hexbin.svelte │ │ ├── Scatterplot.svelte │ │ └── main.js ├── Final Demo │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ ├── Footballbin.svelte │ │ ├── Goals.svelte │ │ ├── Points.svelte │ │ ├── Table.svelte │ │ ├── data.js │ │ └── main.js └── README.md ├── README.md ├── Repeating Color Scheme ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ └── main.js ├── Roman Clock ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Clock.svelte │ ├── main.js │ ├── stores.js │ └── utils.js ├── School Closures Maps ├── Choropleth Map │ ├── .gitignore │ ├── data │ │ └── duration_school_closures.csv │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ └── main.js ├── Interactive Dashboard │ ├── .gitignore │ ├── data │ │ └── covid_impact_education.csv │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── global.css │ │ ├── icon.svg │ │ └── index.html │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ └── src │ │ ├── App.svelte │ │ └── main.js └── README.md ├── Seasonal Cheese ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Cheese.svelte │ ├── data.js │ └── main.js ├── Single Page App ├── README.md ├── sapper │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── rollup.config.js │ ├── scripts │ │ └── setupTypeScript.js │ ├── src │ │ ├── ambient.d.ts │ │ ├── client.js │ │ ├── components │ │ │ ├── Card.svelte │ │ │ ├── Footer.svelte │ │ │ └── Nav.svelte │ │ ├── routes │ │ │ ├── _error.svelte │ │ │ ├── _layout.svelte │ │ │ ├── about.svelte │ │ │ ├── demos │ │ │ │ ├── [id].json.js │ │ │ │ ├── [id].svelte │ │ │ │ ├── _data.js │ │ │ │ ├── add.svelte │ │ │ │ ├── index.json.js │ │ │ │ └── index.svelte │ │ │ └── index.svelte │ │ ├── server.js │ │ ├── service-worker.js │ │ └── template.html │ └── static │ │ ├── global.css │ │ ├── icon.svg │ │ ├── logo-192.png │ │ ├── logo-512.png │ │ └── manifest.json └── sveltekit │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .npmrc │ ├── .prettierignore │ ├── .prettierrc │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── app.css │ ├── app.html │ ├── global.d.ts │ ├── lib │ │ ├── Card.svelte │ │ ├── Footer.svelte │ │ └── Nav.svelte │ └── routes │ │ ├── $layout.svelte │ │ ├── about.svelte │ │ ├── demos │ │ ├── [id].json.js │ │ ├── [id].svelte │ │ ├── _data.js │ │ ├── add.svelte │ │ ├── index.json.js │ │ └── index.svelte │ │ └── index.svelte │ ├── static │ ├── icon.svg │ ├── logo-192.png │ └── robots.txt │ └── svelte.config.cjs ├── Slider Quiz ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── public │ └── icon.svg ├── src │ ├── App.svelte │ ├── app.css │ ├── lib │ │ ├── Quiz.svelte │ │ └── Slider.svelte │ ├── main.js │ └── vite-env.d.ts └── vite.config.js ├── Smart Watch ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ ├── Components UI │ │ ├── analog_watch.html │ │ ├── calculator.html │ │ ├── counter.html │ │ └── digital_watch.html │ └── Watch UI │ │ ├── index.html │ │ └── style.css ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── AnalogWatch.svelte │ ├── App.svelte │ ├── Calculator.svelte │ ├── Counter.svelte │ ├── DigitalWatch.svelte │ ├── main.js │ └── utils.js ├── Sokoban ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── public │ └── icon.svg ├── src │ ├── App.svelte │ ├── lib │ │ └── Sokoban.svelte │ ├── main.js │ └── vite-env.d.ts └── vite.config.js ├── Star Wars Crawl ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ ├── 3D Transform │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── Title │ │ ├── index.html │ │ └── style.css │ └── Toggle │ │ ├── index.html │ │ └── style.css ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Crawl.svelte │ ├── Logo.svelte │ ├── Toggle.svelte │ ├── main.js │ └── utils.js ├── Stopwatch Anew ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── icon.svg │ └── index.html ├── res │ ├── icons │ │ ├── lap.svg │ │ ├── pause.svg │ │ ├── start.svg │ │ ├── stop.svg │ │ └── stopwatch.svg │ └── ui │ │ ├── index.html │ │ └── style.css ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Controls.svelte │ ├── Display.svelte │ ├── Header.svelte │ ├── Laps.svelte │ ├── icons.js │ ├── main.js │ ├── stores.js │ └── utils.js ├── Stopwatch ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ ├── Readable Store │ │ ├── App.svelte │ │ └── stores.js │ ├── Stopwatch SVG │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ └── Stopwatch UI │ │ ├── index.html │ │ └── style.css ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Controls.svelte │ ├── Laps.svelte │ ├── StopWatch.svelte │ ├── main.js │ ├── stores.js │ └── utils.js ├── Strongman ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ ├── index.html │ └── style.css ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ └── main.js ├── Thermometer App ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ ├── moon.svg │ └── sun.svg ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Display.svelte │ ├── Toggle.svelte │ ├── icons.js │ └── main.js ├── Tournament Bracket ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Bracket.svelte │ ├── Controls.svelte │ ├── Header.svelte │ ├── main.js │ ├── stores.js │ └── utils.js ├── Tweet Component ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── Icon.svelte │ ├── Tweet.svelte │ ├── main.js │ ├── stores.js │ └── utils.js ├── Two Way Binding ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ └── main.js ├── Typing Adventure ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ ├── Home Screen │ │ ├── index.html │ │ ├── pattern.svg │ │ ├── script.js │ │ └── style.css │ ├── Play Screen │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ └── README.md ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── HomeScreen.svelte │ ├── PlayScreen.svelte │ ├── Splitting.svelte │ ├── main.js │ └── utils.js ├── Wind Chill Index ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ ├── Final UI │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── First UI │ │ ├── index.html │ │ └── style.css │ ├── anemometer.svg │ └── thermometer.svg ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Description.svelte │ ├── Form.svelte │ ├── Header.svelte │ ├── main.js │ └── utils.js ├── Word Frequency ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── res │ └── UI │ │ ├── index.html │ │ └── style.css ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Chart.svelte │ ├── Defs.svelte │ ├── Input.svelte │ ├── Spreadsheet.svelte │ └── main.js └── Word Search ├── README.md ├── algorithm ├── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── main.js │ └── utils.js ├── display ├── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── Canvas.svelte │ ├── SVG.svelte │ └── main.js ├── final-demo ├── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── global.css │ ├── icon.svg │ └── index.html ├── rollup.config.js ├── scripts │ └── setupTypeScript.js └── src │ ├── App.svelte │ ├── WordSearch.svelte │ ├── main.js │ └── utils.js └── pins ├── .gitignore ├── package-lock.json ├── package.json ├── public ├── global.css ├── icon.svg └── index.html ├── rollup.config.js ├── scripts └── setupTypeScript.js └── src ├── App.svelte ├── Canvas.svelte ├── SVG.svelte └── main.js /Actions/Append/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Actions/Append/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Actions/Append/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Actions/Append/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Actions - Append 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Actions/Append/src/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

Append

6 | 7 |

8 | How are you this day? 9 |

10 | 11 |

12 | If you hover on specific elements, you see how the :use directive is used to manipulate the existing 15 | DOM. 16 |

17 | -------------------------------------------------------------------------------- /Actions/Append/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Actions/Append/src/utils.js: -------------------------------------------------------------------------------- 1 | export function append(node, params) { 2 | function handleMouseLeave() { 3 | node.removeChild(node.querySelector('span')); 4 | node.removeEventListener('mouseleave', handleMouseLeave); 5 | } 6 | 7 | function handleMouseEnter() { 8 | const child = document.createElement('span'); 9 | child.textContent = params; 10 | node.appendChild(child); 11 | node.addEventListener('mouseleave', handleMouseLeave); 12 | } 13 | 14 | node.addEventListener('mouseenter', handleMouseEnter); 15 | 16 | return { 17 | destroy() { 18 | node.removeEventListener('mouseenter', handleMouseEnter); 19 | }, 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /Actions/Lazy Load Images/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Actions/Lazy Load Images/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Actions/Lazy Load Images/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Lazy Load Images 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Actions/Lazy Load Images/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Actions/Selection/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Actions/Selection/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Actions/Selection/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Selection 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Actions/Selection/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Actions/Tooltip/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Actions/Tooltip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Actions/Tooltip/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Actions/Tooltip/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltip 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Actions/Tooltip/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Await/Pokemon Search/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Await/Pokemon Search/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Await/Pokemon Search/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pokemon Search 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Await/Pokemon Search/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Await/World Data/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Await/World Data/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Await/World Data/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | World Data 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Await/World Data/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Basic Arithmetic/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Basic Arithmetic/README.md: -------------------------------------------------------------------------------- 1 | # [Basic Arithmetic](https://svelte.dev/repl/730b7da509b74438a9d1c4bc6306b52f) 2 | 3 | ## Notes 4 | 5 | The project is rather straightforward, but allows to practice with a few features provided by Svelte: input binding, event dispatcher, keyed each blocks. 6 | 7 | It is also a nice way to use CSS grid properties. 8 | -------------------------------------------------------------------------------- /Basic Arithmetic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Basic Arithmetic/public/global.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Gaegu:400,700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | body { 9 | font-family: 'Gaegu', cursive; 10 | background: hsl(0, 0%, 8%); 11 | color: hsl(0, 0%, 96%); 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | -------------------------------------------------------------------------------- /Basic Arithmetic/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Basic Arithmetic/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Basic Arithmetic 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Basic Arithmetic/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Basic Arithmetic/src/utils.js: -------------------------------------------------------------------------------- 1 | export const max = 9999; 2 | export const min = 0; 3 | export const randomInt = () => Math.round(Math.random() * max); -------------------------------------------------------------------------------- /Binding Typewriter/Checkbox/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Binding Typewriter/Checkbox/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Binding Typewriter/Checkbox/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Binding Typewriter - Checkbox 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Binding Typewriter/Checkbox/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Binding Typewriter/Radio/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Binding Typewriter/Radio/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Binding Typewriter/Radio/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Binding Typewriter - Radio 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Binding Typewriter/Radio/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Bit Shifting/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Bit Shifting/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Bit Shifting/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Bit Shifting/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bit Shifting 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Bit Shifting/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Bug Feature/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Bug Feature/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Bug Feature/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Bug Feature/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Spring Motion 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Bug Feature/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/Colorful Blocks/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/Colorful Blocks/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/Colorful Blocks/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Colorful Blocks 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/Colorful Blocks/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/Final Demo/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/Final Demo/public/global.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 3 | Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 4 | } 5 | 6 | a { 7 | text-decoration: none; 8 | } 9 | 10 | a:hover { 11 | text-decoration: underline; 12 | } 13 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/Final Demo/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/Final Demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Colorful Building Bl.ocks 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/Final Demo/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/Highlight Component/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/Highlight Component/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/Highlight Component/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Highlight Component 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/Highlight Component/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/canvas Blocks/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/canvas Blocks/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/canvas Blocks/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | canvas Blocks 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/canvas Blocks/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/canvas Squares/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/canvas Squares/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/canvas Squares/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | canvas Squares 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/canvas Squares/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/treemap Colors/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/treemap Colors/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/treemap Colors/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | treemap Colors 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/treemap Colors/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/viewBox Transition/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/viewBox Transition/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/viewBox Transition/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | viewBox Transition 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Colorful Building Bl.ocks/viewBox Transition/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Concentration/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Concentration/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Concentration/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Concentration/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Concentration 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Concentration/res/script.js: -------------------------------------------------------------------------------- 1 | // toggle the class of .flip on the article element when the nested button is pressed 2 | const button = document.querySelector('button'); 3 | function handleClick() { 4 | button.parentNode.classList.toggle('flip'); 5 | } 6 | 7 | button.addEventListener('click', handleClick); 8 | -------------------------------------------------------------------------------- /Concentration/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Connect the Dots/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Connect the Dots/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^2.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Connect the Dots/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Connect the Dots/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Connect the Dots 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Connect the Dots/src/main.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | }); 6 | 7 | export default app; 8 | -------------------------------------------------------------------------------- /Contact US/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Contact US/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Contact US/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Contact US/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contact US 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Contact US/src/Back.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |
11 |
12 | 13 |

{name}

14 |

{title}

15 |

{phone}

16 |
17 |
18 | -------------------------------------------------------------------------------- /Contact US/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Contact US/src/utils.js: -------------------------------------------------------------------------------- 1 | // regex checking for a valid US phone number 2 | // following the freeCodeCamp guidelines https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator 3 | export const telephoneCheck = (str) => /^1? ?(\d{3}|\(\d{3}\))[- ]?\d{3}[- ]?\d{4}$/.test(str) -------------------------------------------------------------------------------- /Countdown App/Count Down Interact and Tween/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Countdown App/Count Down Interact and Tween/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Countdown App/Count Down Interact and Tween/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Count Down Interact and Tween 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Countdown App/Count Down Interact and Tween/src/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | {#if countdown} 9 | { 12 | countdown = null; 13 | }} 14 | /> 15 | {:else} 16 | (countdown = e.detail)} /> 17 | {/if} 18 | -------------------------------------------------------------------------------- /Countdown App/Count Down Interact and Tween/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Countdown App/Count Down/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Countdown App/Count Down/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Countdown App/Count Down/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Count Down 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Countdown App/Count Down/src/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | {#if countdown} 9 | { 12 | countdown = null; 13 | }} 14 | /> 15 | {:else} 16 | (countdown = e.detail)} /> 17 | {/if} 18 | -------------------------------------------------------------------------------- /Countdown App/Count Down/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Countdown App/Event Forwarding and Component Binding/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Countdown App/Event Forwarding and Component Binding/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Countdown App/Event Forwarding and Component Binding/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event Forwarding and Component Binding 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Countdown App/Event Forwarding and Component Binding/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Countdown App/Final Demo/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Countdown App/Final Demo/public/global.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | min-height: 100vh; 9 | color: hsl(0, 0%, 92%); 10 | background: hsl(240, 80%, 6%); 11 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 12 | Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 13 | } 14 | 15 | .visually-hidden:not(:focus):not(:active) { 16 | clip: rect(0 0 0 0); 17 | clip-path: inset(50%); 18 | height: 1px; 19 | overflow: hidden; 20 | position: absolute; 21 | white-space: nowrap; 22 | width: 1px; 23 | } 24 | -------------------------------------------------------------------------------- /Countdown App/Final Demo/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Countdown App/Final Demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Countdown App 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Countdown App/Final Demo/src/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | {#if countdown} 10 | { 12 | countdown = null; 13 | }} 14 | {countdown} 15 | /> 16 | {:else} 17 | { 19 | countdown = e.detail; 20 | }} 21 | /> 22 | {/if} 23 |
24 | 25 | 32 | -------------------------------------------------------------------------------- /Countdown App/Final Demo/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Delayed Countdown/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Delayed Countdown/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /Delayed Countdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Delayed Countdown 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Delayed Countdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "delayed-countdown", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "@sveltejs/vite-plugin-svelte": "^1.0.1", 13 | "svelte": "^3.49.0", 14 | "vite": "^3.0.0" 15 | } 16 | } -------------------------------------------------------------------------------- /Delayed Countdown/src/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Delayed Countdown/src/app.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | } 4 | 5 | body { 6 | color: #3c3c3c; 7 | background: #d7f5f7; 8 | } 9 | 10 | .visually-hidden:not(:focus):not(:active) { 11 | clip: rect(0 0 0 0); 12 | clip-path: inset(50%); 13 | height: 1px; 14 | width: 1px; 15 | overflow: hidden; 16 | position: absolute; 17 | white-space: nowrap; 18 | } 19 | -------------------------------------------------------------------------------- /Delayed Countdown/src/main.js: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app') 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /Delayed Countdown/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /Delayed Countdown/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()] 7 | }) 8 | -------------------------------------------------------------------------------- /Donut Values/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Donut Values/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /Donut Values/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Donut Values 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Donut Values/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "donut-values", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "@sveltejs/vite-plugin-svelte": "^1.0.1", 13 | "svelte": "^3.49.0", 14 | "vite": "^3.0.0" 15 | }, 16 | "dependencies": { 17 | "d3-array": "^3.2.0", 18 | "d3-scale-chromatic": "^3.0.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Donut Values/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Donut Values/src/App.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Donut Values/src/app.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | } 4 | -------------------------------------------------------------------------------- /Donut Values/src/main.js: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app') 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /Donut Values/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /Donut Values/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()] 7 | }) 8 | -------------------------------------------------------------------------------- /Dowsing Machine/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Dowsing Machine/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Dowsing Machine/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Dowsing Machine/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dowsing Machine 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Dowsing Machine/src/main.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | }); 6 | 7 | export default app; 8 | -------------------------------------------------------------------------------- /Drawing Canvas/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Drawing Canvas/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Drawing Canvas/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Drawing Canvas/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drawing Canvas 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Drawing Canvas/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /F1 Tyres/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /F1 Tyres/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /F1 Tyres/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | F1 Tyres 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /F1 Tyres/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Fubuki/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Fubuki/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^2.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Fubuki/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Fubuki/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fubuki 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Fubuki/src/main.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: {}, 6 | }); 7 | 8 | export default app; 9 | -------------------------------------------------------------------------------- /Github Contributions/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Github Contributions/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Github Contributions/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Github Contributions 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Github Contributions/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Github Contributions/src/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | function createMetric() { 4 | const metrics = ['c', 'a', 'd']; 5 | const { subscribe, set } = writable('c'); 6 | 7 | return { 8 | subscribe, 9 | set: (metric) => { 10 | if(!metrics.includes(metric)) return; 11 | set(metric); 12 | } 13 | } 14 | } 15 | 16 | export const metric = createMetric(); -------------------------------------------------------------------------------- /Guess When/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Guess When/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Guess When/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Guess When 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Guess When/src/main.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | var app = new App({ 4 | target: document.body, 5 | }); 6 | 7 | export default app; 8 | -------------------------------------------------------------------------------- /High-speed Trains/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /High-speed Trains/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /High-speed Trains/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | High-speed Trains 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /High-speed Trains/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Icon Maker/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Icon Maker/README.md: -------------------------------------------------------------------------------- 1 | # [Icon Maker](https://svelte.dev/repl/44a0394acb4f408cb0115958c0fd76f6) 2 | 3 | Starting from the SVG syntax behind a vector icon, the goal is to draw a shape with the Canvas API and [the Path2D interface](https://developer.mozilla.org/en-US/docs/Web/API/Path2D). Once drawn, the idea is to allow and download the asset as a `.png` file. 4 | 5 | ## Icon 6 | 7 | In the `res` folder you find the SVG syntax recreated in the project. It'd be mighty interesting to actually read through the document tree to create the necessary fill and strokes, but as a starting point, the idea is to take the heart shape and creating the same shape with the Canvas API and hard-coded instructions. 8 | -------------------------------------------------------------------------------- /Icon Maker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Icon Maker/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Icon Maker/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Icon Maker 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Icon Maker/res/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Icon Maker/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Infinity Maze/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Infinity Maze/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Infinity Maze/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Infinity Maze/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Infinity Maze 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Infinity Maze/res/Maze Algorithm/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Maze - Aldous Broder 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Infinity Maze/res/Maze Algorithm/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | body { 7 | min-height: 100vh; 8 | display: grid; 9 | place-items: center; 10 | background: hsl(0, 0%, 95%); 11 | } 12 | -------------------------------------------------------------------------------- /Infinity Maze/res/Maze Grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Maze - Grid 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Infinity Maze/res/Maze Grid/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | /* center the svg in the viewport */ 7 | body { 8 | background: hsl(0, 0%, 95%); 9 | display: grid; 10 | place-items: center; 11 | min-height: 100vh; 12 | } 13 | -------------------------------------------------------------------------------- /Infinity Maze/res/Maze Player/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | /* center the svg in the viewport */ 7 | body { 8 | background: hsl(0, 0%, 95%); 9 | display: grid; 10 | place-items: center; 11 | min-height: 100vh; 12 | } 13 | button { 14 | border: none; 15 | background: hsl(180, 70%, 50%); 16 | color: inherit; 17 | font-weight: bold; 18 | font-family: monospace; 19 | font-size: 1rem; 20 | margin: 1rem; 21 | padding: 0.5rem 1rem; 22 | } 23 | -------------------------------------------------------------------------------- /Infinity Maze/res/Maze Promise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Maze - Promise 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Infinity Maze/res/Maze viewBox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Maze - viewBox 9 | 10 | 11 |
12 | 13 | 14 |
15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Infinity Maze/res/Maze viewBox/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | /* center the svg in the viewport */ 7 | body { 8 | background: hsl(0, 0%, 95%); 9 | display: grid; 10 | place-items: center; 11 | min-height: 100vh; 12 | } 13 | button { 14 | border: none; 15 | background: hsl(180, 70%, 50%); 16 | color: inherit; 17 | font-weight: bold; 18 | font-family: monospace; 19 | font-size: 1rem; 20 | margin: 1rem; 21 | padding: 0.5rem 1rem; 22 | } 23 | -------------------------------------------------------------------------------- /Infinity Maze/src/Arrow.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 18 | -------------------------------------------------------------------------------- /Infinity Maze/src/Square.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | -------------------------------------------------------------------------------- /Infinity Maze/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Key Value Pairs/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Key Value Pairs/README.md: -------------------------------------------------------------------------------- 1 | # [Key Value Pairs](https://svelte.dev/repl/2fead853d94049e79805984858db9adb) 2 | 3 | ## How to Run 4 | 5 | ```bash 6 | npm install 7 | npm run dev 8 | ``` 9 | 10 | ## Notes 11 | 12 | In the `res` folder you find different projects making up the components of the application. Having a dedicated environment helped to create a solid design for the form, list and data visualizations. `Highlight Items` already includes the D3 library, showcasing how the row and pie chart are ultimately supposed to look like with hard-coded data. 13 | -------------------------------------------------------------------------------- /Key Value Pairs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Key Value Pairs/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Key Value Pairs/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Key Value Pairs 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Key Value Pairs/src/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | 10 |
11 | 12 | 13 |
14 | 15 | 22 | -------------------------------------------------------------------------------- /Key Value Pairs/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Light Bright/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Light Bright/README.md: -------------------------------------------------------------------------------- 1 | # [Light Bright](https://svelte.dev/repl/cef9541e26814afa8abdc2d84feecb42?version=3.12.1) 2 | 3 | The project is inspired by [a take-home project](https://learn.freecodecamp.org/coding-interview-prep/take-home-projects/build-a-light-bright-app/) from [freeCodeCamp](freecodecamp.org). 4 | 5 | ## How to Run 6 | 7 | ```bash 8 | npm install 9 | npm run dev 10 | ``` 11 | 12 | ## Helpful Resources 13 | 14 | [The tutorial on svelte.dev](https://svelte.dev/tutorial) is a great place to start. [The official docs](https://svelte.dev/docs) detail the API and the specific features, like the event dispatcher. 15 | -------------------------------------------------------------------------------- /Light Bright/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Light Bright/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Light Bright 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Light Bright/src/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 8 | 9 | 18 | -------------------------------------------------------------------------------- /Light Bright/src/Controls.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 |
17 | 18 | 19 |
20 | -------------------------------------------------------------------------------- /Light Bright/src/Header.svelte: -------------------------------------------------------------------------------- 1 |

Light-Bright

2 | -------------------------------------------------------------------------------- /Light Bright/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Light Bright/src/utils.js: -------------------------------------------------------------------------------- 1 | export const randomColor = () => ` 2 | hsl( 3 | ${Math.floor(Math.random() * 360)}, 4 | ${Math.floor(Math.random() * (100 - 80) + 80)}%, 5 | ${Math.floor(Math.random() * (70 - 50) + 50)}% 6 | ) 7 | `; -------------------------------------------------------------------------------- /Line Charts/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Line Charts/README.md: -------------------------------------------------------------------------------- 1 | # [Line Charts](https://codesandbox.io/s/svelte-line-charts-spuqv) 2 | 3 | ## How to Run 4 | 5 | ```bash 6 | npm install 7 | npm run dev 8 | ``` 9 | 10 | ## Notes 11 | 12 | The data included in `utils.js` is taken from Google Trends, starting [with the Tour de France topic](https://trends.google.com/trends/explore?q=%2Fm%2F07hn5) and tailoring the time range to the month of July, for the years 2018 and 2019. 13 | 14 | Each data point is described as an object detailing the date and the actual value for the search result. 15 | -------------------------------------------------------------------------------- /Line Charts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Line Charts/public/global.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Cabin:400,700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | body { 9 | font-family: 'Cabin', sans-serif; 10 | } 11 | 12 | #root { 13 | max-width: 550px; 14 | margin: 0.5rem auto; 15 | padding: 0 0.5rem; 16 | } 17 | #root > * + * { 18 | margin-top: 1.5rem; 19 | } 20 | -------------------------------------------------------------------------------- /Line Charts/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Line Charts/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Line Charts 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Line Charts/src/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 |
9 | 10 | 11 | 12 |
13 | -------------------------------------------------------------------------------- /Line Charts/src/Header.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

Tour de France

7 |

Google Trends for the cycling competition

8 |
9 | 10 | 26 | -------------------------------------------------------------------------------- /Line Charts/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Line Drawing Grid/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Line Drawing Grid/public/global.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | min-height: 100vh; 11 | font-family: 'Major Mono Display', monospace; 12 | background: #ffe0fc; 13 | color: #2d194a; 14 | } 15 | -------------------------------------------------------------------------------- /Line Drawing Grid/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Line Drawing Grid/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Line Drawing Grid 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Line Drawing Grid/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Loto Seal/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Loto Seal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Loto Seal/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Loto Seal/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Loto Seal 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Loto Seal/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Markdown Editor/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Markdown Editor/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Markdown Editor/res/checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Markdown Editor/res/code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Markdown Editor/res/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Markdown Editor/res/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Markdown Editor/res/modify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Markdown Editor/res/save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Markdown Editor/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Match in Pairs/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Match in Pairs/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /Match in Pairs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Match in Pairs 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Match in Pairs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "match-in-pairs", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "@sveltejs/vite-plugin-svelte": "^1.0.1", 13 | "svelte": "^3.49.0", 14 | "vite": "^3.0.0" 15 | } 16 | } -------------------------------------------------------------------------------- /Match in Pairs/src/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Match in Pairs/src/app.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | background: hsl(0, 0%, 97%); 9 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 10 | Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 11 | } 12 | 13 | .visually-hidden:not(:focus):not(:active) { 14 | clip: rect(0 0 0 0); 15 | clip-path: inset(50%); 16 | height: 1px; 17 | width: 1px; 18 | overflow: hidden; 19 | position: absolute; 20 | white-space: nowrap; 21 | } 22 | -------------------------------------------------------------------------------- /Match in Pairs/src/lib/Controls.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |
11 | 12 |
13 | 14 | 25 | -------------------------------------------------------------------------------- /Match in Pairs/src/main.js: -------------------------------------------------------------------------------- 1 | import "./app.css"; 2 | import App from "./App.svelte"; 3 | 4 | const app = new App({ 5 | target: document.getElementById("app"), 6 | }); 7 | 8 | export default app; 9 | -------------------------------------------------------------------------------- /Match in Pairs/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /Match in Pairs/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()] 7 | }) 8 | -------------------------------------------------------------------------------- /Picross/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Picross/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Picross/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Picross/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Picross 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Picross/res/SVG/eraser.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Picross/res/SVG/pencil.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Picross/res/SVG/x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Picross/res/UI - Win Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Picross UI - Win Game 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Picross/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Pixelated SVG/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Pixelated SVG/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Pixelated SVG/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelated SVG 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Pixelated SVG/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Pong/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Pong/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /Pong/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pong 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Pong/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pong", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "@sveltejs/vite-plugin-svelte": "^1.0.1", 13 | "svelte": "^3.49.0", 14 | "vite": "^3.0.0" 15 | } 16 | } -------------------------------------------------------------------------------- /Pong/src/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | 7 |
8 | 9 | 18 | -------------------------------------------------------------------------------- /Pong/src/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | color: hsl(210, 36%, 96%); 4 | background: hsl(200, 82%, 24%); 5 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 6 | } 7 | -------------------------------------------------------------------------------- /Pong/src/main.js: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app') 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /Pong/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /Pong/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()] 7 | }) 8 | -------------------------------------------------------------------------------- /Premier League Season/D3 Circular Packing/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Premier League Season/D3 Circular Packing/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Premier League Season/D3 Circular Packing/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | D3 Circular Packing 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Premier League Season/D3 Circular Packing/src/App.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Premier League Season/D3 Circular Packing/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Premier League Season/D3 Hexbin/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Premier League Season/D3 Hexbin/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Premier League Season/D3 Hexbin/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | D3 Hexbin 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Premier League Season/D3 Hexbin/src/App.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | 17 | 18 | 27 | -------------------------------------------------------------------------------- /Premier League Season/D3 Hexbin/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Premier League Season/Final Demo/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Premier League Season/Final Demo/public/global.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | color: hsl(0, 0%, 20%); 7 | margin: 0; 8 | padding: 8px; 9 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 10 | Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 11 | } 12 | 13 | a { 14 | color: hsl(210, 100%, 39%); 15 | text-decoration: none; 16 | } 17 | 18 | a:hover { 19 | text-decoration: underline; 20 | } 21 | -------------------------------------------------------------------------------- /Premier League Season/Final Demo/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Premier League Season/Final Demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Premier League Season 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Premier League Season/Final Demo/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Repeating Color Scheme/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Repeating Color Scheme/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Repeating Color Scheme/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Repeating Colors Scheme 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Repeating Color Scheme/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Roman Clock/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Roman Clock/README.md: -------------------------------------------------------------------------------- 1 | # [Roman Clock](https://svelte.dev/repl/ce67640a4c034cfa8585f3555fff3f8d) 2 | 3 | ## Notes 4 | 5 | The project is perhaps heavier on SVG syntax than Svelte's own logic, but it does showcase a few features of the compiler: 6 | 7 | - readable store 8 | 9 | - reactive variables 10 | 11 | - the motion package 12 | 13 | With regards to this last dependency, there's currently a bug when the number of minutes, or hours, switches back to 0. In this instance the rotation occurs from `360` degrees, backwards. 14 | -------------------------------------------------------------------------------- /Roman Clock/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Roman Clock/public/global.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | /* center in the viewport */ 7 | body { 8 | min-height: 100vh; 9 | font-family: serif; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | -------------------------------------------------------------------------------- /Roman Clock/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Roman Clock/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Roman Clock 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Roman Clock/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Roman Clock/src/stores.js: -------------------------------------------------------------------------------- 1 | import { readable } from "svelte/store"; 2 | 3 | // set up a readable store to provide the current date at a second's interval 4 | export const time = readable(new Date(), set => { 5 | const interval = setInterval(() => { 6 | set(new Date()); 7 | }, 1000) 8 | 9 | return () => clearInterval(interval); 10 | }); 11 | -------------------------------------------------------------------------------- /School Closures Maps/Choropleth Map/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /School Closures Maps/Choropleth Map/public/global.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | body { 8 | color: hsl(220, 80%, 3%); 9 | background: hsl(220, 90%, 98%); 10 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 11 | Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 12 | } 13 | -------------------------------------------------------------------------------- /School Closures Maps/Choropleth Map/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /School Closures Maps/Choropleth Map/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /School Closures Maps/Choropleth Map/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /School Closures Maps/Interactive Dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /School Closures Maps/Interactive Dashboard/public/global.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | body { 8 | color: hsl(220, 80%, 3%); 9 | background: hsl(220, 90%, 98%); 10 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 11 | Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 12 | } 13 | -------------------------------------------------------------------------------- /School Closures Maps/Interactive Dashboard/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /School Closures Maps/Interactive Dashboard/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /School Closures Maps/Interactive Dashboard/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Seasonal Cheese/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Seasonal Cheese/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Seasonal Cheese/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Seasonal Cheese 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Seasonal Cheese/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Single Page App/sapper/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /node_modules/ 3 | /src/node_modules/@sapper/ 4 | yarn-error.log 5 | /__sapper__/ 6 | -------------------------------------------------------------------------------- /Single Page App/sapper/src/client.js: -------------------------------------------------------------------------------- 1 | import * as sapper from '@sapper/app'; 2 | 3 | sapper.start({ 4 | target: document.querySelector('#sapper') 5 | }); -------------------------------------------------------------------------------- /Single Page App/sapper/src/components/Footer.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

{year}. A good year for developing Svelte applications.

7 |
8 | 9 | 15 | -------------------------------------------------------------------------------- /Single Page App/sapper/src/routes/about.svelte: -------------------------------------------------------------------------------- 1 | 2 | About 3 | 4 | 5 |

About

6 |

7 | This is a very straightforward single page application, with the sole purpose 8 | of showcasing how to set up a single page app with the Sapper framework. 9 |

10 |

11 | There are a few routes, a couple of components, but most importantly a way to 12 | dynamically generate pages. 13 |

14 | 15 | 20 | -------------------------------------------------------------------------------- /Single Page App/sapper/src/routes/demos/[id].json.js: -------------------------------------------------------------------------------- 1 | import { demos } from './_data.js'; 2 | 3 | export function get(req, res, next) { 4 | const {id} = req.params; 5 | const demo = demos.find(d => d.id === parseInt(id, 10)); 6 | 7 | if(demo) { 8 | res.setHeader('Content-Type', 'applications/json'); 9 | res.end(JSON.stringify(demo)) 10 | } else { 11 | res.statusCode = 404; 12 | res.end(JSON.stringify({ error: 'Demo not found'})); 13 | } 14 | } -------------------------------------------------------------------------------- /Single Page App/sapper/src/routes/demos/index.json.js: -------------------------------------------------------------------------------- 1 | import { demos } from './_data.js'; 2 | 3 | export function get(req, res, next) { 4 | res.end(JSON.stringify(demos)); 5 | } 6 | 7 | export function post(req, res, next) { 8 | const { title, description, details, href } = req.body; 9 | demos.push({title, description, details, href, id: demos.length}); 10 | } -------------------------------------------------------------------------------- /Single Page App/sapper/src/server.js: -------------------------------------------------------------------------------- 1 | import sirv from 'sirv'; 2 | import polka from 'polka'; 3 | import compression from 'compression'; 4 | import * as sapper from '@sapper/server'; 5 | import { json } from 'body-parser'; 6 | 7 | const { PORT, NODE_ENV } = process.env; 8 | const dev = NODE_ENV === 'development'; 9 | 10 | polka() // You can also use Express 11 | .use( 12 | json(), 13 | compression({ threshold: 0 }), 14 | sirv('static', { dev }), 15 | sapper.middleware() 16 | ) 17 | .listen(PORT, err => { 18 | if (err) console.log('error', err); 19 | }); 20 | -------------------------------------------------------------------------------- /Single Page App/sapper/static/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Single Page App/sapper/static/logo-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/borntofrappe/svelte-tutorial/7c5de423e7151a37383b2b7949d101e982eb11bd/Single Page App/sapper/static/logo-192.png -------------------------------------------------------------------------------- /Single Page App/sapper/static/logo-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/borntofrappe/svelte-tutorial/7c5de423e7151a37383b2b7949d101e982eb11bd/Single Page App/sapper/static/logo-512.png -------------------------------------------------------------------------------- /Single Page App/sapper/static/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "background_color": "#ffffff", 3 | "theme_color": "#333333", 4 | "name": "Svelte Showcase", 5 | "short_name": "S-Showcase", 6 | "display": "minimal-ui", 7 | "start_url": "/", 8 | "icons": [ 9 | { 10 | "src": "logo-192.png", 11 | "sizes": "192x192", 12 | "type": "image/png", 13 | "purpose": "any maskable" 14 | }, 15 | { 16 | "src": "logo-512.png", 17 | "sizes": "512x512", 18 | "type": "image/png", 19 | "purpose": "any maskable" 20 | } 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /Single Page App/sveltekit/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['eslint:recommended', 'prettier'], 4 | plugins: ['svelte3'], 5 | overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], 6 | parserOptions: { 7 | sourceType: 'module', 8 | ecmaVersion: 2019 9 | }, 10 | env: { 11 | browser: true, 12 | es2017: true, 13 | node: true 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /Single Page App/sveltekit/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /.svelte 4 | /build 5 | /functions -------------------------------------------------------------------------------- /Single Page App/sveltekit/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /Single Page App/sveltekit/.prettierignore: -------------------------------------------------------------------------------- 1 | .svelte/** 2 | static/** 3 | build/** 4 | node_modules/** 5 | -------------------------------------------------------------------------------- /Single Page App/sveltekit/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /Single Page App/sveltekit/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"], 6 | "$lib/*": ["src/lib/*"] 7 | } 8 | }, 9 | "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"] 10 | } 11 | -------------------------------------------------------------------------------- /Single Page App/sveltekit/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %svelte.head% 8 | 9 | 10 |
%svelte.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /Single Page App/sveltekit/src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | -------------------------------------------------------------------------------- /Single Page App/sveltekit/src/lib/Footer.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

{year}. A good year for developing Svelte applications.

7 |
8 | 9 | 15 | -------------------------------------------------------------------------------- /Single Page App/sveltekit/src/routes/about.svelte: -------------------------------------------------------------------------------- 1 | 2 | About 3 | 4 | 5 |

About

6 |

7 | This is a very straightforward single page application, with the sole purpose of showcasing how to 8 | set up a single page app with the SvelteKit framework. 9 |

10 |

11 | There are a few routes, a couple of components, but most importantly a way to dynamically generate 12 | pages. 13 |

14 | 15 | 20 | -------------------------------------------------------------------------------- /Single Page App/sveltekit/src/routes/demos/[id].json.js: -------------------------------------------------------------------------------- 1 | import { demos } from './_data.js'; 2 | 3 | export function get({ params }) { 4 | const {id} = params; 5 | const demo = demos.find(d => d.id === parseInt(id, 10)); 6 | 7 | if(demo) { 8 | return { 9 | status: 200, 10 | body: { 11 | demo 12 | }, 13 | } 14 | } 15 | return { 16 | status: 404 17 | } 18 | } -------------------------------------------------------------------------------- /Single Page App/sveltekit/static/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Single Page App/sveltekit/static/logo-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/borntofrappe/svelte-tutorial/7c5de423e7151a37383b2b7949d101e982eb11bd/Single Page App/sveltekit/static/logo-192.png -------------------------------------------------------------------------------- /Single Page App/sveltekit/static/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Single Page App/sveltekit/svelte.config.cjs: -------------------------------------------------------------------------------- 1 | const node = require('@sveltejs/adapter-node'); 2 | const pkg = require('./package.json'); 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | module.exports = { 6 | kit: { 7 | // By default, `npm run build` will create a standard Node app. 8 | // You can create optimized builds for different platforms by 9 | // specifying a different adapter 10 | adapter: node(), 11 | 12 | // hydrate the
element in src/app.html 13 | target: '#svelte', 14 | 15 | vite: { 16 | ssr: { 17 | noExternal: Object.keys(pkg.dependencies || {}) 18 | } 19 | } 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /Slider Quiz/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Slider Quiz/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /Slider Quiz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Slider Quiz 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Slider Quiz/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slider-quiz", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "@sveltejs/vite-plugin-svelte": "^1.0.1", 13 | "svelte": "^3.49.0", 14 | "vite": "^3.0.0" 15 | } 16 | } -------------------------------------------------------------------------------- /Slider Quiz/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Slider Quiz/src/app.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | color: hsl(0, 0%, 23%); 9 | background: hsl(0, 0%, 97%); 10 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 11 | Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 12 | } 13 | -------------------------------------------------------------------------------- /Slider Quiz/src/main.js: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app') 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /Slider Quiz/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /Slider Quiz/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()] 7 | }) 8 | -------------------------------------------------------------------------------- /Smart Watch/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Smart Watch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Smart Watch/public/global.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | /* center the watch in the viewport */ 7 | body { 8 | min-height: 100vh; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | background: hsl(0, 0%, 90%); 14 | } 15 | -------------------------------------------------------------------------------- /Smart Watch/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Smart Watch/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Smart Watch 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Smart Watch/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Smart Watch/src/utils.js: -------------------------------------------------------------------------------- 1 | // utility function returning a 2-characters long string out of the input integer 2 | export function zeroPadded(int) { 3 | return int >= 10 ? int.toString() : `0${int}`; 4 | } 5 | 6 | // utility function returning a 9-characters long string with empty characters prefacing the input value 7 | export function ninePadded(string) { 8 | return string.padStart(9, " "); 9 | } -------------------------------------------------------------------------------- /Sokoban/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Sokoban/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /Sokoban/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sokoban 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Sokoban/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sokoban", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "@sveltejs/vite-plugin-svelte": "^1.0.1", 13 | "svelte": "^3.49.0", 14 | "vite": "^3.0.0" 15 | } 16 | } -------------------------------------------------------------------------------- /Sokoban/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Sokoban/src/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Sokoban/src/main.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ 4 | target: document.getElementById("app"), 5 | }); 6 | 7 | export default app; 8 | -------------------------------------------------------------------------------- /Sokoban/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /Sokoban/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()] 7 | }) 8 | -------------------------------------------------------------------------------- /Star Wars Crawl/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Star Wars Crawl/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Star Wars Crawl/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Star Wars Crawl 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Star Wars Crawl/res/3D Transform/script.js: -------------------------------------------------------------------------------- 1 | const inputs = document.querySelectorAll('input[type="range"]'); 2 | function handleInput() { 3 | const {name, value} = this; 4 | console.dir(this); 5 | const property = `--${name}`; 6 | const propertyValue = name === 'rotation' ? `${value}deg` : `${value}%`; 7 | this.nextElementSibling.textContent = propertyValue; 8 | document.body.style.setProperty(property, propertyValue) 9 | } 10 | inputs.forEach(input => input.addEventListener('input', handleInput)) -------------------------------------------------------------------------------- /Star Wars Crawl/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Stopwatch Anew/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Stopwatch Anew/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^2.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Stopwatch Anew/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Stopwatch Anew/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Stopwatch Anew 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Stopwatch Anew/res/icons/lap.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Stopwatch Anew/res/icons/pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Stopwatch Anew/res/icons/start.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Stopwatch Anew/res/icons/stop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /Stopwatch Anew/res/icons/stopwatch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Stopwatch Anew/src/main.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | }); 6 | 7 | export default app; 8 | -------------------------------------------------------------------------------- /Stopwatch Anew/src/utils.js: -------------------------------------------------------------------------------- 1 | const formatPeriod = (p) => `${p}`.slice(0, 2).padStart(2, 0); 2 | 3 | export const formatTime = ({ t, s, m }) => 4 | `${formatPeriod(m)}:${formatPeriod(s)}.${formatPeriod(t)}`; 5 | 6 | export const getTime = (stopwatch) => { 7 | let time = stopwatch; 8 | const t = time % 100; 9 | time = Math.floor(time / 100); 10 | const s = time % 60; 11 | time = Math.floor(time / 60); 12 | const m = time % 60; 13 | 14 | return { t, s, m }; 15 | }; 16 | -------------------------------------------------------------------------------- /Stopwatch/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Stopwatch/README.md: -------------------------------------------------------------------------------- 1 | # [Stopwatch](https://svelte.dev/repl/591aff801e1d47498afdc2738fea4485) 2 | 3 | ## How to Run 4 | 5 | ```bash 6 | npm install 7 | npm run dev 8 | ``` 9 | 10 | ## Notes 11 | 12 | In the `res` folder you find the files used as a foundation for the final project. 13 | 14 | - `Stopwatch SVG` describes the visual through circle and path elements 15 | 16 | - `Stopwatch UI` describes the layout chosen for the three components, using flex and grid properties 17 | 18 | - `Readable Store` specifies `.svelte` and `.js` file to try and better understand readable stores 19 | -------------------------------------------------------------------------------- /Stopwatch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Stopwatch/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Stopwatch/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Stopwatch 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Stopwatch/res/Readable Store/stores.js: -------------------------------------------------------------------------------- 1 | import { readable } from 'svelte/store'; 2 | 3 | // set up a readable store which returns the number of milliseconds between the moment the store is subscribed and following an interval 4 | export const time = readable(null, function start(set) { 5 | const beginning = new Date(); 6 | const beginningTime = beginning.getTime(); 7 | 8 | const interval = setInterval(() => { 9 | const current = new Date(); 10 | const currentTime = current.getTime(); 11 | set(currentTime - beginningTime); 12 | }, 10); 13 | 14 | return function stop() { 15 | clearInterval(interval); 16 | }; 17 | }); -------------------------------------------------------------------------------- /Stopwatch/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Strongman/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Strongman/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Strongman/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Strongman/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Strongman 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Strongman/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Thermometer App/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Thermometer App/README.md: -------------------------------------------------------------------------------- 1 | # [Thermometer App](https://codesandbox.io/s/thermometer-app-h8rho) 2 | 3 | ## Notes 4 | 5 | The project is inspired by [this article](https://www.leparisien.fr/high-tech/honor-lance-un-smartphone-capable-de-prendre-votre-temperature-09-06-2020-8332161.php) describing the launch of a mobile phone natively equipped to check the temperature with infrared technology. 6 | 7 | In terms of style, [this design](https://dribbble.com/shots/6768800-Grill-App) detailing the UI for an application devoted to grilling motivates the design of the application. 8 | 9 | The `res` folder includes the SVG icons created for the project. 10 | -------------------------------------------------------------------------------- /Thermometer App/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Thermometer App/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Thermometer App 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Thermometer App/res/moon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Thermometer App/res/sun.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Thermometer App/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Tournament Bracket/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Tournament Bracket/public/global.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato:400,900&display=swap'); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | body { 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | font-family: 'Lato', sans-serif; 13 | background: #e5e8f0; 14 | padding-top: 0.75rem; 15 | } 16 | body > * + * { 17 | margin-top: 2rem; 18 | } 19 | -------------------------------------------------------------------------------- /Tournament Bracket/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Tournament Bracket/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tournament Bracket 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Tournament Bracket/src/Header.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

7 | {title} 8 |

9 |
10 | -------------------------------------------------------------------------------- /Tournament Bracket/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Tweet Component/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Tweet Component/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Tweet Component/src/Icon.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /Tweet Component/src/main.js: -------------------------------------------------------------------------------- 1 | import Tweet from './Tweet.svelte'; 2 | 3 | // hypothetical values for the tweet 4 | const props = { 5 | name: 'Pas', 6 | handle: 'paslepoulet', 7 | /* specify the date instance with a string of arguments 8 | up to seven arguments 9 | year month (0-11) day hours minutes seconds milliseconds 10 | */ 11 | date: '2021 3 8 10 17 52', 12 | message: 'Creating a reusable component for a hypothetical blog. With a readable store to update the timestamp!', 13 | }; 14 | 15 | 16 | const tweet = new Tweet({ 17 | target: document.body, 18 | props 19 | }); 20 | 21 | export default tweet; -------------------------------------------------------------------------------- /Tweet Component/src/stores.js: -------------------------------------------------------------------------------- 1 | import { readable } from 'svelte/store'; 2 | 3 | // readable store setting up an interval to describe an instance of the current date 4 | export let time = readable(new Date(), function start(set) { 5 | let interval = setInterval(() => { 6 | set(new Date()); 7 | }, 1000); 8 | 9 | return function stop() { 10 | clearInterval(interval); 11 | } 12 | }); -------------------------------------------------------------------------------- /Two Way Binding/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Two Way Binding/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Two Way Binding/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Two Way Binding 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Two Way Binding/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | var app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Typing Adventure/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Typing Adventure/README.md: -------------------------------------------------------------------------------- 1 | # [Typing Adventure](https://codepen.io/borntofrappe/full/WNNaGKJ) 2 | 3 | ## How to Run 4 | 5 | ```bash 6 | npm install 7 | npm run dev 8 | ``` 9 | 10 | ## Notes 11 | 12 | In the `res` folder you find the UI(s) developed for the project. I designed the two screens of the application with [Splitting.js](https://splitting.js.org/), and I have a few notes about that journey in the `README.md` of that folder. Unfortunately, I wasn't immediately able to reuse the code in the `.svelte` files, and ended up creating my own "splitting component" to replicate the feat achieved by the library. 13 | -------------------------------------------------------------------------------- /Typing Adventure/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Typing Adventure/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Typing Adventure 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Typing Adventure/res/Home Screen/pattern.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Typing Adventure/src/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | {#if !isPlaying} 11 | {isPlaying = true}} /> 12 | {:else} 13 | 14 | {/if} -------------------------------------------------------------------------------- /Typing Adventure/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Wind Chill Index/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Wind Chill Index/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Wind Chill Index/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Wind Chill Index 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Wind Chill Index/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Word Frequency/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Word Frequency/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Word Frequency/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Word Frequency 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Word Frequency/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; -------------------------------------------------------------------------------- /Word Search/algorithm/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Word Search/algorithm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^2.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Word Search/algorithm/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Word Search/algorithm/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Word Search Algorithm 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Word Search/algorithm/src/main.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: {}, 6 | }); 7 | 8 | export default app; 9 | -------------------------------------------------------------------------------- /Word Search/algorithm/src/utils.js: -------------------------------------------------------------------------------- 1 | export const shuffle = (array) => { 2 | const a = [...array]; 3 | let counter = a.length; 4 | 5 | while (counter > 0) { 6 | let index = Math.floor(Math.random() * counter); 7 | 8 | counter--; 9 | 10 | let temp = a[counter]; 11 | 12 | a[counter] = a[index]; 13 | a[index] = temp; 14 | } 15 | 16 | return a; 17 | }; 18 | -------------------------------------------------------------------------------- /Word Search/display/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Word Search/display/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^2.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Word Search/display/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Word Search/display/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Word Search Display 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Word Search/display/src/main.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: {}, 6 | }); 7 | 8 | export default app; 9 | -------------------------------------------------------------------------------- /Word Search/final-demo/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Word Search/final-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^2.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Word Search/final-demo/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Word Search/final-demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Word Search 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Word Search/final-demo/src/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /Word Search/final-demo/src/main.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: {}, 6 | }); 7 | 8 | export default app; 9 | -------------------------------------------------------------------------------- /Word Search/pins/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Word Search/pins/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^2.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Word Search/pins/public/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Word Search/pins/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Word Search Pins 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Word Search/pins/src/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

Word Search Pins

7 | 8 |

canvas

9 | 10 | 11 | 12 |

svg

13 | 14 | 15 | 16 | 30 | -------------------------------------------------------------------------------- /Word Search/pins/src/main.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: {}, 6 | }); 7 | 8 | export default app; 9 | --------------------------------------------------------------------------------