Forem: Luc van Kerkvoort

Rock the Paper and scissors

Luc van Kerkvoort — Tue, 15 Nov 2022 05:43:58 +0000

Hi Everyone,

back for the third article in the series. Time for some fun! let's build Rock Paper Scissors...

again this was an actual exercise I had to go through and the interesting part was that I did not get the role even though the feedback I got was that it was the best explanation the interviewer had ever heard during a coding exercise.

ah well... you live and learn.

Approach

so there was a great freedom when it came to making rock paper scissors. There were no expectations for the UI other than the user can select an option.

the other requirements were:

When the user clicks an option, a computer option should be shown
There are 5 rounds to the game, each round should show who won the round
After all 5 rounds are played a message should showcase the winner.
After the game has been played a restart button should appear to restart the game
You have 45 minutes to complete this exercise

React implementation

Since the job was for a Senior React Developer the IDE was using React so the approach here was the one I used in the actual implementation.

I started off with commenting out the necessary items to complete the game:

options for the user, which I decided were going to be buttons
A computers choice, implementing a random option each time the player clicks one of the buttons
A check to see who won the round
Metrics for the game such as user selection, user score, computer selection, computer score, rounds and winning message.

Logic

I decided to start with creating a utils file that would hold the game logic.


 const [userScore, setUserScore] = useState(0);
  const [compScore, setCompScore] = useState(0);
  const [usersSelection, setUserSelection] = useState(null);
  const [compSelection, setCompSelection] = useState(null);
  const [message, setMessage] = useState(null);
  const [round, setRounds] = useState(5);

 const options = ["rock", "paper", "scissors"];


 const game = (userSelection) => {
    setRounds(round - 1);

    const random = Math.floor(Math.random() * options.length);

    const compChoice = options[random];
    setCompSelection(compChoice);
    setUserSelection(userSelection);

    const combinations = {
      rock: options[2],
      paper: options[0],
      scissors: options[1],
    };

    // Logic for a Tie game
    if (userSelection === compChoice) {
      setMessage("Tie");
      return;
    }

    // Logic for scoring
    if (combinations[userSelection] === compChoice) {
      setUserScore(userScore + 1);
      setMessage("You win this round");
    } else {
      setCompScore(compScore + 1);
      setMessage("You lose this round");
    }
  };

We start with setting some state variables... scores, selections and rounds. The rounds start off with 5 so the first thing the logic will do is deduct 1.

Math.random is used to calculate a number between 0 and 2 to select an option for the computer.The state is set with the selections for both computer and user.

An object is used with the keys being the user selections and the value being the losing selection for the computer.

we then create the logic to decide who wins or when it is a tie. If the user selection is the same as the computer selection, it is a tie. If the user selection is the winning combination the user wins otherwise the computer wins the round and we set the message accordingly.

Then we needed to build out the rest of the logic which is deciding the winner and restarting the game.

const [restart, setRestart] = useState(false)

  useEffect(() => {
    if (round < 1) {
      winner();
    }
  }, [round]);

  const winner = () => {
    setRestart(true);

    if (userScore === compScore) return setMessage("its a Tie");
    return userScore > compScore
      ? setMessage("you are the winner")
      : setMessage("You lost");
  };


 const reset = () => {
    setUserScore(0);
    setCompScore(0);
    setCompSelection(null);
    setUserSelection(null);
    setRounds(5);
    setMessage(null);
    setRestart(false);
  };

Let's start off with the useEffect. It checks the rounds whether it has reached 0, if it has, it runs the winner function to decide who won.

The winner function is a simple ternary statement returning the winner with the highest score. Otherwise if the scores are equal it returns early with the score being a Tie. It sets the state variable restart to true so the restart button becomes visible.

The restart function is simply resetting all the state variables to their original values.

I also created a React component that builds a UI for all the metrics we need to take care off.


  const Info = () => (
    <Scores>
      <div>Rounds Left: {round}</div>
      <div>
        User Score: {userScore}
        <br />
        Computer Score: {compScore}
      </div>
    </Scores>
  );

here is the complete picture

import React, { useEffect, useState } from "react";
import { Scores } from "./styles";
const Logic = () => {
  const [userScore, setUserScore] = useState(0);
  const [compScore, setCompScore] = useState(0);
  const [usersSelection, setUserSelection] = useState(null);
  const [compSelection, setCompSelection] = useState(null);
  const [message, setMessage] = useState(null);
  const [round, setRounds] = useState(5);
  const [restart, setRestart] = useState(false);

  const options = ["rock", "paper", "scissors"];

  const reset = () => {
    setUserScore(0);
    setCompScore(0);
    setCompSelection(null);
    setUserSelection(null);
    setRounds(5);
    setMessage(null);
    setRestart(false);
  };
  const winner = () => {
    setRestart(true);

    if (userScore === compScore) return setMessage("its a Tie");
    return userScore > compScore
      ? setMessage("you are the winner")
      : setMessage("You lost");
  };

  const game = (userSelection) => {
    setRounds(round - 1);

    const random = Math.floor(Math.random() * options.length);

    const compChoice = options[random];
    setCompSelection(compChoice);
    setUserSelection(userSelection);

    const combinations = {
      rock: options[2],
      paper: options[0],
      scissors: options[1],
    };

    // Logic for a Tie game
    if (userSelection === compChoice) {
      setMessage("Tie");
      return;
    }

    // Logic for scoring
    if (combinations[userSelection] === compChoice) {
      setUserScore(userScore + 1);
      setMessage("You win this round");
    } else {
      setCompScore(compScore + 1);
      setMessage("You lose this round");
    }
  };

  useEffect(() => {
    if (round < 1) {
      winner();
    }
  }, [round]);

  const Info = () => (
    <Scores>
      <div>Rounds Left: {round}</div>
      <div>
        User Score: {userScore}
        <br />
        Computer Score: {compScore}
      </div>
    </Scores>
  );

  return {
    game,
    reset,
    message,
    restart,
    options,
    Info,
    usersSelection,
    compSelection,
  };
};

export default Logic;

UI

I decided to use the logic to build the UI, we already have the array with the options which can be used to showcase the buttons for both the user as well as the computer.

import React from "react";
import { Game, Options, Option } from "./styles";
import Logic from "./utils";

export default function App() {
  const {
    Info,
    restart,
    reset,
    game,
    message,
    options,
    compSelection,
    usersSelection,
  } = Logic();

  const images = {
    rock: "https://cdn-icons-png.flaticon.com/512/3562/3562093.png",
    paper: "https://cdn-icons-png.flaticon.com/512/2949/2949963.png",
    scissors: "https://cdn-icons-png.flaticon.com/512/4151/4151732.png",
  };

  return (
    <>
      <Info />
      <Game>
        {message}
        <Options>
          {options.map((item, i) => (
            <Option
              id={item}
              key={i}
              disabled={restart && item !== usersSelection}
              onClick={() => game(item)}
            >
              <img src={images[item]} alt={item} height="100%" />
            </Option>
          ))}
        </Options>

        <Options>
          {options.map((item, i) => (
            <Option key={i} disabled={item !== compSelection}>
              <img src={images[item]} alt={item} height="100%" />
            </Option>
          ))}
        </Options>

        <div>{restart && <button onClick={() => reset()}>restart</button>}</div>
      </Game>
    </>
  );
}

as you can see it is the info section that is being returned from the Logic hook. Then the options being mapped twice to create the different options for both the user as well as the computer.

Images to represent the hand gestures for Rock Paper and Scissors. disabled variable to show the computer selection and to showcase the users last selection after the game ends.

lastly a restart button that uses logical and to decide whether to show the button, which equates to the restart state in the hook.

Styled components

As you might know by now I have a preference for styled components, I just think they have multiple use cases that can come in handy at anytime. They are not necessary in this example but since we are using the library...

import styled from "styled-components";

export const Scores = styled.div`
  display: flex;
  justify-content: space-between;
`;

export const Game = styled.div`
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
`;

export const Options = styled.div`
  display: flex;
  justify-content: space-around;
  width: 50vw;
  margin: 5rem auto;
`;

export const Option = styled.button`
  height: 10rem;
  padding: 1rem;
  border: none;
  border-radius: 50%;
  transition: 0.5s;

  :disabled {
    background: black;
    border: 10px solid black;
  }

  :hover {
    box-shadow: 0px 0px 9px black;
  }
`;

JavaScript Implementation

For the JavaScript implementation I have reused about 90% of the code of the React implementation since the logic doesn't change to much.

