Connection Rater Interview

components.connection-rater\.js

import Component from '@glimmer/component';

export default class extends Component {
  constructor() {
    super(...arguments);
    // connections is provided here and is the same as @connections in the hbs file
    const connections = this.args.connections
    
    // 1) Apply the class "alert-info" to the first connection
    
    const downKey = 40;
    const upKey = 38;
    const yKey = 89;
    const nKey = 78;
    
    Ember.$(document).on('keydown', (e) => {
      console.log(e.keyCode)
      // 2) Use up/down arrow keys to move the "alert-info" class between connections
      
      // 3) Use y/n keys to add the"rating-choice" class to Yes/No for the currently selected connection
    })
  }
}

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { A } from '@ember/array';

export default class ApplicationController extends Controller {
  appName = 'ICC Connection Rater';
  @tracked connections = A([
    new Connection('Amy'), 
    new Connection('Bob'), 
    new Connection('Carrie'), 
    new Connection('Dan')
  ]);  
}

class Connection {
  constructor(name) {
    this.name = name
  }

  @tracked name
  @tracked active = false
}

templates.application\.hbs

<style>
	body {
		font-family: arial;
  }
  
  .rating-row {
  	margin-bottom: 10px;
  }
  
  .rating-cell {
  	display: inline;
  }
  
  .alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
  }
  
  .rating-choice {
  	background-color: green;
    color: white;
  }
}
</style>
<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
<ConnectionRater @connections={{this.connections}} />

templates.components.connection-rater\.hbs

{{#each @connections as |connection|}}
  <div class="row rating-row alert {{if connection.active "alert-info"}}">
    <div class="col-md-8">
      {{connection.name}}
    </div>
    <div class="rating-cell">Yes</div>
    <div class="rating-cell">No</div>
  </div>
{{/each}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "3.16.5"
  }
}