lisaychuang

Lisa Huang-North | Frontend Software Engineer

• Github
• LinkedIn
• Website

Skills & Tools

• Languages: JavaScript (ES6), HTML5, CSS3, Ruby
• Framework & Library: JQuery, AJAX, Node.js, EmberJS, ReactJS, Bootstrap 4, Grid, Media Query, RESTful API, Heroku, Netlify, Mocha, Chai
• Database: SQL
• Methodologies: Agile Development, Responsive Design, Wireframe, Object-Oriented Programming, MVC, Test-Driven Development, Authentication, JSON

lisaychuang

get numWrongGuesses() {
  let count = 0;
  const uWord = this.word.toUpperCase();
  this.guesses.forEach(guess => {
    if (uWord.indexOf(guess) < 0) count++;
  });
  return count;
}

lisaychuang

  get wordWithBlanks() {
    const chars = [];
    for (let i = 0; i < this.args.word.length; i++) {
      const char = this.args.word[i];
      if (this.guesses.indexOf(char.toUpperCase()) >= 0) chars.push(char);
      else chars.push("_");
    }
  return chars.join("").toUpperCase();  // _IS_ in video stream example
  }

lisaychuang

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from '@ember/object';

export default class GameComponent extends Component {
  @tracked
  guessString = '';

  // using action decorator on our event listener   
  @action

lisaychuang

import { helper } from '@ember/component/helper';

const WORDS = ['Apple', 'Pear', 'Orange', 'Tomato', 'Kumquat', 'Jackfruit'];

export function randomWord() {
  const idx = Math.round(Math.random() * WORDS.length);
  return WORDS[idx];
}

export default helper(randomWord);

lisaychuang

<svg height="400" width="400" class="hangman {{if this.isDead "dead" ""}}">
    <g id="body">

        {{#if this.showRope}}
        <line id="rope" x1="200" y1="20" x2="200" y2="60" />
        {{/if}}

        {{#if this.showHead}}
        <g id="head">
            <circle cx="200" cy="80" r="20" stroke="black" stroke-width="4" fill="white" />

lisaychuang

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from '@ember/object';

export default class GameComponent extends Component {
  @tracked
  guessString = 'ZYX';

  // using action decorator on our event listener   
  @action

lisaychuang

<svg height="400" width="400" class="hangman">
    <g id="body">

        {{#if this.showRope}}
        <line id="rope" x1="200" y1="20" x2="200" y2="60" />
        {{/if}}

        {{#if this.showHead}}
        <g id="head">
            <circle cx="200" cy="80" r="20" stroke="black" stroke-width="4" fill="white" />

lisaychuang

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class GameComponent extends Component {
  @tracked
  guesses = ["I", "S"];

  @tracked
  word = "Lisa";

lisaychuang

<svg height="400" width="400" class="hangman">
    <g id="body">

        <line id="rope" x1="200" y1="20" x2="200" y2="60" />

        <g id="head">
            <circle cx="200" cy="80" r="20" stroke="black" stroke-width="4" fill="white" />
            <g id="rEyes">
                <circle cx="193" cy="80" r="4" />
                <circle cx="207" cy="80" r="4" />