Here is the full implementation. I will be diving into the code that is separate from the React implementation after

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rock Paper Scissors</title>
  </head>
  <body>
    <div id="root"></div>
    <div id="score"></div>
    <div id="messages"></div>

    <script>
      let userScore = 0;
      let compScore = 0;
      let rounds = 5;
      let message = "";
      let restart = false;
      let compSelection;

      const root = document.getElementById("root");
      const score = document.getElementById("score");
      const messages = document.getElementById("messages");
      let comp = document.createElement("p");

      score.innerHTML = `rounds: ${rounds} , user score: ${userScore}, comp score = ${compScore}`;

      const options = ["Rock", "Paper", "Scissors"];

      const userBlocks = options.map((item, i) => {
        const button = document.createElement("button");
        button.innerHTML = item;
        button.addEventListener("click", () => game(item));

        root.append(button);
      });

      const game = (userSelection) => {
        if (restart) return;

        rounds--;

        const random = Math.floor(Math.random() * options.length);
        compSelection = options[random];
        comp.innerHTML = compSelection;

        const combinations = {
          Rock: "Scissors",
          Paper: "Rock",
          Scissors: "Paper",
        };

        if (userSelection === compSelection) {
          message = "its a Tie";
          messages.innerHTML = message;
          score.innerHTML = `rounds: ${rounds} user score: ${userScore}, comp score = ${compScore}`;
          return winner();
        }

        if (combinations[userSelection] === compSelection) {
          userScore++;
          message = "You won this round";
        } else {
          compScore++;
          message = "You lost this round, better luck next time";
        }

        messages.innerHTML = message;
        score.innerHTML = `rounds: ${rounds} user score: ${userScore}, comp score = ${compScore}`;
        return winner();
      };

      root.append(comp);

      const winner = () => {
        if (rounds > 0) return;

        restart = true;

        const restartButton = document.createElement("button");
        restartButton.id = "restartButton";
        restartButton.innerHTML = "restart";
        restartButton.addEventListener("click", (e) => {
          userScore = 0;
          compScore = 0;
          rounds = 5;
          message = "";
          restart = false;
          compSelection = null;

          comp.innerHTML = compSelection;

          messages.innerHTML = message;
          score.innerHTML = `rounds: ${rounds} user score: ${userScore}, comp score = ${compScore}`;
          restartButton.remove();
          return;
        });
        document.body.append(restartButton);

        if (userScore === compScore) {
          message = `It's a Tie`;
          return (messages.innerHTML = message);
        }

        userScore > compScore
          ? (message = "You Won!!!")
          : (message = "You Lose !!");
        return (messages.innerHTML = message);
      };
    </script>
  </body>
</html>

Initializing

  const root = document.getElementById("root");
      const score = document.getElementById("score");
      const messages = document.getElementById("messages");
      let comp = document.createElement("p");

      score.innerHTML = `rounds: ${rounds} , user score: ${userScore}, comp score = ${compScore}`;

const userBlocks = options.map((item, i) => {
        const button = document.createElement("button");
        button.innerHTML = item;
        button.addEventListener("click", () => game(item));

        root.append(button);
      });

since there isn't a possibility of embedding the JavaScript values in the JSX code in a vanilla approach, we have to setup some elements that can showcase the changes when they happen.

in this case the root element which will be holding the buttons for the user selection. A paragraph that showcases the computer selection is also used.

score is an element that will keep score on the metrics.

instead of setting the state and having the page restart reactively, we just set the innerHTML of the existing elements to represent the new metrics that happen after every round.

Restart Button

const restartButton = document.createElement("button");
        restartButton.id = "restartButton";
        restartButton.innerHTML = "restart";
        restartButton.addEventListener("click", (e) => {
          userScore = 0;
          compScore = 0;
          rounds = 5;
          message = "";
          restart = false;
          compSelection = null;

          comp.innerHTML = compSelection;

          messages.innerHTML = message;
          score.innerHTML = `rounds: ${rounds} user score: ${userScore}, comp score = ${compScore}`;
          restartButton.remove();
          return;
        });
        document.body.append(restartButton);

The restart button does the same as the restart button on the react side, but the biggest difference is that we have to reset the elements as well as the variables.

after the restart button is clicked it is being removed by itself as well. until restart is set to true again and the cycle starts over.

Thank You

Thank you again for reading this and I hope this will help you in your next interview or coding exercise. I would love to hear your feedback or comments on the implementation and I encourage you to practice this when you are interviewing. It will help you with your chances.

Stay tuned for the next one tomorrow.

Tic Tac then Toe

Luc van Kerkvoort — Sun, 13 Nov 2022 23:59:02 +0000

Hi everyone,

continuing on from the last article, read it here
I'll be continuing with a second coding exercise I got during one of my interviews.

TicTacToe

I was asked by one of my interviewers if I could build Tic Tac Toe. The challenging part of this exercise was that you only had 20 min to finish the coding exercise.

Just in case if someone doesn't know the rules of TicTacToe, it's a roster or matrix of 3*3 where players take turn writing either an X or O in a square. The winner is determined by there indicator (X or O) being in 3 consecutive squares, either horizontal, vertical or diagonal.

For practice purposes I have written the logic in both React as well as Vanilla JS since some interviewers will only allow Vanilla.

React Approach

The beauty of React is that in an interview you can sprinkle a lot of your knowledge in your approach. By making decisions on design patterns (e.g. using hooks or HOC's) you can showcase how you would interact with a bigger application and how you would solve issues for performance, scalability and readability.

These are things I often take into consideration and I verbalize during my interviews so the interviewer knows my intentions, understands my logic and decisions and sees that I'm thinking ahead by making performant and modular components.

Logic

I tend to use helper functions or hooks to create modular components in React. This also helps with separating concerns between logic an the UI.

My approach with TicTacToe is that the logic of the game is build into a hook that gives access to certain parts of the logic by using encapsulation. So the UI component doesn't get polluted with code, improving the readability.

import { useState } from "react";

const Logic = () => {
  const [board, setBoard] = useState(new Array(9).fill(null));
  const [isPlayerX, setPlayer] = useState("X");
  const [winner, setWinner] = useState(null);

  const move = (i) => {
    const copyBoard = [...board];

    if (copyBoard[i] || winner) return;

    copyBoard[i] = isPlayerX ? "X" : "O";
    setPlayer(!isPlayerX);
    hasAWinner(copyBoard);
    setBoard(copyBoard);
  };

  const hasAWinner = (square) => {
    const lines = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 4, 8],
      [2, 4, 6],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
    ];

    for (let i = 0; i < lines.length; i++) {
      const [a, b, c] = lines[i];

      if (square[a] && square[a] === square[b] && square[a] === square[c]) {
        return setWinner(square[a]);
      }
    }
  };

  return {
    board,
    move,
    winner,
  };
};

export default Logic;

This logic component has 4 parts:

The Board
A function that makes a move on the board
A function to check whether there is a winner
The winner that is being returned.

The Board

The board is a visual representation of the actual TicTacToe board. I've created an array with a length of 9 representing the 3*3 matrix. The initial value is set to null as to keep the squares empty. We return this state and use it to create the UI.

The Move

The move is a function that deals with the actual actions that are being played out on the field.

const move = (i) => {
    const copyBoard = [...board];

    if (copyBoard[i] || winner) return;

    copyBoard[i] = isPlayerX ? "X" : "O";
    setPlayer(!isPlayerX);
    hasAWinner(copyBoard);
    setBoard(copyBoard);
  };

we start of by creating a copy of the board and use that to do all the actions we need to before setting the state. The process of using a copy of the state and not the actual state is called immutable.

    const copyBoard = [...board];

Then we check the copy if the square we clicked already has a value or there already is a winner. if so we stop the function and move on.

if (copyBoard[i] || winner) return;

if the square is empty we fill it with the current player, this is decided by a ternary operator.

then we set the board to be the copy of the board we just adjusted and check if there is a winner

    copyBoard[i] = isPlayerX ? "X" : "O";
    setPlayer(!isPlayerX);
    hasAWinner(copyBoard);

HasAWinner

the has a winner is the part of the application with the most intricate logic for this application.

const hasAWinner = (square) => {
    const lines = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 4, 8],
      [2, 4, 6],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
    ];

    for (let i = 0; i < lines.length; i++) {
      const [a, b, c] = lines[i];

      if (square[a] && square[a] === square[b] && square[a] === square[c]) {
        return setWinner(square[a]);
      }
    }
  };

In this a representation of all the combinations for winning are stored inside a matrix (array of arrays). the numbers inside the matrix represent the indices of the squares in the board array.

const lines = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 4, 8],
      [2, 4, 6],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
    ];

Then we use a for loop to loop over all the possible combinations and check the board if any of those equate to a single value.

for (let i = 0; i < lines.length; i++) {
      const [a, b, c] = lines[i];

      if (square[a] && square[a] === square[b] && square[a] === square[c]) {
        return setWinner(square[a]);
      }
    }

the logic makes sense in my head when I start filling it in.
we de-structure lines[i] lets say i is 0 in this case, meaning lines[0] = [0,1,2]. we can then say a = 0 b = 1 c = 2

then we move to the if statement. if on the board (square) 0 has a value, square[0] has the same value as square[1] and square[0] has the same value as square[2] meaning the top row of the TicTacToe board, then we return setting the winner to the value of square[0].

We loop through all the combinations: rows, columns and diagonals. If none of them are good we continue to game.

The Winner

the winner starts of as a null value and will only receive a value if hasAWinner returns one.

UI

The UI for this application is very straightforward. Once again I used styled components to create some CSS. In this case it wasn't necessary but since I was making use of the library I might as well use it.

import React from "react";
import Logic from "./utils";
import { Tile, Board } from "./styles";

const TicTacToe = () => {
  const { board, move, winner } = Logic();

  return (
    <div>
      <h1
        style={{
          textAlign: "center",
        }}
      >
        {winner && `The winner is: ${winner}`}
      </h1>
      <Board>
        {board.map((item, i) => (
          <Tile onClick={() => move(i)}>{item}</Tile>
        ))}
      </Board>
    </div>
  );
};

export default TicTacToe;

There is a simple breakdown for the UI here. It is a parent element (the div) that wraps both the Winner component (h1) and the Board component.

we use the hook we just created to setup the board by mapping over it and returning a Tile component with an onClick function that uses the move we created and i as in the index of the element clicking it (which is represented in the board). and we set the inner html to the value of the index, which starts off as null.

