Javascript One on One

Let's start by getting the necessary files for this one on one. Please run this code in your terminal: bash <(curl -L http://bit.ly/2N1YZVN); cd week5OneOnOne/technical_one_on_ones/javascript/week5/AsyncJs_React The downloaded code contains two projects. We are going to start with the H2G2 one. Go ahead and open it in your text editor (even if you use VSCode 🙄).

The DOM

Assessed Objectives

Explain what asynchronous programming stands for
Explain what the DOM is
Read the DOM
Modify the DOM
Listen for events and attach callbacks
Placing of <script>

Asynchronous Javascript

Assesed Objectives

Explain what a promise is
Create an Axios request
Modify the DOM based on a Promise's response

Oral Response

What does asynchronous programming mean?
Explain what the DOM is.

In the H2G2 project: Look at the elements in the page and run the HTML. The game is simple:

User clicks on start
An object falls
User clicks on weird button to change falling object so as to not kill the character. As of now, falling object does not change. That's where you come in. You need to:
You will write your code in the scripts.js file.
First of all make sure your scripts.js is properly linked to your HTML document.
Select the falling image from the DOM and assign it into a variable for later usage.
Do the same with the weird button (blue button).
Set an event listener that listens for a click event on the blue button. This event listener will take an improbabilityDrive callback function.
Now you are going to create an arrow function. Call this function improbabilityDrive.

Here you are going to use some functions that have already been defined for you so please read carefully.

Inside of your improbabilityDrive function, you are going to do the following:

First, invoke the removeClass function (this one has already been defined). The removeClass function takes no arguments.
Then, create an axios request to THIS URL.
Look at the content of the response and identify the data structure at its different levels.
Grab a random object from the response.
Now you need to call the delayedPopSound pre-defined method. This method takes one argument: A "pop" sound Url.
Still in the method, grab the targeted image you selected earlier and:
add a class of animate-me to it. A quick google should show you the way.
assign the random object's image URL as a value for the src attribute.
assign the random object's name as a value for the alt attribute.

Test

You are all done with this part.

React

Assessed Objectives

Create a component
Create a component as a function
Write JSX and render HTML from component
Passing data between components using props
Update a Component's State
Add CSS to a Component

Time to switch to your second project. Change directories into the TicTacToe folder you downloaded earlier. Now you are handed an incomplete game. As you can see the game's functionality is incomplete and is missing a player turn message, as well as the winner message.

Components

First things first. We need to toggle between players after each play. After a click event in every <Box/> component, some events take place: a) the play is saved to the corresponding player b) the game needs to check if anybody won. If nobody won, the current player needs to switch. In order to switch players, just define an object with two properties where the property names are the names of the players ("Cross", "Circle") and their values are the names of the opposite player. Assign the new player state using your object and the current value of the player state as property key.

Test it

Now we need to add some messages. Look at your <ScoreBoard /> component. Inside of the return (or in a separate method called from within, it's up to you) show a <PlayerTurnMessage /> component that takes the player value as a prop if the winner prop is null, otherwise it shows the <WinnerMessage /> component. <WinnerMessage /> takes the value of winner as a prop. The final product should look like this: