Assessment needed for 'Events' Task 2

MDN Learn
1

I solved the task but I don’t know if this is exactly what was needed, and did I do it the right way…?!

Task link :point_down:

My code :point_down:

canvas.onkeyup = function (e) {
 switch (e.keyCode) {    
  case 87:
   drawCircle(x, y, size);
  break;
  case 65:
   drawCircle(420, y, size);
  break;
  case 83: 
   drawCircle(420, 270, size);
  break;
  case 68:
   drawCircle(x, 270, size);
  break;
}
};
2

Hi @albaraa_1949

Could you please put the complete example with your code into one of those online editors? It’s much easier to evaluate for us, if we see working code.
From the assessment page:

Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.

That being said, the idea of the example is to change “x” or “y” only by a view pixels (2 - 4) on every key press. So one should be able to press “d” several times to move the circle to the right and than press “s” several times to get it down a bit. And so on…

It would be cool, if you could update your example (in a online editor :wink:) and post it here. So I can have another look.

Have a nice day!
Michael

3

Oh,I apologize for not putting my example in the editor.
This is the link to my code in CodePen: https://codepen.io/someone_49/pen/oNWaQrr

But from your explanation of the task, it seems I didn’t come up with the right solution

4

Thank you very much! Now we can start working :grin:

As you can see, initially the circle is not visible. To see it at the starting position, you need to call drawCircle(x, y, size); after you defined the variables:

let x = 50;
let y = 50;
const size = 30;

drawCircle(x, y, size); /* <- This is missing */

I think you just missed to copy it from the example. When you have added this line you will see, that the circle is jumping from corner to corner. Now you can think about what I wrote in the last post and improve your code:

If you need more assistance, I will gladly give you more advices. :slightly_smiling_face:
Michael

5

I’ll try a bit more before asking for more hints.

Thank you very much

6

I modified it, hope this is what was needed… :slightly_smiling_face:
Thank you for giving me some of your time :blush:

7

Well done, @albaraa_1949 :tada:
Your solution does exactly what it has to.

Allow me to give you a small hint to make keyboard events easier to work with. Instead of using e.keyCode and having to find out the value, you code use e.key. This way you can use the actual characters that needs to be pressed:

switch (e.key) {    
  case "w":
    drawCircle(x, y-= 5, size)
  break;
  /* and so on... */

As a side note: e.keyCode is deprecated and it’s even recommended to use e.key.

It’s a pleasure for me to help you :blush:

Michael

1 Like
8

This is much easier, I no longer have to search for the character code.

I am really grateful to you :sparkling_heart:

1 Like