by clicking any of the squares we set the value to either X or O (starting with X) in the copyBoard and set the new board which then gets mapped over, completing the cycle until we have a winner.

CSS

The best implementation for the CSS on this application is the use of a grid. that way we can set the grid to represent our 3*3 and we don't have to worry about responsive behavior or creating difficult patterns of div's with child components to create the matrix.

import styled from "styled-components";

export const Tile = styled.div`
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
`;

export const Board = styled.div`
  margin: 50px auto;
  display: grid;
  height: 500px;
  width: 500px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
`;

JavaScript Approach

The Vanilla approach is in a lot of ways very similar to the React approach. The biggest difference lies in the way we have to represent the data using vanilla js. We can't use a single board and map over it that will be reactive on every click and will automatically reload.

We would have to find the correct element and set its inner html and make changes that way.

Here is a solution to the Vanilla approach. Yours might be different and I encourage you to share your approach as well as it may help others.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tic Tac Toe</title>
  </head>
  <body>
    <div id="root"></div>

    <script>
      const root = document.getElementById("root");
      let winner = null;
      let board = new Array(9).fill("");
      let isX = true;

      const hasAWinner = (square) => {
        const lines = [
          [0, 1, 2],
          [3, 4, 5],
          [6, 7, 8],
          [0, 4, 8],
          [2, 4, 6],
          [0, 3, 6],
          [1, 4, 7],
          [2, 5, 8],
        ];

        for (let i = 0; i < lines.length; i++) {
          const [a, b, c] = lines[i];

          if (square[a] && square[a] === square[b] && square[a] === square[c]) {
            const winnerParagraph = document.createElement("p");
            winnerParagraph.innerHTML = `The winner is ${square[a]}`;
            root.append(winnerParagraph);

            return (winner = square[a]);
          }
        }
      };

      const move = (index) => {
        const square = document.getElementById(index);

        if (!!square.innerHTML || winner) return;

        board[index] = isX ? "X" : "O";
        square.innerHTML = isX ? "X" : "O";
        isX = !isX;
        hasAWinner(board);
      };

      board.map((item, i) => {
        const square = document.createElement("div");
        square.classList.add("square");
        square.id = i;
        square.innerHTML = item;
        square.addEventListener("click", () => move(i));

        root.append(square);
      });
    </script>
  </body>
</html>

From this solution there are a couple of things standing out:

The move function has altered
we map through the board and create our elements on the fly after page loads.
the hasAWinner function has altered

but for the main parts they are very similar.
lets go over the changes:

Mapping over the board

to initialize our board we have to loop over the board and create it on the fly, and append it to the root div. That way we start of the page with a board

board.map((item, i) => {
        const square = document.createElement("div");
        square.classList.add("square");
        square.id = i;
        square.innerHTML = item;
        square.addEventListener("click", () => move(i));

        root.append(square);
      });

The Move

after the board has initialized we know the ID for is the same as the index. Therefore we can look up the element by index.

const move = (index) => {
        const square = document.getElementById(index);

        if (!!square.innerHTML || winner) return;

        board[index] = isX ? "X" : "O";
        square.innerHTML = isX ? "X" : "O";
        isX = !isX;
        hasAWinner(board);
      };

after the lookup we check the values like before only now we check !!square.innerHTML

Now this is where it gets a little tricky, we still have our data structure representing our board, but if we change the values of the board it will not be represented on the page. so we also have to set the innerHTML to the same value.

The reason we want our board to still represent it is because we need it to check the winner. You could loop over all the squares and check every squares value but that adds complexity that I deemed unnecessary in this case.

hasAWinner

This function has just one thing added to it. We create a winner paragraph on the fly instead of setting the variable which is represented in the React application

if (square[a] && square[a] === square[b] && square[a] === square[c]) {
            const winnerParagraph = document.createElement("p");
            winnerParagraph.innerHTML = `The winner is ${square[a]}`;
            root.append(winnerParagraph);

            return (winner = square[a]);
          }
        }

Thank You

Thank you again for joining and reading my article. I really appreciate any feedback that you guys can give me. Once again I hope this helps you in your journey as it did for me.

I'll be dropping the next part to this series tomorrow which will be going over my implementation of Rock Paper Scissors

Keeping tabs on Bitcoin

Luc van Kerkvoort — Sat, 12 Nov 2022 22:23:37 +0000

Hi everyone,

I have been wanting to create a repository with Front end Interview questions for quite some time now.
I wanted to share my knowledge and the kind of coding exercises you can expect when going for a front end role.

To keep everything comprised I decided to make this into a series talking about a single coding exercise in each one to keep it concise and easy to lookup.

TLDR

I have made a repository with React and HTML, CSS and Javascript solutions to coding exercises from Front End interviews.
Github link

Bitcoin

I got the following question:

Given an API that returns the latest price of Bitcoin.
Create an application that has a button saying Get Bitcoin.
The color of the button at the start should be blue.
After it is clicked it should change color to purple and the text should change to refresh Bitcoin price.

Showcase the current price as returned from the API. After clicking again it should also showcase the previous price.

If you want to you can use the URL in the Github repo to code out your own solution. Otherwise you can keep reading and follow along to my approach

Approach

Let's think about the necessities to make this operation work. Here is a list of elements needed.

API call
A button that can change colors
A data structure to hold the current and previous value.
Two paragraphs to store the values in

React Implementation

API Call

When it comes to React I enjoy using the hooks approach. The API call and the setting of values can be combined into a hook that will just return the value, and the function to make the API call.

import { useState } from "react";

export const GetBitcoin = () => {
  const [bitcoinPrice, setBitcoinPrice] = useState([]);

  const getCoin = async () => {
    try {
      const call = await fetch(
        "https://api.coinbase.com/v2/prices/BTC-USD/buy",
        {
          method: "GET",
          authorization:
            "Bearer abd90df5f27a7b170cd775abf89d632b350b7c1c9d53e08b340cd9832ce52c2c",
        }
      );
      const response = await call.json();
      storeAmount(response);
    } catch {
      return [];
    }
  };

  const storeAmount = ({ data }) => {
    if (!data) return;

    const { amount } = data;

    const prices = [parseInt(amount), ...bitcoinPrice].slice(0, 2);

    setBitcoinPrice(prices);
  };

  return { getCoin, bitcoinPrice };
};

export default GetBitcoin;

I have encapsulated the API call, the function is exposed so the call can be made, but the logic for storing the amount is not being exported or available.

My choice for using hooks is that we have a clear seperation of concerns when it comes to UI and Logic. I can make quick changes to logic and the logic has become modular, if I wanted to implement the same logic on a different part of the application I can just use the hook.

UI

for the UI we have to take into consideration the following

A button to make the API Call
A paragraph to show the previous and current price
A way to showcase that the button has been pressed

for my implementation I used styled-components a library that allows the CSS to use JavaScript to check for properties of the element.

import React, { useState } from "react";
import GetBitcoin from "./api";
import { Button, List, Application } from "./styles";

function App() {
  const [hasBeenPressed, setPressed] = useState(false);

  const { getCoin, bitcoinPrice } = GetBitcoin();

  return (
    <Application className="App">
      <Button
        isPressed={hasBeenPressed}
        onClick={async () => {
          if (!hasBeenPressed) setPressed(true);
          getCoin();
        }}
      >
        {hasBeenPressed ? "refresh Bitcoin price" : "get Bitcoin price"}
      </Button>
      <div>
        {bitcoinPrice && (
          <List>
            {bitcoinPrice.map((value, i) => (
              <div key={i}>
                {i === 0 ? "Current price: " : "Previous price: "} {value}
              </div>
            ))}
          </List>
        )}
      </div>
    </Application>
  );
}

export default App;

as you can see the only state within the application itself is the hasBeenPressed state. Keeping track on whether the button has been pressed.

for the logic I use ternary operators to decide what to showcase. The other logic is coming from the Hook we implemented before.

Styling

Like I mentioned before I used styled-components to create the different UI elements. Styled components create React elements that can take in properties to set styling.

import styled from "styled-components";

export const Button = styled.button`
  background-color: ${({ isPressed }) => (isPressed ? "blue" : "purple")};
`;

export const List = styled.div`
  display: flex;
  flex-direction: column;
`;

export const Application = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

As you can see I'm setting the background-color on the Button to blue or purple depending on the property isPressed, which has a boolean value

JavaScript Implementation

For the JavaScript implementation I went a little more rudimentary. I decided to go with an approach where it all fits into a single document, most of the time when you get coding exercises and bigger firms they only allow a single HTML file, using a script tag to separate the JavaScript from the HTML and inline styles.

Javascript

I've created the following functions:

FetchBitcoin
SetData
Change Color

FetchBitcoin

This is the API call that gets triggered whenever the user clicks on the button. This is the major function being called and basically calls the other functions inside of it.

For this purpose I think it is fine since we are not thinking about reusable modular code here. If that was the case we could use encapsulation to make the code more modular.

SetData

This is the most intricate of the functions in this file. I've given some thought as to what data structure I want to use here. I decided to go with a Queue approach since we will have two values to keep track off and new ones keep getting added to the front (current value) and old ones are popped off from the back (previous value) so we have a moving Queue.

changeColor

this function changes the background color from the initial blue to purple. I added an if statement so the change only happens ones and not on every API call.

