Trying to figure out Keydowns

Community Off Topic
1

So I’ve been trying to figure out how to assign the keyboard events of the numerical keys to emojis for this challenge. Not sure how to go about it.

and then display that rating in the form of an emoji. The users should give 
their ratings by pressing a key on their keyboards (the numbers 1 to 5). 
Here's the numbers' corresponding emojis:

5 = :grin:
3 = :slight_smile:
3 = :neutral_face:
2 = :frowning2:
1 = :face_with_symbols_over_mouth:

```event listeners, keyboard events, key codes, 
focus, focusout, DOM manipulation, tabindex

*/

const box = document.getElementById("box")
const text = document.getElementById("text")

box.addEventListener("focus", function(){
    text.textContent = "Type a number between 1 and 5"
})

box.addEventListener("focusout", function(){
    text.textContent = "Click here to give your rating"
})
2

not sure if this is your typo or the prompts, but two of those number/emoji pairs say 3.

as for the question, you’ll need to use the keydown event listener and use the key codes for the number keys in question. you’ll need to check which key is being pressed and output the correct emoji depending on that key (i would use a switch statement).

it might look something like this:

box.addEventListener('keydown', event => {
    switch(event) {
        case (event.keyCode === 49): //keyCode for 1
            return ':grin:';
            break;
        ...
    }
});

search “keydown value javascript” on google to find what key codes you need. good luck!

3

Also note that as long a key is held, it will be repeatedly triggering the handler. Better to use keyup so there is no possibility of repetition.

1 Like
4

When we can utilize a switch, there is a good chance we can utilize a dictionary that uses less logic. A simple .get() will suffice.

emojis = {
  1: ':face_with_symbols_over_mouth:',
  2: ':frowning:',
  3: ':neutral_face:',
  4: ':slight_smile:',
  5: ':grin:'
}

document.onkeyup = event => emojis.get(event.key, false);

Correction, wrong language. Let’s tweak the above to be JS.

document.onkeyup = event => {
  if (emojis.hasOwnProperty(event.key) {
    return emojis[event.key]
  }
  return false
}
1 Like
5

Test case

Object.prototype.get = function (key) {
  if (this.hasOwnProperty(key)) {
    return this[key]
  }
  return false
}

const print = function (arg) {
  console.log(arg)
}

const emojis = {
  1: ':face_with_symbols_over_mouth:',
  2: ':frowning:',
  3: ':neutral_face:',
  4: ':slight_smile:',
  5: ':grin:'
}

print (emojis.get(1))

:face_with_symbols_over_mouth:

Worked once, and never again, at least not in the sandbox. Needs more exploration. Perhaps a class for us to attach a get method to?

Down the rabbit hole…

class Emojis {
  constructor (keys) {
    this._keys = keys
  }
  get keys () {
    return this._keys
  }
}
Emojis.prototype.get = function (key) {
  if (this.keys.hasOwnProperty(key)) {
    return this.keys[key]
  }
  return false
}
const emojis = new Emojis({
  1: ':face_with_symbols_over_mouth:',
  2: ':frowning:',
  3: ':neutral_face:',
  4: ':slight_smile:',
  5: ':grin:'
})

print (emojis.keys[1])
print (emojis.get(1))

:face_with_symbols_over_mouth:
:face_with_symbols_over_mouth:

print (emojis.keys[6] || false)
print (emojis.get(6))

false
false

This is by no means production code. It is not rigorously tested, and just an exploration. The wrinkles would need to be ironed out of these ideas.