Giter Club home page Giter Club logo

arcane-vocabulary's Introduction

Arcane Vocabulary Tutor

This is a test application I wrote to experiment with AngularJS and Twitter Bootstrap.

Local Setup Instructions

  • To setup locally do:
~$ npm install
  • Then start the web-server:
~$ ./bin/run-www

Usage

To enter a new word, just type it in to the input bar; hit enter; the editing dialog will appear; fill in a definition and click Save Changes.

To browse words, begin by typing any character into the input bar; scroll down the list to see what words start with what you typed. If you would like to edit any of them, just click on the word you would like to edit, and the editing dialog will appear. Make the changes you would like and click 'Save'. That easy.

(hint: type a single period '.' to see the whole list of words)

Explanation

This is a simple vocabulary/dictionary-type storage. It demonstrates a few features:

  • Local storage -- there is a database in your web browser! It uses Queryable which extends JSON to make it queryable.
  • Persistency -- the client-side database is preserved across sessions. So any changes you make are yours to keep. This is accomplished in a server-less fashion; no data is returned to the server, there is no server-side database cacheing your input. To verify this: enter a new word, for instance: foo with the definition: bar 31337; close your web browser, open it again and navigate back to this page. Search for foo. Your custom definition should appear. There is no server back-end. A stock version of the vocab list is served to first-time users; any changes, customizations after that are saved locally only, in a persistent manner.
  • AngularJS's two-way binding -- pretty much everything in the application is tied to the search bar
  • Twitter Bootstrap's simple layout techniques. And jQuery-based easy javascript dialogs.
  • Responsive design for free! The layout works equally well in iPad, iPhone, and Desktop monitors.
  • UI Design -- look, no buttons! All you need is right there, and activated by the ENTER key (which is device ubiquitous).
  • Express. It uses Node & Express for the server environment.

There is a live demo

For questions, comments, bugs - contact Gregory Naughton - [email protected]

arcane-vocabulary's People

Contributors

gmn avatar

Watchers

 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.