Skip to content
A simple inclusive random spinner app
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode initial code Dec 14, 2019
public initial code Dec 14, 2019
src Add missing alt Dec 31, 2019
.editorconfig
.eslintrc.json initial code Dec 14, 2019
.gitattributes initial code Dec 14, 2019
.gitignore Merge upstream changes Dec 31, 2019
.prettierignore initial code Dec 14, 2019
.prettierrc.json initial code Dec 14, 2019
CODE_OF_CONDUCT.md Add CoC Dec 24, 2019
LICENCE initial code Dec 14, 2019
README.md Fix readme Dec 24, 2019
package-lock.json Merge upstream changes Dec 31, 2019
package.json Merge upstream changes Dec 31, 2019
rollup.config.js Merge upstream changes Dec 31, 2019

README.md

svelte-donut-spinner

Netlify Status

A simple inclusive random spinner app. The primary use case is to enable support providers to create interesting, engaging and fun activities for people with cognitive disabilities.

A sample svelte app showcasing a number of features (See dev notes below)

Usage

Try it at https://spinner.fullmeasure.uk/

Press the space bar or click the Spin button when a random selection will be made and spoken.

Dev notes

  • Based on the official svelte template with fixes to ensure prettier and eslint work in VSCode.
  • Components:
    • Donut - a configurable donut chart using SVG
    • SpinningPointer - a SVG spinning pointer using CSS transition
    • Spinner - composed of a donut chart and a spinning pointer
    • Modal - a modal dialog (based on the svelte example)
    • Settings - a settings pane with options for the spinner
    • App - putting it all together
  • Drivers (functions with side effects)
    • Random number
    • Speech output
    • Persistent - save to local storage
    • Stores - a number of useful stores for reactive i/o etc
  • Svelte techniques / features
    • Stores
    • Reactivity
    • Nested components and child content
  • Other Techniques
    • Dynamic CSS Grid
    • Functional style code
  • Misc
    • Prettier configured to use section order "scripts, markup, styles" in .svelte file.
    • Suggested VSCode extensions.
    • All files treated as binary by git to avoid any unwanted EOL transforms.
You can’t perform that action at this time.