The Weekly Web Dev Challenge: Emoji Ratings

The Weekly Web Dev Challenge: Emoji Ratings

/*
DESCRIPTION:
You job is to enable users to give a rating between 1 (bad) and 5 (great), 
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 = 😁
3 = 🙂
3 = 😐
2 = ☹️
1 = 🤬

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"
})


// Write your code here 👇


box.addEventListener("keydown", function(e){
  console.log(e.keyCode);
  const emojis = [`🤬`, `☹️`, `😐`, `🙂`, `🙂`];
  const emoji = emojis[parseInt(e.keyCode) - 49];
  if(!emoji) {
    text.textContent = `👻`;
  } else {
    text.textContent = emoji;
  }
  // 1, 2, 3, 4, 5
  // 49, 50, 51, 52, 53
//   switch(e.keyCode) {
//     case 49:
//       text.textContent = `🤬`;
//       break;
//     case 50:
//       text.textContent = `☹️`;
//       break;
//     case 51:
//       text.textContent = `😐`;
//       break;
//     case 52:
//       text.textContent = `🙂`;
//       break;
//     case 53:
//       text.textContent = `😁`;
//       break;
//     default:
//       text.textContent = `👻`;
//       break;
//   }
}) 

/*

DETAILED INSTRUCTIONS
1. Listen for keyboard events when the box has focus
2. Figure out which key the user pressed
3. If it's between 1 and 5, display an emoji in the box!

STRETCH GOALS:
- Animate the emoji onto the screen! Why not go crazy with multiple emojis? 
- Reset the entire app when box doesn't have focus anymore
- Can you improve the overall design?

*/

refs

https://scrimba.com/scrim/co71f4be7b8a67bc848664b3e

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---