<script>
      const availableData = [];

      const setData = (data) => {
        if (availableData.length > 2) {
// remove the previous value from the array
          availableData.pop();
        }

// add new value to the start of the array
        availableData.unshift(data);

        const [currentData, previousData] = availableData;

        document.getElementById(
          "current"
        ).innerHTML = `Current Price: ${currentData}`;

        if (previousData) {
          document.getElementById(
            "previous"
          ).innerHTML = `Previous Price: ${previousData}`;
        }
      };

      const changeColor = () => {
        const button = document.querySelector("button");

        if (button.style.backgroundColor === "purple") return;

        button.style.backgroundColor = "purple";
      };

      const fetchBitcoin = () => {
        changeColor();
        const response = fetch(
          "https://api.coinbase.com/v2/prices/BTC-USD/buy",
          {
            method: "GET",
            authorization:
              "Bearer abd90df5f27a7b170cd775abf89d632b350b7c1c9d53e08b340cd9832ce52c2c",
          }
        )
          .then((response) => response.json())
          .then(({ data: { amount } }) => setData(amount));
      };
    </script>

HTML

I used VSCode code snippets to fill out the boiler plate code for HTML5. I have created only 3 elements for this exercise:

button
paragraph for current price
paragraph for previous price

I decided to go with inline styling to set the color for the button on page load. This way I wouldn't have to add a CSS stylesheet for just a single button color change.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bitcoin</title>
  </head>
  <body>
    <button style="background-color: blue" onclick="fetchBitcoin()">
      Grab Bitcoin
    </button>
    <p id="current"></p>
    <p id="previous"></p>
  </body>
</html>

Thank You

I hope this helps any of you out there that are in the process of interviewing for Front End positions.

I would appreciate any feedback or any comments you have on my code and I encourage you to post your own solutions in the comment sections as well. If we all help each other we can all become better developers.

I will be posting part 2 tomorrow.

Advanced JavaScript Concepts

Luc van Kerkvoort — Wed, 27 Jul 2022 01:26:00 +0000

I was sitting behind my computer thinking of creating a small application that would leverage some advanced JavaScript concepts.. in particular I was thinking of real world implementations of throttle and debounce.

I've created an application that kind of leverages the logic of throttle but will also showcase some difficult to maneuver web api's such as setTimeout and setInterval

if this has piqued your interest.. please read on.

TLDR

for those of you that don't like to read.. here is the logic for the application

const GetScores = () => {
  const [homeScore, setHomeScore] = useState(0);
  const [awayScore, setAwayScore] = useState(0);

  const updateScore = () => {
    const scoreOptions = [0, 2, 3];
    const randomNum = () => Math.floor(Math.random() * 3);

    setHomeScore(homeScore + scoreOptions[randomNum()]);
    setAwayScore(awayScore + scoreOptions[randomNum()]);
  };

  return {
    homeScore,
    awayScore,
    updateScore,
  };
};



const usePlayGame = ({ 
  team1 = "https://cdn.mos.cms.futurecdn.net/8227s5kMEx84YEHWLbxCb4-1200-80.jpg",
  team2 = "https://www.dailynews.com/wp-content/uploads/migration/2015/201506/SPORTS_150619439_AR_0_FHMRLLUSDJPX.jpg?w=1024",
  timeLapse,
  delay,
}) => {
  const [time, setTime] = useState(15);
  const [pause, setPause] = useState(false);
  const [quarter, setQuarter] = useState(0);
  const [winner, setWinner] = useState("");

  const { updateScore, homeScore, awayScore, homeTeam, awayTeam } = GetScores(
    team1,
    team2
  );

  useEffect(() => {
    // if we have finished the last quarter
    if (quarter >= 3) {
      // we decide the winner by checking the scores
      const winner = homeScore > awayScore ? homeTeam : awayTeam;
      //   we set the winner
      setWinner(winner);
      //   we pause the game indefinitely
      return setPause(true);
    }
    // Let's unpause after a break (setTimeout callback)
    if (pause) {
      setPause(false);
    }

    // on every interval increase time by the timelapse set (default 1000 ms)
    const interval = setInterval(() => {
      updateScore();
      setTime(time - 1);
    }, timeLapse);

    // if the time is run out and the game is not yet over
    if (time === 0 && quarter !== 3) {
      // We pause the match
      setPause(true);
      //   we move to the next quarter
      setQuarter(quarter + 1);
      //   we reset the time after a short break (delay default 5000 ms)
      setTimeout(() => {
        setTime(time + 15);
      }, delay);
      return clearInterval(interval);
    }
    return () => clearInterval(interval);
  }, [time]);

  return {
    time,
    pause,
    quarter,
    winner,
    homeScore,
    awayScore,
    homeTeam,
    awayTeam,
  };
};

Fantasy Basketball

for the implementation of the logic I wanted to create something fun. Something that I've started enjoying a lot... Basketball. Go Warriors!! am I right.

I have decided to create a fantasy basketball application that can run an entire game as soon as the page loads. There are a lot of moving parts to this application, but not to worry. we will build out every piece individually. The following we will need:

a timer
a scoreboard
breaks after every quarter
deciding a winner

Prerequisites

This tutorial will be build in React with JavaScript, a basic understanding of both would definitely come in handy for this tutorial just to understand some of the more complex pieces of the application.

we will be installing one more dependency.. styled components.

npm install --save-dev styled-components

not a necessity, just very powerful in my opinion and comes in handy in almost every project. It is a library to turn your css into React components where you can also pass along properties to it to manipulate the css.

Getting started

to get started with any react project for home use, we can simple use Create React App (CRA). Create React app is a powerful tool to bootstrap a React project and the perfect solution for building simple applications like this.

Run the following command to get started.

npx create-react-app ${your app name here}

then type the following command into your CLI cd ${your app name here} and voila. we have a project setup.

Structure

Below you can see the structure of the game.
I will be going over every component as we move along.

Recreate the structure as you see fit, if you want to follow along with me then recreate the folders as shown in the image above

API

the first component I would like to build is the API. In this tutorial I'm not actually using an API, I have just created a hook that runs locally but basically mocks an API call.

this logic is stored in src/Services/api.js

first let's start with what we want this API to return.
We want the following:

Home team score
Away team score
function to update the score

import { useState } from "react";

export const GetScores = (
) => {
  const [homeScore, setHomeScore] = useState(0);
  const [awayScore, setAwayScore] = useState(0);

const updateScore = () => {
    const scoreOptions = [0, 2, 3];
    const randomNum = () => Math.floor(Math.random() * 3);

    setHomeScore(homeScore + scoreOptions[randomNum()]);
    setAwayScore(awayScore + scoreOptions[randomNum()]);
  };

  return {
    homeScore,
    awayScore,
    updateScore,
  };
};

to keep track of the scores I created to state variables that can keep track of each teams scores independently.

Next I needed a function that would update the score whenever we needed it to. The updateScore function does just that. Every second we run the play, the updateScore function runs on each of the teams.

I've created an array with the possible scores in a basketball game being: 0, 2 and 3. You can dunk, layup or shoot to get 2 points and you can shoot from the 3 point line to get 3 points, your only other option is missing.

I then needed something to determine which one of the three options it would be. I created a function that returns Math.floor(Math.random()*3). Let's break that down.

Math.floor takes out decimal values and "floors" them so brings it basically removes the decimals (e.g. 10.8 is 10)

Math.random will give us a random numerical value between 0 and 1 (e.g 0.245 or 0.678) we multiply this with the amount of options we have (3) and we will receive a random number between 0 and 2 which corresponds with the indexes in our array.

then we set the new score by adding up the old score with the randomly selected outcome and return those.

Hooks

Now it is time to get to the nitty gritty. I've created a custom hook to take care of all the logic pertaining to the actual game. This way I keep my UI component clean of too much logic and make it easier to read.

this logic is stored in src/Services/hooks.js


import { useState, useEffect } from "react";
import { GetScores } from "./api";

const usePlayGame = ({ team1, team2, timeLapse = 1000, delay = 5000 }) => {
  const [time, setTime] = useState(15);
  const [pause, setPause] = useState(false);
  const [quarter, setQuarter] = useState(0);
  const [winner, setWinner] = useState("");

  const { updateScore, homeScore, awayScore } = GetScores();

  useEffect(() => {
    // if we have finished the last quarter
    if (quarter >= 3) {
      // we decide the winner by checking the scores
      const winner = homeScore > awayScore ? team1 : team2;
      //   we set the winner
      setWinner(winner);
      //   we pause the game indefinitely
      return setPause(true);
    }
    // Let's unpause after a break (setTimeout callback)
    if (pause) {
      setPause(false);
    }

    // on every interval increase time by the timelapse set (default 1000 ms)
    const interval = setInterval(() => {
      updateScore();
      setTime(time - 1);
    }, timeLapse);

    // if the time is run out and the game is not yet over
    if (time === 0 && quarter !== 3) {
      // We pause the match
      setPause(true);
      //   we move to the next quarter
      setQuarter(quarter + 1);
      //   we reset the time after a short break (delay default 5000 ms)
      setTimeout(() => {
        setTime(time + 15);
      }, delay);
      return clearInterval(interval);
    }
    return () => clearInterval(interval);
  }, [time]);

  return {
    time,
    pause,
    quarter,
    winner,
    homeScore,
    awayScore,
  };
};

export default usePlayGame;

Let me break this badboy down. Let's start with the useEffect and I'll break down what each part of the hook will do.



    // if we have finished the last quarter
if (quarter >= 3) {
      // we decide the winner by checking the scores
      const winner = homeScore > awayScore ? team1 : team2;
      //   we set the winner
      setWinner(winner);
      //   we pause the game indefinitely
      return setPause(true);
    }

