learn-co-curriculum/react-events-crash-course-lab

React Events Crash Course Lab

Objectives

1. Practice affixing and handling Synthetic Events in React

Introduction

Meet Chrome Boi! He's a Boi dressed as Google Chrome, and he's going to be joining you in this lab!

We're going to jump right into a React application and add event capturing + handling functionality. We have a simple single component application that renders a 900x600 canvas. All of our work will be done in src/ChromeBoisDomain.js.

For this lab, minimal guidance will be given. If you run into trouble, you are expected to reference the React Crash Course ReadMe lesson and React documentation on events:

• React Synthetic Events
• Handling Events
• Supported Events

Deliverables

• Finish implementing the handleMouseMove method. This method should capture the x and y coordinates of the mouse from the event and use them to invoke the drawChromeBoiAtCoords function that has been provided and is already imported (drawChromeBoiAtCoords expects two arguments, an x and a y coordinate)
• Add an event listener to the <canvas> element to capture a click. Create an event handler which, when fired, invokes the provided toggleCycling function (with no arguments)
• Add an event listener to the <canvas> element to capture when a key is pressed. When a key is pressed, an event handler should invoke the provided resize function with a single argument of either '+' or '-':
  • If the key pressed was 'a', then it should invoke resize and pass in '+'.
  • If the key pressed was 's', then it should invoke resize and pass in '-'.
  • You'll only be able to register a Keyboard event if the canvas is in focus. So on load of the page, either click the canvas for press the tab key to test out this feature.

Hints:

• You do not need any state in this application to make it work. The focus of this lab is practicing event handling in React.
• The functions drawChromeBoiAtCoords, toggleCycling, and resize are NOT props. They are functions exported from the canvasHelpers.js file, so you can't call them off this.props; just invoke them like a regular function.

Once Finished

npm start and assert the following expected behavior:

• As the mouse moves around the canvas element in the browser, ChromeBoi is constantly drawn to the screen
• If the user clicks on the canvas, ChromeBoi begins cycling colors as he is drawn
• If the user presses either 'a' or 's' (while the canvas is on focus), ChromeBoi begins drawing either larger or smaller

Resources

• React Synthetic Events
• Handling Events
• Supported Events

react-events-crash-course-lab's Issues

Double "the"

Line 31 of README.md and line 21 of ChromeBoisDomain.js

Bad link

The link in this sentence: "Have fun with an absolute legend" [legend is a link]
takes me here: https://en.wikipedia.org/wiki/Draft:Chrome_Boi
which gives me this error: Wikipedia does not have a Draft page with this exact name.

Thank you.

Tests do not pass with keycode, only passes with key

Using keyCode to check which key was pressed fails

handleKeyPress = e => { if (e.keyCode === 65 ) { resize("+") } else if (e.keyCode === 83) { resize("-") } }

No visible results

Canvas Link

https://learning.flatironschool.com/courses/1883/assignments/125693?module_item_id=259615

Concern

I'm unsure of the issue, but after completing all of the tests for this lab, I see no visible results. Based on the code, I would assume that an image will be stamped onto the canvas in cyclical RGB patterns. However, after executing my event handlers properly enough to pass tests, I see nothing on the final page...

Additional Context

No response

Suggested Changes

No response