Vocabulary

application.controller.js

import Ember from 'ember';
import { vocabulary } from '../vocabulary';

export default Ember.Controller.extend({
  appName:'Vocabulary',
  model: vocabulary
});

application.template.hbs

{{german-card model=model}}

german-card.component.js

import Ember from 'ember';
import { vocabulary } from '../vocabulary';

const { computed } = Ember;

export default Ember.Component.extend({
  classNames:['card'],
  index:0,
  item:computed('index', function() {
    const model = this.get('model');
    const i = this.get('index');
    return model[i];
  }),
  keyDown(e){
    if(e.which === 37){ this.send('move','previous'); }
    if(e.which === 39){ this.send('move','next'); }
  },
  actions:{
    move(dir){
      let i = this.get('index');
      const model = this.get('model');
      switch(dir){
        case 'next':
          if(i < model.length-1){ i++; }
          break;
        case 'previous':
          if(i>0){ i--; }
          break;
      };
      this.set('index', i);
    },
    randomCard(){
      const value = parseInt((Math.random()*100)%this.get('model').length);
      this.set('index',value);
    }
  }
});

german-card.template.hbs

<p align="center"><span class="phrase">{{item.type}}</span><br>
{{#if item.article}}{{item.article}}&nbsp;{{/if}}<span class="title">{{item.word}}</span><br>
{{#if item.plural}}
<span class="phrase"><i>pl.</i>&nbsp;{{item.plural}}</span>
{{/if}}<br><br>
<i>{{item.meaning}}</i><br><br>
<span class="phrase">{{item.phrase}}</span></p>
<div class="container">
  <div class="item">
    <button {{action 'move' 'previous'}}> &lt; </button>
  </div>
  <div class="item">
  	<button {{action 'randomCard'}}> Random </button>
  </div>
  <div class="item">
    <button {{action 'move' 'next'}}> &gt; </button>
  </div>
</div>

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
.card{
  position: fixed; /* or absolute */
  left: 25%;
  border:1px solid black;
  padding:50px;
}
.container {
  display: flex; /* or inline-flex */
  justify-content: center;
}
.item {
  align-self: center;
}
p {  
  text-align: center;
}
.title{
  font-weight: bold;
  font-size: 22pt;
}
.phrase{
  font-size: 10pt;
}

twiddle.json

{
  "version": "0.4.10",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js"
  }
}

vocabulary.js

export const vocabulary = [
  {
    type: '{n}',
    article: 'die',
    word: 'Stellenanzeige',
    plural: 'Stellenanzeigen',
    meaning: 'Oferta de empleo',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'das',
    word: 'Studium',
    meaning: 'Estudios (universitarios)',
    phrase: ''
  },
   {
    type: '{adj}',
    word: 'zielorientiert',
    meaning: 'orientado a objetivo',
    phrase: ''
  },
   {
    type: '{adj}',
    word: 'fleißig',
    meaning: 'trabajador/a (informal)',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'die',
    word: 'Fähigkeit',
    meaning: 'capacidad',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'die',
    word: 'Zuverlässigkeit',
    meaning: 'fiablidad',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'die',
    word: 'Auffassung',
    plural: 'Auffassungen',
    meaning: 'criterio',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'die',
    word: 'Attitüde',
    plural: 'Attitüden',
    meaning: 'Actitud',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'die',
    word: 'Belastbarkeit',
    plural: 'kein',
    meaning: 'Capacidad de carga',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'der',
    word: 'Bewerber',
    plural: 'Bewerber',
    meaning: 'Candidato',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'die',
    word: 'Anforderung',
    plural: 'Anforderungen',
    meaning: 'Requisito (flexible)',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'die',
    word: 'Bereitschaft',
    meaning: 'disposición',
    phrase: 'Reise-bereitschaft'
  },
   {
    type: '{n}',
    article: 'die',
    word: 'Voraussetzung',
    plural: 'Voraussetzungen',
    meaning: 'Requisito (imprescindible)',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'die',
    word: 'Tätigkeit',
    plural: 'Tätigkeiten',
    meaning: 'Ocupación',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'die',
    word: 'Kenntnis',
    plural: 'Kenntnisse',
    meaning: 'Conocimiento',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'das',
    word: 'Gehalt',
    plural: 'Gehälter',
    meaning: 'Sueldo',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'die',
    word: 'Stelle',
    plural: 'Stellen',
    meaning: 'Lugar',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'das',
    word: 'Vorstellungsgespräch',
    plural: 'kein',
    meaning: 'Entrevista de trabajo',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'der',
    word: 'Betrieb',
    plural: 'kein',
    meaning: 'Empresa',
    phrase: ''
  },
   {
    type: '{verb}',
    word: 'jobben',
    meaning: 'Currar',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'der',
    word: 'Teilzeitjob',
    plural: 'Teilzeitjobs',
    meaning: 'Trabajo a tiempo parcial',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'das',
    word: 'Büro',
    plural: 'Büros',
    meaning: 'Oficina',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'das',
    word: 'Inserat',
    plural: 'Inserate',
    meaning: 'Anuncio (periódico)',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'der',
    word: 'Mitarbeiter',
    plural: 'Mitarbeiter',
    meaning: 'Trabajador',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'das',
    word: 'Trinkgeld',
    plural: 'Trinkgelder',
    meaning: 'Propina',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'der',
    word: 'Abschluss',
    plural: 'Abschlüsse',
    meaning: 'Cierre (i.e. de estudios)',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'die',
    word: 'Bewerbung',
    plural: 'Bewerbungen',
    meaning: 'Solicitud de trabajo',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'die',
    word: 'Ausbildung',
    plural: 'kein',
    meaning: 'Formación',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'der',
    word: 'Eindruck',
    plural: 'Eindrücke',
    meaning: 'Impresión',
    phrase: ''
  },
   {
    type: '{n}',
    article: 'der',
    word: 'Zweck',
    plural: 'Zwecke',
    meaning: 'Objetivo',
    phrase: ''
  },
   {
    type: '{adj}',
    word: 'kontaktfreudig',
    meaning: 'abierto (actitud)',
    phrase: ''
  },
   {
    type: '{adj}',
    word: 'erfahren',
    meaning: 'experto',
    phrase: ''
  },
   {
    type: '{adj}',
    word: 'engagiert',
    meaning: 'comprometido',
    phrase: ''
  },
   {
    type: '{adj}',
    word: 'gründlich',
    meaning: 'metódico',
    phrase: ''
  },
   {
    type: '{adj}',
    word: 'hilfsbereit',
    meaning: 'servicial',
    phrase: ''
  },
   {
    type: '{adj}',
    word: 'qualifiziert',
    meaning: 'cualificado',
    phrase: ''
  },
   {
    type: '{adj}',
    word: 'motiviert',
    meaning: 'motivado',
    phrase: ''
  },
   {
    type: '{adj}',
    word: 'organiziert',
    meaning: 'organizado',
    phrase: ''
  }
];