This if statement is basically a principal taken from recursive programming. When we reach the final quarter we want the useEffect to no longer run so we return with setPause to true.

Recursive programming is where we call a function inside of itself and have an exit after we have reached a certain point.

let count = 0;

const addTo10 = () => {
if(count === 10) return

console.log(count)

addTo10(count++)

}

as you can see with this simple example, we have a count that starts off at 0. The addTo10 function calls itself with count++ adding up the count every time it runs. The if statement in the beginning makes sure that when the count equals 10 we return and the function stops running.

you can copy and paste this into a browser to see how it works.

the next code block that is important is this

// on every interval increase time by the timelapse set (default 1000 ms)
    const interval = setInterval(() => {
      updateScore();
      setTime(time - 1);
    }, timeLapse);

we create a timer by using setInterval which reruns a function after every interval. The timeLapse variable is set to 1000ms in the above example which accounts for a single second. so we decrease a number value by 1 every time it runs. This is our clock.

on the interval we update the score which is the function we get from our API we created before:


  const { updateScore, homeScore, awayScore } = GetScores();

this will update the score and export the homeScore and awayScore for the respective teams.

 // if the time is run out and the game is not yet over
    if (time === 0 && quarter !== 3) {
      // We pause the match
      setPause(true);
      //   we move to the next quarter
      setQuarter(quarter + 1);
      //   we reset the time after a short break (delay default 5000 ms)
      setTimeout(() => {
        setTime(time + 15);
      }, delay);
      return clearInterval(interval);
    }
    return () => clearInterval(interval);
  }, [time]);

this is the main code. Let's go through it step by step. if the time hits zero and it isn't the final quarter we want to set pause to true, increase the quarter and use a setTimeout callback to reset the timer back to 15 and use a delay variable to set the milliseconds we want to wait (default 5000 ms or 5 sec). within useEffect we will have to return the clearInterval to stop the intervals from running.

after this has run we will have to setPause to false to continue our loop

if(pause){
setPause(false)
}

Throttle

if you look up the principle of throttle in JavaScript it is usually has similar code as the one above. we want to set a variable or state to true so a function can run, inside the function we set the state to false to make it stop running and use a setTimeout to start the function again. In this case setInterval is taking care of resetting the state.

below you can see an example of throttling in JavaScript

//initialize throttlePause variable outside throttle function
let throttlePause;

const throttle = (callback, time) => {
  //don't run the function if throttlePause is true
  if (throttlePause) return;

  //set throttlePause to true after the if condition. This allows the function to be run once
  throttlePause = true;

  //setTimeout runs the callback within the specified time
  setTimeout(() => {
    callback();

    //throttlePause is set to false once the function has been called, allowing the throttle function to loop
    throttlePause = false;
  }, time);
};

UI

now for the fun part. We can build out the UI. The UI is build out into several components, the main one being ScoreCard

import React from "react";
import Winner from "../Winner";
import { CardWrapper, Score, Teams, TeamLogo } from "./styles";
import usePlayGame from "../../Services/hooks";
import Time from "../Time";
import Break from "../Break";
import { game } from "./utils";

const ScoreCard = ({
  team1 = "https://cdn.mos.cms.futurecdn.net/8227s5kMEx84YEHWLbxCb4-1200-80.jpg",
  team2 = "https://www.dailynews.com/wp-content/uploads/migration/2015/201506/SPORTS_150619439_AR_0_FHMRLLUSDJPX.jpg?w=1024",
  timeLapse,
  delay,
}) => {
  const { quarter, time, homeScore, awayScore, pause, winner } = usePlayGame({
    team1,
    team2,
    timeLapse,
    delay,
  });

  return (
    <CardWrapper>
      <Teams>
        <TeamLogo src={team1} /> vs
        <TeamLogo src={team2} />
      </Teams>
      {game[quarter]}
      <Score>
        {homeScore} - {awayScore}
      </Score>
      {pause ? <Break quarter={quarter} /> : <Time time={time} />}
      <br />
      {winner && <Winner img={winner} />}
    </CardWrapper>
  );
};

export default ScoreCard;

The scorecard has the teams

<Teams>
 <TeamLogo src={team1} /> vs
 <TeamLogo src={team2} />
</Teams>

the quarter we are in which utilizes a utils.js file. I've combined both in the section below

{game[quarter]}

export const game = ["First Half", "Second Half", "Third Half", "Full Time"];

it selects the correct game by using the quarter which runs from 0 to 3 to decide what part of the game we are in.

the next part is the score

<Score>
  {homeScore} - {awayScore}
</Score>

which receives the homeScore and awayScore from our hooks.js file

then we have a couple of operators that use the Break, Time and Winner components

{pause ? <Break quarter={quarter} /> : <Time time={time} />}
<br />
{winner && <Winner img={winner} />}

if we are on a pause we want to showcase the word 'break' except for when we reach full time. otherwise we want to showcase the time but because time runs from 15 to 0, we want to showcase it as 15, 14, 13, 12, 11, 10, 09, 08, 07, 06, 05, 04, 03, 02, 01, 00.

for those reasons I've build out the following components in the Break folder and the Time folder respectively.


//Break
import React from "react";

const Break = ({ quarter }) => {
  console.log(quarter);
  return <div>{quarter < 3 ? "Break" : ""}</div>;
};

export default Break;

//Time
import React from "react";

const Time = ({ time }) => <div>{time < 10 ? `0${time}` : time}</div>;

export default Time;

the final piece of the puzzle is the Winner component


import React from "react";
import { WinnerCard } from "./styles";

const Winner = ({ img }) => {
  return (
    <div>
      <h1>!! Winner !!</h1>
      <WinnerCard src={img} />
    </div>
  );
};

export default Winner;

Styled components

for the ScoreCard component and the Winner component I have created the following styles using styled components:

//ScoreCard
import styled from "styled-components";

export const CardWrapper = styled.div`
  display: flex;
  flex-direction: column;
  text-align: center;
`;

export const Score = styled.div`
  display: flex;
  font-size: 8rem;
  justify-content: center;
`;

export const Teams = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 3rem;
  font-weight: bold;
  gap: 1rem;
  padding: 15px;
  border-bottom: 10px double black;
`;

export const TeamLogo = styled.img`
  width: 200px;
  height: 115px;
  border-radius: 15px;
  padding: 10px;
  border: 10px double black;
`;

export const Winner = styled.div`
  display: flex;
  flex-direction: column;
