Git Product home page Git Product logo

ionic2-code-example's Introduction

ionic2 example application

This is just a small game app built to show an example of a Ionic 2 mobile app.

How it works?

The game is pretty simple. 10 words are given. For each word you have 30 seconds to write a word that rhymes with it. At the end it will be shown the total points you have made.

Before starting the game you will have to choose between 4 different levels: Easy - Medium - Hard - Random.

For the level Random it will be taken a word with a Get request to the Wordnik API.

For the levels Easy - Medium - Hard there are pre-populated array with around 1k words. These array are pre-populated in this way: A loop that make a Get request for a random word to the Wordnik API. For each word a request is made to the Datamuse API to check the total amount of possible rhymes for the given word.

  • 100+ possible rhymes: insert in the Easy array
  • 40 - 100 possible rhymes: insert in the Medium array
  • 10 - 40 possible rhymes: insert in the Hard array

App structure

There is one main component: the Home component.
From this component is possible to access two modals: InfoModal and GameModal.
All the Get requests (local and remote) are handled by the ApiProvider.

Topics

It's a rather small app. Yet it gave the possibility to handle several topics:

  • Basic navigation - passing data to other components
  • Use of services to deal with API or local requests and return a Promise
  • Modals - Info and Game modals
  • Animations - On the home element to make them fade in at the beginning and on the levels buttons
  • Validation - The word inserted is required and must be a word (regex validation)
  • Basic use of theming
  • Css animation - the countdown clock
  • Conditional class (active class on level buttons)
  • Conditional style (on the countdown clock animation)
  • Use of ion-spinner - before the random word is ready from the API
  • Use of timeout - to remove error or success message after 3 seconds
  • Basic game logic - handling seconds, words, points, levels
  • Basic app styling - custom css to give some nice flat design

Demo

Here is a plunker of the app:

http://plnkr.co/edit/3MZ2pnG5z7zCfkQgPUpI?p=preview

Note: for simplicity sake the style has been put all in one file: app.css and has been slightly modified for the plunker.
Use Github as code reference.

ionic2-code-example's People

Contributors

francescomussi avatar

Stargazers

 avatar

Watchers

 avatar  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.