`;

//Winner

import styled from "styled-components";

export const WinnerCard = styled.img`
  width: 200px;
  height: 115px;
  padding: 10px;
  border: 5px double black;
  border-image: linear-gradient(to top right, #a67c00 10%, #fabf00 90%) 1 round;
`;

these you can import into your file with named exports from './styles' like so

//ScoreCard
import { CardWrapper, Score, Teams, TeamLogo } from "./styles";

//Winner
import { WinnerCard } from "./styles";

Extra Curricular

for those of you interested in the power of styled components I have added a styled component that I have used on my App.js to set the layout for the page


import styled from "styled-components";

export const Direction = styled.div`
  ${({ direction }) => {
    return direction === "row"
      ? `{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  margin: auto 0;
  overflow: scroll;
  max-width: 100vw;
}`
      : `{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1rem;
  overflow: scroll;
}`;
  }}
`;

this component takes in a direction, if that direction is 'row' then the first part of the ternary is used on our wrapper component to set all of our child components in a single row. If you decide not to use that but go for 'column' or anything else for that matter instead, the flow will be done in a grid layout that is responsive.

App.js

Below you will find my implementation of the ScoreCard in our App.js file.

import { Direction } from "./styles";
import ScoreCard from "./Components/ScoreCard";

function App() {
  return (
    <Direction direction="row">
      <ScoreCard />
    </Direction>
  );
}

export default App;

Thank You

I hope this helped make sense of setInterval, setTimeout, throttle and recursion. It was a lot of fun to build and if you guys have questions I would love to hear them from you.

Please leave a like ❤️, leave a comment 📃 or connect 👋 :

Github
Linkedin
Discord

Here is a link to the Github Repo: Sports App

Front End Interview Question

Luc van Kerkvoort — Thu, 14 Jul 2022 04:12:30 +0000

We as programmers lead a hard life. Especially when it comes to the interview process. There are many obstacles we have to face to get a new job, which is never fun to do.

I bet all of you reading this are excellent programmers, but a lot of us have a problem when we get put on the spot... performing under pressure is not our forte. This is why we didn't become olympic swimmers, or deep sea divers...

All jokes aside I think it is important for us to document the hoops we have to jump through to get a job. That is why I wrote this article about a take home assignment I once received from a company.

The Assignment

I received the following requirements

Create a button that once clicked showcases the current price of Bitcoin
After the button is clicked the buttons text changes from "get Bitcoin price" to "refresh Bitcoin price"
After the button is clicked it changes color from blue to purple
Once the button is clicked a field shows up with "Current price: " after a consecutive click a second field shows up with "Previous price: "

This was the entirety of the brief, the assignment had little to no restrictions to it. You can use libraries however you like them. You can use outside sources to fill in the code and you have 1 hour to complete it.

The Approach

I started thinking about how I wanted to structure the code keeping in mind best practices and going for a functional programming solution. In functional programming we break big problems down into modular solutions. This means we build functions that are reusable and pure

Logic

So I started dividing up the work and I came up with the following approach and pseudo code for the logic:

Button press

I'll use a useState to keep track of the button state.
This is also a value we can pass along to the button to change the color of it and use it to set the text for it

// Button press

const [isPressed, setPressed] = useState(false)

API call

I'll create a modular API call for the bitcoin call with a try catch statement which will return an empty array so the page will still load even if the call fails.

// API call

const getBitcoin = async() => {
 try{
      fetch(url)
    } catch {
      return []
    }

}

Setting Amount

thinking about this we need a data structure to keep track of the bitcoin prices. In my mind the best approach would be a Queue where a price comes in and we display it as current, then a second price comes in and current becomes the new price and the old price becomes the previous price and so on and so forth

// setting amount

const [bitcoinPrices, setPrice] = useState([])

const setAmount = (data = {}) => {
  const newPrices = [data, ...bitcoinPrices].slice(2)
  setPrice(newPrices)
}

These will guide me into creating the application.

User Interface

Now We'll have to build out the UI for this application. Let me add that the UI looks kind of funky because there were no restrictions to what the UI looks like, this was purely a showcase of logic skills

  <div className="App">
      <button>
        {isPressed ? "refresh Bitcoin price" : "get Bitcoin price"}
      </button>
      <div>
        <div>
          {bitcoinPrice.map((value, i) => (
            <div key={i}>
              {i === 0 ? "Current price: " : "Previous price: "} {value}
            </div>
          ))}
        </div>
      </div>
    </div>

as you can see I put in a ternary changing the text of the button from "get Bitcoin price" to "refresh Bitcoin price".

I am mapping the bitcoinPrice (state variable) to set the value. I'm using a ternary to decide the text in front of the value. If it is the index of 0 we set it to "Current Price" otherwise we set it to "Previous Price"

Extra curricular points

In this challenge I had to build it on my own machine while the interviewer was watching. I created a new React project using npx create-react-app. I got prompted the question why I used create-react-app.

These kind of questions are a great tool to share your knowledge. It is extra curricular points to know the answers to these kind of questions, so if you don't that is okay but here is an acceptable answer to the question

create-react-app is a package that presets an entire React application which installs babel which is a compiler used to parse JSX code to plain ES5 JavaScript, it installs webpack a bundler and presets it to bundle the application, installs React and presets the Virtual DOM, sets up testing with React testing library, so right out of the box we can start coding away.

The other good thing about it is that you can install and talk at the same time. Hopefully by the time you are done talking the installation will be complete.

The Execution

Under the watchful eye from my interviewer I started building out the application. first a draft version to get things started:


function App() {
const [isPressed, setPressed] = useState(false)
const [bitcoinPrice, setBitcoinPrice] = useState([])

const getBitcoin = async() => {
     try {
    const call = await fetch("https://api.coinbase.com/v2/prices/BTC-USD/buy", {
      method: "GET",
      authorization:
        "Bearer abd90df5f27a7b170cd775abf89d632b350b7c1c9d53e08b340cd9832ce52c2c",
    });
    const response = await call.json();

    return await response;
  } catch {
    return [];
  }
};

const setAmount = () => {
 const data = await getBitcoin()

  if(!data) return

console.log(data) 
// {"data":{"base":"BTC","currency":"USD","amount":"19891.09"}}

const {data: { amount }} = data

// New amount is pushed in front of the old amounts that have been deconstructed. 
// We then slice the array at 2 so we get rid of any old data we don't want to use anymore
const newPrices = [amount, ...bitcoinPrice].slice(2)

setBitcoinPrice(newPrices)

}



return(
  <div className="App">
      <button onClick={() => {
if(!isPressed) setPressed(true)
setAmount()
>
        {isPressed ? "refresh Bitcoin price" : "get Bitcoin price"}
      </button>
      <div>
        <div>
          {bitcoinPrice.map((value, i) => (
            <div key={i}>
              {i === 0 ? "Current price: " : "Previous price: "} {value}
            </div>
          ))}
        </div>
      </div>
    </div>
)

}

export default App

Here I build the draft for the application. I felt like it is a lot of code on a single page but it was executing everything I needed for the logic, however on the User Interfaces the button wasn't changing color yet, so we had to tackle that with a library.

I asked the interviewer if I'm allowed to install libraries. He said yes, but you would have to explain the use case of the library.

I decided I wanted to implement styled-components, as a CSS library that allows me to send and use JavaScript right into my CSS. This is extremely handy if you have to set colors on elements using a ternary operator.

Styles

I created the following css file to style the Button and implemented the ternary operator to change the background color to purple after the button has been pressed, I also found that the list items were horizontally aligning to each other so I decided to use flexbox to fix that issue as you can see in the List component

import styled from "styled-components";

export const Button = styled.button`
  background-color: ${({ isPressed }) => (isPressed ? "blue" : "purple")};
`;

export const List = styled.div`
  display: flex;
  flex-direction: column;
`;

with that out of the way I imported the components into the main file and I implemented the new styled components as shown below:

return(
  <div className="App">
      <Button isPressed={isPressed} onClick={() => {
if(!isPressed) setPressed(true)
setAmount()
>
        {isPressed ? "refresh Bitcoin price" : "get Bitcoin price"}
      </Button>
      <div>
        <List>
          {bitcoinPrice.map((value, i) => (
            <div key={i}>
              {i === 0 ? "Current price: " : "Previous price: "} {value}
            </div>
          ))}
        </List>
      </div>
    </div>
)

Now I was happy about the styling and I could move forward with optimization of my code

Optimization

During the interview I started thinking whether my code was written with the best practices when it comes to writing functional programming. I did see a flaw in my setAmount function

const setAmount = () => {
 const data = await getBitcoin()

  if(!data) return

console.log(data) 
// {"data":{"base":"BTC","currency":"USD","amount":"19891.09"}}

const {data: { amount }} = data

// New amount is pushed in front of the old amounts that have been deconstructed. 
// We then slice the array at 2 so we get rid of any old data we don't want to use anymore
const newPrices = [amount, ...bitcoinPrice].slice(2)

setBitcoinPrice(newPrices)

}

this function is not a pure function... Meaning with the same input we do not always receive the same output. It should also not be modifying any outside variables or have functions as children. I felt like this could be optimized by using composition

Composition or Piping

composing functions means we have a higher order function that executes a multitude of functions on a singular input. Meaning we give parameters to a function that then executes multiple functions in sequence utilizing the parameters, reading from right to left. e.g.

const purchaseItem = compose( 
  subtractFunds,
  emptyBasket, 
  moveToPurchase,  
  putInBasket)({name: "Laptop", price: 15})

Piping is the same concept but then the other way around. Instead of right to left we go left to right

const purchaseItem = pipe( 
   putInBasket,
  moveToPurchase,  
  emptyBasket, 
subtractFunds,
 )({name: "Laptop", price: 15})

I found a great solution to compose asynchronously. What this means is that I have created a compose function which takes in promises and converts those into actual data

export const compose =
  (...functions) =>
  (input) =>
    functions.reduceRight(
      (chain, func) => chain.then(func),
      Promise.resolve(input)
    );

These powerful few lines create a composition HOF (higher order function) that resolves promises

First function
we give it x amount of functions in the first function of the chain, which we use a spread operator on. so we can have any amount of functions.

Second function
we take input in a second function, so we can curry the input on to the functions as seen in the example above.

Third function
this is what the actual function returns, it is a reducer that takes in chain and function. the chain is used to create a resolve for the functions, and resolves the given input through these chains.

I know right... take a breather after this one.

The Solution

The solution comes down to a couple of core concepts being applied to a core problem, as stated we had the following requirements:

Create a button that once clicked showcases the current price of Bitcoin
After the button is clicked the buttons text changes from "get Bitcoin price" to "refresh Bitcoin price"
After the button is clicked it changes color from blue to purple
Once the button is clicked a field shows up with "Current price: " after a consecutive click a second field shows up with "Previous price: "

The following paradigms are used to solve the issue:

modularization
functional programming
composing

here is a snapshot of the architecture implemented for this solution

The following files are highlighted:

App.js - this stores the application
styles.js - this is holds our styled-components
/utils - folder with utility functions, in this case the compose function
/API - folder with API calls, in this case the bitcoin api

The reason I chose this file structure is that it gives room for growth, utility functions are really used a lot, storing these in an easy to reach folder is beneficial to a team working on an application. Setting up webpack to import from the /src folder is even better because these folders will be accessible anywhere instead of having the write relative paths.

let's take a close look at App.js

import React, { useState } from "react";
import { getBitcoin } from "./API";
import { compose } from "./utils";
import { Button, List } from "./styles";
import "./App.css";

function App() {
  const [hasBeenPressed, setPressed] = useState(false);
  const [bitcoinPrice, setBitcoinPrice] = useState([]);

  const storeAmount = ({ data }) => {
    if (!data) return;

    const { amount } = data;

    const bitcoinPrices = [amount, ...bitcoinPrice].slice(2);

    setBitcoinPrice(bitcoinPrices);
  };

  const bitcoinCall = compose(storeAmount, getBitcoin);

  return (
    <div className="App">
      <Button
        isPressed={hasBeenPressed}
        onClick={() => {
          if (!hasBeenPressed) setPressed(true);
          bitcoinCall();
        }}
      >
        {hasBeenPressed ? "refresh Bitcoin price" : "get Bitcoin price"}
      </Button>
      <div>
        <List>
          {bitcoinPrice.map((value, i) => (
            <div key={i}>
              {i === 0 ? "Current price: " : "Previous price: "} {value}
            </div>
          ))}
        </List>
      </div>
    </div>
  );
}

export default App;

as you can see I modularized some of the code, for example we are now importing the compose function as well as the API call for bitcoin, since the bitcoin API call returns a promise we use our special compose function to resolve that promise and pass on the data to the setAmount function.

  const [bitcoinPrice, setBitcoinPrice] = useState([]);

  const storeAmount = ({ data }) => {
    if (!data) return;

    const { amount } = data;

    const bitcoinPrices = [amount, ...bitcoinPrice].slice(2);

    setBitcoinPrice(bitcoinPrices);
  };

  const bitcoinCall = compose(storeAmount, getBitcoin);

As you can see I utilized the styled components to create the button and the list components

Button component

<Button
        isPressed={hasBeenPressed}
        onClick={() => {
          if (!hasBeenPressed) setPressed(true);
          bitcoinCall();
        }}
      >
        {hasBeenPressed ? "refresh Bitcoin price" : "get Bitcoin price"}
      </Button>

as you can see I'm passing on the hasBeenPressed to Button component, which is used in the styled component to change the background.I'm also using it to set the text utilizing a ternary operator.

List component


 <List>
          {bitcoinPrice.map((value, i) => (
            <div key={i}>
              {i === 0 ? "Current price: " : "Previous price: "} {value}
            </div>
          ))}
        </List>

List is used for styling purposes only, making sure the div's are centered and in a column direction.

Helpers

I always like to create folders for my helper functions so it is structured and easily maintainable. These are the folders I created and I usually use the index.js format because these are easily accessible.

/utils


export const compose =
  (...functions) =>
  (input) =>
    functions.reduceRight(
      (chain, func) => chain.then(func),
      Promise.resolve(input)
    );

/API


export const getBitcoin = async () => {
  try {
    const call = await fetch("https://api.coinbase.com/v2/prices/BTC-USD/buy", {
      method: "GET",
      authorization:
        "Bearer abd90df5f27a7b170cd775abf89d632b350b7c1c9d53e08b340cd9832ce52c2c",
    });
    const response = await call.json();

    return await response;
  } catch {
    return [];
  }
};

named exports are easy to import again as well, it also separates the different functions instead of exporting default and having a load of different files.

Thank you

Thank you so much for reading this tutorial, I hope it has given you an insight into how to approach a problem like this.

I know this is an opinionated way of writing code but I believe that if you have a foundation that you are following and a good explanation to why you do the things you do, you are an excellent programmer.

if you want to connect you can do so here:

Github
Linkedin

Responsive Store React

Luc van Kerkvoort — Mon, 13 Jun 2022 16:02:55 +0000

Hi Everyone,

I've been programming for a couple of years and I have had to build multiple web stores for freelance clients that wanted something easy to maintain.

It got me to thinking... why not create a library that can speed up the process and help my fellow devs develop web stores faster.

Therefore I have created the npm package responsive-react-store which can be found here.

This will be a tutorial on how to use this package.

Prerequisites

To be able to use this package you will need the following tools and skills

Basic knowledge of React
React ^16
Node ^14
NPM ^6

Responsive React Store

This library is an open source project that I started a couple weeks ago. It is a library that takes care of creating a storefront for developers that is easy to use and integratabtle with a long list of tools.

Now.. let's get started with the Responsive React Store. You can install the package by running npm install responsive-react-store@latest. After installation you will have access to both the store as well as the cart component.

Below you will find the easiest setup for the store that you can use

import React,  from 'react'

import Store, { Cart } from 'responsive-store-react'

const MyStore = () =>  ( 
<div>
  <Cart>
   <Store inventory={[]} />
  </Cart>
</div>
)

The important part here is the Cart which is using the context API for state management of the cart. It also utilizes localStorage to keep track of the cart during sessions.

The Cart component should wrap the Store component so it has access to the cart from inside. The store doesn't work without wrapping it in a cart component. You can add multiple stores to a single cart so you can differentiate between categories or product groups.

The div on the outside is used because we need an element with a position:relative to keep the cart from drawing outside the lines. Seeing the cart uses position: absolute and is positioned in the top left corner we want to wrap it in a parent component to keep it from overlaying other components on your page, e.g a navbar.

The Store component has a property named inventory. This is an array of objects that the store creates items out of. The objects should hold the following properties:

price (integer)
title (string)
img (string)

The Store

In the image below you can see the store as rendered with some example data

The store comes equipped with buttons on the top right side that set the direction of the store to either a single row or a grid that is responsive to every screen size.

the top left button is the cart component that you can fill by pressing the button on the bottom right on any item.

The store has the following properties that it is looking for.

inventory
dir
showDirection
height

Inventory

inventory is an array of objects filled with title, price and img. This will propagate the store with your items

Dir

dir is setting a direction for the store, there are two possible values 'column' or 'row'

showDirection

The default setting is true which gives us the buttons on the top right. if you want to hide the buttons you can give it a value of false

Height

the height property which takes in an integer which will set the height of the store in rem. The minimum is 25rem

Multiple Stores

You can also have a page with multiple stores still wrapped in the same Cart component. This way you can separate out the products by category or product group.

const MyMulipleStores = () =>  ( 
<div>
  <Cart>
   <h1> Sport Goods </h1>
   <Store inventory={[]} />
   <h1> Electronics </h1>
   <Store inventory={[]} />
   <h1> Miscellaneous </h1>
   <Store inventory={[]} />
  </Cart>
</div>
)

The Cart will keep track of all the stores that are its children. This way once you get your array of items from a database you can slice them into their own categories and provide those to the stores.

Cart

The cart uses localStorage to store items added to the cart. It also has a checkout button that doesn't do anything out but console log the cart out of the box. However you can pass a function to it which will override the console log. This can be a stripe function or any other platform you would like.

more to come on this in the following weeks..

That's not all folks

I hope this initial post is helpful in getting you started. As I mentioned this is an open source project which you can contribute to as well. below you can find resources on how to do this.

I will be posting more about this library in the following weeks with tutorials on integration with FireBase

github
discord
trello

React Tic Tac Toe Tutorial

Luc van Kerkvoort — Tue, 28 Apr 2020 06:26:14 +0000

Tic Tac Toe React

I created a Tic Tac Toe application in React. I think its perfect for starters who have little to no knowledge of React, but know their way around JavaScript.

Its a fun exercise and it teaches you to think about simple functions and how they convert into code.

Setup

If you have never used React before I'm going to take you through a quick crash course to get you setup. Its fairly straight forward and luckily their is a lot of documentation on it on the interwebs. You are going to need 3 things. These things being:

Node.js - a backend framework for JavaScript
NPM - A package management tool for Node.js
Create-react-app - a bundle that will install a React application right on your PC

For the sake of keeping this article a little shorter, here is an article that will take you through the entire installation process.

https://www.liquidweb.com/kb/install-react-js-windows/

Tic Tac Toe

After running create-react-app in your terminal and seeing "happy hacking" we will start off with getting React cleaned up a little bit. It comes with a whole lot of build in stuff that we don't need for the purposes of this article.

We can start with removing the following files from our src/ folder. These are very useful when you are building bigger and more robust applications, but not necessary for tic tac toe.

Next we are going to create the file structure needed to create the application. As seen in the picture below we will be creating a components folder. This you can create inside of your code editor or inside of your terminal. Whatever works best for you. As a cheat sheet, you can create a new folder in git using mkdir <name of the folder>.

Then we will start adding all of our components as listed below:

Board
Endgame
Game
Login
Navbar

Create all of the different JavaScript files and put them in the components folder. These components will become JavaScript classes. Because React utilizes Object Oriented Programming or OOP for short, most of its code will be written in classes.

Login

I wanted to create an opportunity for people to add their name to the page whenever they are playing together. I created a Modal with a form on it so users can add their names their.

If this is your first time using React you might be a little shocked by the syntax being used here. It kinda looks like a combination of HTML and JavaScript all mingled together.

That's kind of true, but not all the way. Its called JSX and its React's on language that processes HTML as JavaScript.

I've build a div that functions as a wrapper that basically is fixed in place and just uses an opaque color filter using rgba to function as my modal background.

here you can see the CSS for it. I used flexbox to center the children elements inside of the background. Its very easy to use and my preferred way to center items in CSS. the commands are as follows display: flex , jusitfy-content: center , align-items: center.

justify-content puts it in the center of the horizontal axis of the parent element while aling-items will center it on the vertical axis of the parent element.

Then I build the login window that basically just has a simple form and submit button. I used Bootstrap to style this part.

Now down to the functionality of the page. As you saw earlier the button and input fields had a function associated with it. On the input field it was onChange with a function of this.handleChange and the button had a onClick with a this.handleClick function. These are event handlers.

The handleChange function will keep track of the input given into the input field and saves it to the state. State is an object that we can use to store temporary data.

If you want to know more about React state check out this article
https://reactjs.org/docs/state-and-lifecycle.html

The handleClick function just grabs the information inside the state and sends it over to the next component. This is how we save and use the names given to the players.

Endgame

The Endgame component is a class very similar to the Login component. When the game ends it will show up as a Modal and show the victor of the game, or a tie whenever that happens in Tic Tac Toe.

As you can see I'm reusing some of the classNames in this file.
The wrapper and screen from the Login were reused for this component. This way I keep my code a lot cleaner and my application faster.

The state inside of endgame has a this.props.winner in it. This.props was also used inside the Login component. You might be wondering what this.props is.

It stands for properties. It is a piece of data shared down from a parent component. Whenever we import a component inside of our functions or components we can invoke it and give it properties. Which we can access and manipulate in the component. In this case the winner is being passed down from the App.js, and we send up a message saying to close the endgame modal to the App.js with this.props.endgame

Navbar

The Navbar component is basically accumulating all the info for the game.
Its gathering all the info from App.js.

I used some nice ES6 syntax to deconstruct the this.props. This way we can use the names without having to put this.props in front of every single one of them, making are code that much DRYer.

I've added the CSS code for the Navbar above. I used flexbox to position my elements the way I want to. It has some cool build in features like space-evenly or space-between. Its something to really play around with, which you can actually do right here.

https://flexboxfroggy.com/

Game

The Game component holds some of the game logic and functions as a wrapper for the Board.

The logic keeps track of the players turn, it switches the players and send the score over to the App.js

I also added the CSS for this component below.

Board

This is the main logic of the game. I will break everything down for you in different sections.

The first part is the generating of the different tiles of the game. I decided that the easiest way to create the tiles was to utilize JavaScript's build in functionality, Map. Map is used a lot in React to generate elements from an array. I decided to use a for loop to create nine different tiles with the classNames passed into them.

The handleClick method sets off the game, it takes in the current player and sets either an X or an O inside of the tile that was clicked. This is done with a nested function called play

As explained in the top part this function checks the player and then sets an X or an O in the tile. it will also remove className so that when we click it again it doesn't add another X or O to the tile. After adding either the X or O this function will also check the diagonals, columns and rows to see if their is a winner.

Using the Map functionality I gave all the tiles an id so I could seperate them more easily. Now I'm checking left diagonal and right diagonal whether they are all O or X.

Basically the same logic as the diagonal except now I'm taking in the rows

Basically the same logic as the rows except now I'm taking in the columns

I created a Reset function that resets all of the game scores when somebody has won or the game is tied. The return statement underneath pops out the map functionality on generateTiles.

The CSS for this page I did with the use of the different id's of the tiles and giving them borders. Sizing them up to their container so they would be squished together nice and neat.

App.js

Now for the final part of this application. I turned the App.js function into a class. The reason being is that I want it to be able to transfer data to all the different parts of the application.

First we start with importing all the different components, so we can render them and send them the needed information.

The state will hold the names of the players and the player scores. It also has a boolean on whether or not to show the login or endgame component.

The handleScore sets the winner for the endgame component so that we see the correct winner. It gets send over the information from the Board component using props.

The handleName function sets the names put into the form at the Login component into state, which is shared with Navbar so it can show the correct names. By default they are set to Player 1 and Player 2.

the handleEndGame function sets the endgame boolean to true or false depending if we want to show it (after the game) or not show it (after clicking "go again" on the endgame component).

The render function deconstructs the state. That way its less writing inside the return function

I've build a ternary statement for the endgame and login functionality, meaning that they will only show if the state boolean is set to true.
We render the Navbar and pass all the info to it.
The same goes for the Game component.

Afterword

I hope this tutorial will help you build your portfolio and teaches you how to create react applications.

I have mine deployed on heroku which you can check out here:
http://lucstictactoe.herokuapp.com/

If you like this article, please leave a comment.
If you ever want to build something together with me, leave me a comment and we can connect.

Hope you enjoyed reading this, because I enjoyed writing it for you.

React Memory Game

Luc van Kerkvoort — Fri, 10 Apr 2020 20:55:50 +0000

I created a memory game in React.js which is a perfect starting point for beginner React developers. It shows off that you understand basic knowledge and that you can work through problems by visualizing the solution. The reason why it is a great starting point for aspiring developers is because everyone knows how the game works. Therefore figuring out the logic is just going through the game yourself.

To do so you can grab a deck of cards and filter out any two identical numbers/symbols until you have a deck of twelve. You put them out and you start playing, writing down the actions you do every time.

Setting Up

For building a React app we will need to have Node.js installed and NPM package manager. To do so you can follow the following link
https://www.codecademy.com/articles/react-setup-i

To create a react app you will need to use npx create-react-app inside of your terminal. Wait until it is done installing and you receive the message "Happy Hacking".

When this has been completed you cd into the react app you just created and open it in your text editor. I use VSCode for this which means I type in the command "code .". After the text editor has opened you run your react application by typing the command "npm start" into your terminal.

Getting Started

To create the basics of your memory game we will need to build a components folder inside our src folder. You can do so by using the terminal or your code editor. Inside the components folder I have created all my components for the game as shown in the picture below

Components

To give you a better overview of what every component does I have given a break down below.

Main
the main component serves all the components of the game to App.js.
The reason I didn't use App.js for this is that App.js is a functional component, and I have created Main to be a class component, therefore it can have a state, multiple functions and serve all the components at the same time.
Game
The game component is a layout for the game part of the application, the component doesn't do more then serve the images and holds the styling of the center of the game.
Login
Login is a component that holds a prompt at the start of the game where people can input there names
Navbar
Like the name suggests this is the navbar of the application that holds the name of the game, the persons input name from the login and there score
EndGame
This is a component for when somebody finishes the game, it shows a prompt with a cute message and a button to restart the game.
Images
This holds the main logic of the game. It has the logic for the sorting of the pictures at the start of the game and all the click events for the cards build into it.
messages
This is a small javascript file with an array of objects of different messages for the EndGame component

Main

In the main component we will be importing the following components:

Game.js
Login.js
Endgame.js
Navbar.js

I've used the state to show off components such as the login and the endgame. Then using ternary statements to show the components in the file
Using the function handleLogin and handleEndgame to show the components and set some variables such as the score and the username.

inside the components there are properties or props if you will serving data from the main page to the underlying components.

In the login component I'm using the property name of "name" to serve the handleLogin function to the Login component.

the same goes for the other components where I'm using either the state information, which I have deconstructed using es6 syntax, or other functions such as the handleEndGame function.

Login

The Login page is a very simple page with some Bootstrap build in.
Twitter Bootstrap is a framework which Twitter build to create easy working layouts that has mobile responsiveness build into them.

I will not go into to much detail on it but if you are interested in it you can check it out at https://getbootstrap.com/.

I have build a function to keep track of the changes inside the input field and utilizing the state, storing the information. The submit function takes set information and using the props functionality sends it over to Main.js.

Inside Main.js it gets stored in the state. That state then sends over the name to the Navbar.js file using the props and displays it on the screen.

Game & Images

This is where the fun part starts.
Here we are going to build the logic to the actual game.

As explained before the Game component will just serve as a layout and server of the images so I won't go into that.
The images part however is much more interesting and holds all the logic to the game.

When I thought about a game of memory I saw any amount of cards with their back facing upwards. Underneath there are pairs of cards, so I set out to create the cards, finding 6 different images that can be duplicated to form 12 cards or 6 pairs. The images I saved in their own folder named Images with a javascript file that exports the images in an array structure.

I created the layout for it using flexbox and the size I saw fit for the playing field, which in this case have a height of 450 px and a width of 570 px. every image inside of it has a height and width of 120 px with a margin of 10px. Therefore it can only fit 4 images in a row. flexbox then breaks those up automatically by using the wrap functionality, it will start a new line whenever the max width of the parent has been reached.

Now that I had the main layout for the game I needed to put the cards into place in a random position (you don't want them all next to each other). The easiest way I thought of doing this is by importing the images from the JavaScript file in the Images folder, which has all the images stored in an array, and then using JavaScript's build in method of map to create a new card from every image that we used.

Before using the map method, I wanted to randomize the position of all the cards so every time the game starts over, the cards will have a new random position. This has been done with the sort method, applying Math.random to it with an adjustment of 0.5.

Afterwards I created a className called "image-blank" which would be the backside of the card. It had a generic image and it would show at the start of the game. The class will then be removed whenever we click on the image so it will show the cards image instead of the back of it.

Now we come down to the nitty and gritty of the application. The actual logic of the game itself as shown below.

So when I thought of the game memory and what data structure to use it became evident that the most choices a memory game will hold at the same time is 2 and that an array is a good data structure to store these in because its fast for this application.

I started of by creating an on click functionality where I would store the entire div of the card at hand into the array. Then I would remove the className of "image-blank" to show the card's image and store it into the array. The removal of the class "image-blank" is being done by my switch functionality as shown below. I added a "check" value to every div so that I can know whether it has been flipped, has a pair, or has not been flipped. If the same imaged is clicked again then it would turn around again, that is what the else part of the if else statement does.

if I then click on an another card, that one should open too and if its the same card as the first one then they should stay face up by setting the "check" value to "found" which I tackle at the start of the handleClick function, if not they should both face down again and be removed from the array, that is what the checkName functionality does.

if all the pictures are flipped and have no className of "image-blank" then the game finishes and we sent the true boolean up to main using the props.

End Game

The End Game component is pretty much the same as the login component, it doesn't have an input form but the shape and size are similar and it has a button. The difference is that it uses the same functionality as the game logic to get a random message from the messages file as shown below.

Well.. That's the end of this article. I hope you have a blast creating this game as much as I did. If you have any questions you can always leave a comment, I'll be sure to answer you in a timely fashion.

If you want to check out the end result of my game go to https://rocky-falls-03487.herokuapp.com/

If you get stuck and don't know how to get further, just check out my github repository at https://github.com/lucvankerkvoort/memory/tree/master/memory-game

Thank you!

With kind regards,

Luc van Kerkvoort