DEV Community: Agbanusi John

FreeCodeCamp project 5 - Tic Tac Toe

Agbanusi John — Tue, 18 Aug 2020 21:04:46 +0000

Now we will talk about the fifth project and how to go about it.
We're trying to build a tic-tac-toe game.

Project: TIC TAC TOE,
Time taken: 48+ hours,
Difficulty: Intermediate.
The link to the take home project is here.

Tic-Tac-Toe is basically a two man game where you try to beat your opponent by matching three boxes out of the nine provided boxes and the other tries to block your move while trying to beat you too.

This is one of the possibilities of the game as shown below:

So let's get started!
First I'll say we're using React.js to build our game, for this tutorial we'll use the inline html embedded library.

Your html page may look like this:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"> 
        </div>
        <script src="index.js"></script>
    </body>
</html>

You can get the embedded inline React from here

So let's move on to our index.js,

class Main extends React.Component{
  constructor(props){
    super(props);

  }
  render(){
   return(
    <div></div>
   )
  }
}

This would be our main function, but before we get to the game, we might need to welcome our viewers and also give our viewers a choice of playing X or O and maybe if they want to play with a second member or with computer. So we would design three pages in which the previous one will determine the outcome of the next page.

I'll start with the first welcome page which should just show a simple welcome and giving the user the option to choose one player that is vs computer or two players.

The first component will be named Main1 for ease and would need to determine the properties of the next page. There are many ways to do this, we could pass a props to the next component and use react router, if we're using multiple pages. Another is the manipulation of states of external components, which we would use in this article.

But first let's define some variables we would be using,

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

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

The first constant shows all possible winning combos in the tic-tac-toe game. The second constant is just a referral for the number of grids we have to fill.

Back to the our first welcome component Main1:

class Main1 extends React.Component{
  constructor(props){
    super(props);
    this.doubleUpdate=this.doubleUpdate.bind(this)
  }
  doubleUpdate(num){
    num==1? update('type',true):update('type',false)
    update1(num)
    update2(1)
  }
  render(){
    return(
      <div className='first'>
      <h1>Welcome! </h1>
      <h3> How do you want to play?</h3>
      <div>
      <button className='ch' onClick={()=>this.doubleUpdate(1)}>One Player</button>
      <button className='ch' onClick={()=>this.doubleUpdate(2)}>Two Players</button>
      </div>
      </div>
    )
  }
}

According to the component above, we have two buttons to determine what our next page will render. The function that determines that is the doubleUpdate function, what it does is it changes two states, the state of the main component to trigger it to render the next component after clicking, and also the state of the next rendered component, to determine what it would render to the user. As we see, one player ie. vs computer puts a num 1 as the argument to the function doubleUpdate, the other puts 2.You can decide your own props maybe true or false or anything else, just two things to distinguish which button triggered the click.

The doubleUpdate function uses the number to manipulate the update function to change the state of type in the Main3 component to either true or false. As we noticed, the update function isn't bound to Main1 component, it would be bound to the component to be manipulated. Also another function is called (update2) to change the state of the Main component. Also we want to change the state of Main2, by using update1 function.

So next, we want the player1 to choose between X or O, if they chose two players or allow the solo user to also choose between X or O.

function update1(text){
  this.setState({players:text})
}
class Main2 extends React.Component{
  constructor(props){
    super(props);
    this.state={
      players:1
    }
    this.back=this.back.bind(this)
    update1=update1.bind(this)
    this.double=this.double.bind(this)
  }
  back(){
    update2(0)
  }
  double(txt){
    update('player1',txt);
    update2(2)
  }
  render(){
    if (this.state.players==1){
      var text='Would you like to be X or O?'
    }
    else{
      var text='Player1: Would you like to be X or O?'
    }
    return(
      <div className='second'>
      <h3>{text}</h3>
      <div>
      <button className='bound' onClick={()=>this.double('X')}>X</button>
      <button className='bound' onClick={()=>this.double('O')}>O</button>
      </div>
      <button onClick={this.back}>Back</button>
      </div>
    );
  }
}

As we see above the update1 function is bound to the Main2 component and used to change the state of Main2. We also created a back function button click to return us to the homepage. The choice of the player is sent to the update function to tell component Main3 as we recall, to use this choice to render a customized page for the user. Also the update2 function as we recall is used to change the Main component which would be rendered to the page. the back function also uses this update2 function to change the state to the previous value thereby rendering the previous page.

So next is the main class that does the bulk of the work,

var turn=false
function update(player,text){
  this.setState({[player]:text})
}
var state={
      0:'',1:'',2:'',3:'',4:'',
      5:'',6:'',7:'',8:'',play:true,
      player1:'',player2:'',text:'',
      comp:'',score1:0,score2:0,type:true,
      array1:[],array2:[],array:[[],[]] 
    }
class Main3 extends React.Component {
  constructor(props){
    super(props);
    this.state={
      0:'',1:'',2:'',3:'',4:'',
      5:'',6:'',7:'',8:'',play:true,
      player1:'',player2:'',text:'',
      comp:'',score1:0,score2:0,type:true,
      array1:[],array2:[],array:[[],[]] 
    }
}
}

Now, I have a habit of keeping a parallel record of the state object when the number of values in the object exceed ten, this helps me reference easily and help me in debugging, normally after all, you should clear it and only use the state object defined in the class but for clarity we'll use it, you can also name the outside object anything, but I called mine state.

Next let's add the render and return,

  render() {
    return (
      <div className='gamer'>
      <div className='text'>{this.state.text}</div>
      <div className='score'><div>Player1- {this.state.score1}</div> <div>{this.state.type? 'Computer-'+ this.state.score2: 'Player2-'+ this.state.score2}</div></div>
      <div className='game'>
      {p.map((i,j)=>{
      return <div className='tile' key={j} id={j} onClick={this.play}>{this.state[j]}</div>
      })}
      </div>
      </div>
    );
  }

So, what do we have here, the gamer div is the cover div, the text div, tells if it's a win for you or the other person or a draw, we should notice it's initial value is an empty string. The next is the score div that keeps the total score for us. The game div which is next is forms the boxes on which a person can play, 'p' was defined earlier as an array of numbers 0-8, we map p and create a div each with an onclick listener, we put a function play and the content is the text of the corresponding state.

This means that if we click on box 1 and we are player 'X', the state is changed in the play function and it reflects by the box content changing from empty to 'X'. But that's not only what the play function does.

So let's see how the play function looks like,

play(e){
    let board=p.map((j,ind)=>state[ind])
    let arr=this.state.array
    state.text=''
    state.player1=this.state.player1
    state.player2=this.state.player1=='X'?'O':'X'
    if(board[e.target.id]==''){
      if(this.state.type && state.play==true){
          this.change(e)
          this.win()
          this.tie()
          if(!this.win() && !this.tie()){
            let max=this.ai(e)
            this.change(e,max)
            this.win()
            this.tie()
          }
      }
      else{
        this.change(e)
        this.win()
        this.tie()

      }
    }
  }

Okay, so I'm just going to declare that I'll be using an outside object named state due to ease and explanation but I'll advise you use the this.state object, but sometimes I'll reference the this.state objects is to get the type or to reflect the entire changes done to the outside state object in the this.state object.

So the board, a 9 valued array, initially containing empty strings. The array is an array of two arrays, one array will record the index of boxes clicked for user1, the second will do the same for the second user. This is to avoid playing twice in a box.

So remember you had a choice of X or O in the previous class Main2, so it updated the Main3 class player1 state, so player2 should be the other then, so we're updating the outside state object with the player1 and player2 choices.
The next is an if state that checks if the box is unchecked that is not clicked before, then checks if the player chose single or multiplayer and if single player if it's his turn, type equal to false is for multiplayer here and true for single player with computer, also play equals to true states it's your turn to play.

So let's assume we chose multiplayer, we only have three functions to run which are change, win and tie, these functions change the state of the boxes clicked, check for a win, check for a draw respectively.

So what do our change function, look like?

change(e,max){
    let ide=max || e.target.id
    var res
    let board=p.map((j,ind)=>state[ind])
    if(state[ide]===''){
      if(state.play===true){
        state[ide]=state.player1
        res= [[...state.array[0],Number(ide)],[...state.array[1]]]
        state.array1=state.array1.concat(Number(ide));state.array=res;state.play=!state.play
        this.setState({...state})
      }
      else{
        state[ide]=state.player2
        res= [[...this.state.array[0]],[...this.state.array[1],Number(ide)]]
        state.array2=state.array2.concat(Number(ide));state.array=res;state.play=!state.play; 
        this.setState({...state})
      }
    }
  }

So let's break down our change function, at first we gave a non compulsory max argument meaning if there is max fine, else use e.target.id.
We also defined a variable res which we would use later and also extracted all the boards values, filled or not into an array. We're dealing with the ide variable which is either max or the target id, it would first check for the value of max before assigning the event.target.id to the ide variable if it doesn't find a max variable.

Next we check again if the intended box is empty, this is to be double sure that all. Then we check if its our turn to play, true for player1 and false for player2 which could be your opponent or computer. Remember we're in multiplayer and it's our turn to play, what next is it would then fill that particular index(box) with the player's choice which could be X or O. Then the index filled is recorded for crosschecking later and also goes for the array1 of the object, then the play is switched from true to false to give chance for the other player.

Then we change the state of the application by applying all changes made to the state variable with setState. The same process happens for player2, but this time it will be array 2 that will change instead of array1.

Now let's check the win function;

win(){
    let arr=state.array
    for(let q=0;q<wincombos.length;q++){
          if(wincombos[q].every((j)=>arr[0].includes(j))){
             wincombos[q].map((i)=>{
              let to=document.getElementById(i)
              to.classList.add('win')
             })
             setTimeout(()=>{arr[0].map((i)=>{
                let too=document.getElementById(i)
                too.classList.remove('win')})
                },50)
                state.array1=[];state.array2=[];state.score1+=1;state.array=[[],[]];state.text='Player 1 won!';p.map((i,j)=>{state[j]=''})
              return true
              }
          else if(wincombos[q].every((j)=>arr[1].includes(j))){
              wincombos[q].map((i)=>{
                let to=document.getElementById(i)
               to.classList.add('win')
             })
             setTimeout(()=>{arr[1].map((i)=>{
                let too=document.getElementById(i)
                too.classList.remove('win')})
                },50)
                state.array1=[];state.array2=[];state.score2+=1;state.array=[[],[]];state.text=this.state.type?'Computer won!':'Player 2 won!';p.map((i,j)=>{state[j]=''})
              return true
              }
    }
    return false; 
  }

So basically the win function checks if there is a win using the total wincombos we defined before now above as an array of arrays, and check if every element in an wincombos inner array is in the state.array array inner array. Remember the state.array is also an array of array, containing the arrays of indexes played by the two players .

It checks for player one and two, and let's say player 1 won, it would have to indicate how you won by darkening the section that led to your win for a brief moment. So we attach a special class with the attributes described above but we just want it for a short while and not spoil or disfigure our board, so we set a delay of 50 milliseconds to remove it from the board by removing the special class we added before. Then after that we have to clear the board and reset everything, also we would have to indicate who won, so we set the text to player 1 won or player 2 won or computer won depending on the case. The return a true if we saw a winner or false if there isn't

 tie(){
    let board=p.map((j,ind)=>state[ind])
    if(board.filter(i=>i=='').length==0 && !this.win()){
        state.array1=[];state.array2=[];state.array=[[],[]];state.text='It was a draw!'
        p.map((i,j)=>{state[j]=''})
      return true
      }
      else{return false}
  }

The tie simply checks if the board is empty and the win function indicates no winner, then resets the board and tells us it's a draw.

Now with this, we could be done, just a little style and we're done but we want to also add a computer feature that is intelligent enough to know how to play.

Let's look at the function below:

ai(e){
    let board=p.map((j,ind)=>state[ind])
    let arr=state.array
    let m=state.player2
    let ini=[0,2,6,8];
    if(board.every((j)=>j=='')){
      return ini[Math.floor(Math.random()*4)]
    }
    else if(board.filter((j)=>j!='').length==1){
      if(board[4]==''){return 4}
      else{return this.minimax(e,board,arr,0,m).index}
    }
    else if(this.kick()){
      //console.log('done')
      return this.kick()
    }

    else{
      return this.minimax(e,board,arr,0,m).index
    }
  }

Now we'll assume computer will always take position player2. We want to implement a minimax algorithm but using it from scratch takes a lot of time and computing power because we're going to use a lot of recursions. Js Engines won't allow us go beyond 9999 recursions and there are 255168 possible combinations in the tic tac toe game. So we expect our computer to get all possible combinations and make an informed choice and do this all the time, which would take a lot of time, if the JS engine don't stop you first. So let's assume some initial positions for it at first and some special cases, so as to limit the times it uses the algorithm and combinations number.

So the first if statement indicates a random pick between an array of 0,2,6,8 which are the corner boxes if its the first to play that is no boxes are filled yet, it is known that the best first move to play is a corner box. Next time it's its turn it checks if the middle box 4 is filled, this will give it a ton of opportunities to move and win. Then the next is to check if you have an opportunity to win and block it or if it has a chance to win go for it with the kick function shown below. This do not need an algorithm to do this.

kick(){
    let board=p.map((j,ind)=>state[ind])
    for (let i=0;i<wincombos.length;i++){
      if((wincombos[i].filter(l=>board[l]==state.player2).length==2 || wincombos[i].filter(n=>board[n]==state.player1).length==2) && wincombos[i].filter(p=>board[p]=='').length>0){
        return wincombos[i].filter(pp=>board[pp]=='')[0]
      }
    }
    return false
  }

The kick function checks every wincombos array if two of it is already included in player1 or player 2 and return the remaining number then that will be the number it plays either as a block or a win. Then if all these conditions are met in the ai function, it resolves to minimax algorithm.

score(board, player,depth) {
   if (
     (board[0] == player && board[1] == player && board[2] == player) ||
     (board[3] == player && board[4] == player && board[5] == player) ||
     (board[6] == player && board[7] == player && board[8] == player) ||
     (board[0] == player && board[3] == player && board[6] == player) ||
     (board[1] == player && board[4] == player && board[7] == player) ||
     (board[2] == player && board[5] == player && board[8] == player) ||
     (board[0] == player && board[4] == player && board[8] == player) ||
     (board[2] == player && board[4] == player && board[6] == player)
     ) 
   {

     if(player=state.player2) { 
       return 10-depth;
     }
     else{ 
         return -10+depth;
       }
   }
   else if(board.filter(i=>i=='').length==0 ){return 0}
   else{return null}
  }
minimax(e,nboard,arr,depth,m){
    let max=state.player2
    let min=state.player1
    if(this.score(nboard,m,depth)!==null){return {score :this.score(nboard,m,depth)}}
    else{
    depth+=1
    let moves=[]
    let seed=[]
    for(let i=0;i<nboard.length;i++){if(nboard[i]==''){seed.push(i)}}
    for (let ii=0;ii<seed.length;ii++){
      let mboard=this.copy(nboard)
      var move={}
      move.index=seed[ii]
      mboard[seed[ii]]=m
      if (m==max){
        var res=this.minimax(e,mboard,arr,depth,min)
        move.score=res.score

      }
      else{
        var res=this.minimax(e,mboard,arr,depth,max)
        move.score=res.score
      }
      seed[ii]=move.index;
      moves.push(move)
    }
    var best
    if(m==min){
      var bestsc= -100000
      for(var k = 0; k < moves.length; k++){
        if(moves[k].score > bestsc){
          bestsc = moves[k].score;
          best = k;
        }
      }
    }
    else{
      var bestScore2 = 10000;
      for(var l = 0; l < moves.length; l++){
        if(moves[l].score < bestScore2){
          bestScore2 = moves[l].score;
          best = l;
        }
      }
    }
    return moves[best];
    }
  }
copy(board){
    return [...board]
  }

There are two main functions shown above the first one score checks if there is a win in either way and score the algorithm with either a positive for win or negative number for lose and 0 for draw or null if there is no win or loss or draw. So the minmax function first defines the max variable as player 2 which is computer, min as player1, then check if there is a score or not, if there is returns the score as an object.

Else it loops through the nboard that has been given as an argument of the function to get all remaining blanks that is unfilled spaces as seed and have been defined earlier. Then we loop through the seed, that is remaining blanks and copy the initial nboard to avoid mutation, then add an X or O to the seed and records the index in move. So if m which was added to the seed was the same as the choice of computer, the we do a recursion this time with m as the player1's choice. Then record the score gotten finally as score of passing that specific route. if not then the reverse is the case.

These recursions could lead to further recursions on and on until the total scores are finalized and start coming together. The move object is then added to an array with other moves and their scores which have a total max length of 9. Then we find the maximum of the scores if m is the computer's choice or minimum of the scores if reverse is the case, then return the best move object and this is collected by the ai which will use the index to match the box which will of course be unfilled and play there.

Finally,

function update2(no) {
    this.setState({st:no })
}
class Main extends React.Component {
  constructor(props){
    super(props);
    this.state={
      st:0
    }
    update2=update2.bind(this);
    this.two=this.two.bind(this)
  }
  two(){
    state={
      0:'',1:'',2:'',3:'',4:'',
      5:'',6:'',7:'',8:'',play:true,
      player1:'',player2:'',text:'',
      comp:'',score1:0,score2:0,type:true,
      array1:[],array2:[],array:[[],[]] 
    }
    update2(0)
  }
  render(){
    if(this.state.st==0){
      var one={display:'block'}
      var two={display: 'none'}
      var three={display :'none'}
    }
    else if(this.state.st==1){
      var two={display:'block'}
      var one={display: 'none'}
      var three={display :'none'}
    }
    else{
      var three={display:'block'}
      var two={display: 'none'}
      var one={display :'none'}
    }
    return(
    <div className='root'>
      <div className='reset' onClick={this.two}> Reset All</div>
      <div className='comp'>
      <div style={one}><Main1 /></div>
      <div style={two}><Main2 /></div>
      <div style={three}><Main3 /></div>
      </div>
    </div>
    )
  }
}


ReactDOM.render(<Main />, document.getElementById('root'));

So this is the main component that hold all other components , we recall the update2 function needed to change its state, we can see it binded to it. I used the display method to switch components, because of method I'm using the components to change other components and the main functions, if they don't render, the state will try to be changed and error will occur. Another way to do it is to use props and parentCallback or React.Context. Then it is rendered to the DOM.

There are many different approach to use and even minimax algorithm has a better and more efficient way to do. You can read more on minimax algorithm here or here. The tic tac toe game we just built isn't unbeatable but covers so many possibilities. So I think it's not bad. Then we can style as we want.

Feel free to play with mine here

FCC project 4 - Image Search Abstraction Layer

Agbanusi John — Tue, 21 Jul 2020 15:56:57 +0000

Now we will talk about the fourth project and how to go about it.
We're asked to build an app that can be used for image search and give us results according to our requests.

Project: Image Search Abstraction Layer,
Time taken: 3 hours,
Difficulty: Easy.
The link to the take home project is here
For this project we will be using glitch.

So, you start glitch choosing the hello-express project template after clicking on new project. We get a file structure like:

Then, we should try to edit the html file to a simple form page and style it however you want and the form has an action that send the values as a post request to the server on submission. Here's how mine looks;

So, let's go right to the back-end.
First let's require the desired modules, glitch made it easy for us to install modules, just go to package.json and click on add package and type the name of the package we want, a list of similar packages is shown and you click on the one you want to install. So, we write this in our server.js.

const express = require("express");
const app = express();
var mongo = require('mongodb').MongoClient;
const bodyParser=require('body-parser')
var request = require('request')

We're using express as default and then we use mongodb for our database and body-parser for easy url parsing, we are using request for sending a get request to an api. Note these packages aren't absolute, you might decide to use sql instead of mongodb among other packages too.

We'll be using google search API, I'll advise you to register to get your custom API. An example custom api is -

GET https://www.googleapis.com/customsearch/v1?key=INSERT_YOUR_API_KEY&cx=017576662512468239146:omuauf_lfve&q=

Also we have to set up some middlewares we need,

app.use(express.static("public"));
//app.use(helmet())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

Helmet is a package that helps secure your app from XSS attacks and more, but we'll not dwell on that here.
Now let's connect to our database.

mongo.connect(process.env.DB,{ useUnifiedTopology: true },(err,client)=>{
  var db=client.db('new')
  if (err) throw err;
})

"process.env.DB" refers to a secret api key we need to connect to my own database and is stored in the .env file.
Glitch automatically install the dotenv package for us, so we don't really need to install and require again. But just so you will know for other environments, you require and configure dotenv like this:

require('dotenv').config()

So, next let's create routes for our app, the first is the default path '/'.

app.get("/", (request, response) => {
  response.sendFile(__dirname + "/views/index.html");
});

Next, we create a route for a get request and parameters, then we get the compulsory parameters given with req.params.search in this case. The search term comes from the path and is made compulsory by putting a colon at the front of it. Some others may want to limit or offset their search to get a certain amount of images, though the default is 1, they could add an extra path by adding '?offset=number needed' and so we handled that on the third line using a ternary operator.

Now before we make the request to the API, let's save the search term inputted for later usage in our database, which is shown on the fifth line, so after saving in the database we then make a request to our custom API on the behalf of the user and specify a json response, then we go through the response and filter out what we don't need and return the first 1 or more items found depending on the offset query. Then we just send it as a json response to the user, we could also capture the data and show it any way we want but let's just stick with sending a json to the user.

app.get("/imagesearch/:search", (req, res) => {
  let search=req.params.search
  let page = req.query.offset? req.query.offset :1
  db.collection('img').insertOne({term:search,searched_on:new Date().toUTCString()},(err,doc)=>{
    request(ggle+search+'&searchType=image',{json:true},(err,red,data)=>{
      let dat=data.items.map((i)=>{return{image_url:i.link,alt_text:i.snippet,page_url:i.image.contextLink}})
      dat=dat.slice(0,page)
      res.send(dat);
    })
  })

Next, remember we also made a form to make it easy for users? we would have to do the same for a post request to the path you put as the form action. Also we have some little differences.

app.post("/api/imagesearch", (req, res) => {
let search=req.body.search
search= encodeURI(search)
let page = req.body.page ? req.body.page :1
})

We see that we use req.body instead of req.params or req.query here. Also because we're using a form, users could write two or more words and leave a space in between, url doesn't allow it so we have to change it to url format using encodeURI(form data).

Lastly, we also want users to see what others have searched for, so what we have to do is find all possible entries in that document and print them out. For this app we'll bring out the top ten.

app.get('/latest/imagesearch',(req,res)=>{
  db.collection('img').find({}).sort({searched_on:-1}).limit(10).toArray((err,doc)=>{
    res.send(doc)
  })
})

Then we lastly listen for changes, though this is already written for you if you're using glitch.

const listener = app.listen(3000, () => {
  console.log("Your app is listening on port " + 3000);
});

And voila. you're done! You can test my app here

freeCodeCamp take home project 3 - Use the twitch API

Agbanusi John — Fri, 10 Jul 2020 23:13:42 +0000

Now we will talk about the third project and how to go about it.
We're basically asked to use the twitch API to get some general information about some twitch users and display it in a user friendly and personalized way.

Project: Twitch API,
Time taken: 5 hours,
Difficulty: easy.
The link to the take home project is here.

Now, this is a very simple project but with one pitfall, which requires using two fetch requests per user. You might say what's wrong with that, just use them one after each other and zoom, you're done! But after doing this you'll discover that this takes a lot of time in getting the response needed, sometimes up to 10 minutes just to load your pages, which could become troublesome for impatient users.

So, what can we do? Well, JavaScript provides us with asynchronous functions. This helps in paralleling of codes, meaning while this code is running it goes to the next one without waiting for the other to run finish, so in a time frame, you can have two or more codes running at the same time, cutting the runtime exponentially, awesome right? We'll use async functions in this example mainly to help parallel the fetch requests. Let's get to it!

var list=["freecodecamp", "RobotCaleb", "OgamingSC2", "noobs2ninjas"] //list of users
var classer1='v' //change class1
var classer2='v'  //change class2
var classer3='v'  //change class3
var alli=[]  //a global var to extract the values gotten from the all function

We curated a list of users that we'll be getting their general data from twitch. Looking at this, we have four users, and we want two fetch request for each meaning 8 fetch request underway, that could take a while, how can we just shorten it to half or more? Let's go on.

class Main extends React.Component {
  constructor(props){
    super(props);
    //bind functions
    this.streams=this.streams.bind(this);
    this.api_get=this.api_get.bind(this);
    this.compile=this.compile.bind(this);
    this.offline=this.offline.bind(this)
    this.online=this.online.bind(this);
    this.all=this.all.bind(this);
  }
}

The code above just creates a class object and bind the functions we're going to be using to the class object.

Let's go to the first function api_get.

//function to get results from the site through a get request
  api_get(type,channel){
    return fetch('https://wind-bow.glitch.me/twitch-api/'+type+'/'+channel).then(response=>response.json()).then(data=>data)
  }

This function simply creates a get request to the specific site above and returns the response in json format. we don't need to define the function with function functionName(){}, because the function is now a method and now bound to the class object using this.

Next we will create a function that asynchronously gets the two fetch requests per user.

//a function that return the streams and channel data from the get request
  async streams(){
    let stream=[]
    let channel=[]
    for(let i=0; i<list.length;i++){
      stream.push(await this.api_get('streams',list[i]))
      channel.push(await this.api_get('channels',list[i]))
      }
    return {stream,channel}

Breaking it down, a fetch request is asynchronous by nature, so how do we wait for the results to be ready before assigning the result to a variable, we use the await syntax, but it can be only used in an asynchronous function, so we have to define streams as an async function.
So merely looking at the function, we see there are four synchronous and two async operations going on, but is that right? and does that mean we only get half the time? Let's look at it again and we see that the loop actually queues the request, so it runs this.api_get('streams',list[0]) then push to streams --> this.api_get('channels',list[0]) then push to channels and continuously like that for 1,2 to the end of the list. So the synchronous operations does the queuing, then at the end we have 8 async operations running at the same time. So we can assume we'll get our total results in almost 1/8th the time needed for synchronous operations! We don't have to worry about the arrangement in the list because since it a queue, the early ones gets early results most times, so we get an arranged result at the end of the day. So cool right?!, at the end of the function we return an object containing the two results with keys same as their variable names.

Next we have the compile function,

//this gets the total result and compile it into one
  async compile(){
    let st
    for(let i=0; i<1;i++){
      st=await this.streams()
    }
    let stream =st.stream.map((i)=>i.stream)
    let fin=st.channel.map((i,ind)=>{return{...i,stream:stream[ind]}})
    return fin
  }

This waits for the stream function to return its result then merge the two together into one but only taking the results we need, nothing more. Notice it is an async function, know why?
So now we have all we need, now looking at the example given in the challenge, we see you can show all the users, the ones online and also the ones offline. So let's create a function that get the desired data for all the users.

//this injects the data needed to the frontend for all users
  async all(){
    let all=alli.length!==0? alli: await this.compile()
    //
    document.getElementById('channel').innerHTML=''
    all.map((j)=>{
      let text= j.stream? j.game+': '+j.status : 'offline'
      let id= j.stream? 'background-color:#80CBC4' : 'background-color:#FFCDD2'
      document.getElementById('channel').innerHTML+='<div class="card" style='+id+' ><img class="img" src='+j.logo+'><a href='+j.url+'><h3>'+j.display_name+'</h3></a><h5>'+text+'</h5><div><br>'
    })
    alli=all
    classer1='v active'
    classer2='v'
    classer3='v';
  }

This function creates a card for each user and show some data like name, display picture and customized text. The reason for the first line is let's say we've already gotten results from compile, we don't want to got through the stress of api_get -> streams -> compile, yes they take lesser time than before doesn't mean they still won't take time loading, if for every time we click on a button to show all users or offline or online users and it loads all over again, the app is going to be very tiring, so what can we do? We can store it in a variable or local storage in your browser but this second method is flawed in so that if the status suddenly change, we can easily know by refreshing the page, the variable is refreshed but local storage stays the same, we can use local session then, it helps and works the same as variable. But we're just building a simple app here, no need to overkill it, so we went with variable. Remember the alli array defined earlier? So the first line checks if we already filled the alli array already, if not then run this.compile and await the result, then assign it to all. The last three lines is to change classes for specific styling used.

Next is the offline function and is similar to the all function.

//a function that compiles the offline users with use as above
  offline(){
    let off=alli
    document.getElementById('channel').innerHTML=''
    let of=off.filter((j)=>j.stream===null)
    let color='background-color:#FFCDD2'
    of.map((j)=>{
      document.getElementById('channel').innerHTML+='<div class="card" style='+color+'><img class="img" src='+j.logo+'><a href='+j.url+'><h3>'+j.display_name+'</h3></a><h5>offline</div><br>'
    })
    classer1='v'
    classer3='v active'
    classer2='v';
  }

Note the similarity except for change in classes and just using the alli array directly because the default result is always the all function, so by the time we're calling the offline function, the alli array would have been filled already.

So similarly, we have the online function, this returns the list of users that are online unlike the offline function that return users that are offline.

//this function does as above but for online users
  online(){
    let on=alli
    document.getElementById('channel').innerHTML=''
    let onn=on.filter((i)=>i.stream!==null)
    let color='background-color:#80CBC4'
    onn.map((j)=>{
      let text=j.game+': '+j.status
      document.getElementById('channel').innerHTML+='<div class="card" style='+ color +'><img class="img" src='+j.logo+'><a href='+j.url+'><h3>'+j.display_name+'</h3></a><h5>'+text+'</div><br>'
    })
    classer1='v'
    classer3='v'
    classer2='v1 active';
  }

And, we're almost done just the render remaining, which I will show below.

render() {
    this.all()
    return (
     <div>
        <div className='top'>
          <h1>Twitch Streamers </h1>
          <ul>
            <li className={classer1} onClick={this.all}><div id='all' className='cir'/>  <p className='i'> All</p></li>
            <li className={classer2} onClick={this.online}><div id='online' className='cir'/> <p className='ii'> Online</p></li>
            <li className={classer3} onClick={this.offline}><div id='offline' className='cir'/> <p className='iii'> Offline</p></li> 
          </ul> 
        </div>
        <div id='channel' />
     </div>
    );
  }

Then we render to the root div in the html and then style it.

ReactDOM.render(<Main />, document.getElementById('root'));

My html code looks like this,

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js"></script>
    </body>
</html>

We're done! You can style the app to your taste.

You can check the result here

FreeCodeCamp take home project 2- Wikipedia previewer.

Agbanusi John — Wed, 01 Jul 2020 17:07:11 +0000

Okay, earlier I wrote about the take home project 1 which is a weather app, now we'll talk about the wikipedia previewer, let's shorten it to wiki previewer in this article.

Project: Wiki previewer,
Time taken: 4hrs,
Difficulty level: easy.
The link to the project is here

Please, it is advisable that you have gone through the entire freecodecamp curriculum before taking on the take home projects.

So our definition of this project is to create an app that when you type in a word, it brings up articles that matches the key word typed in the form. Also we would want to make our site responsive and pops up articles in real time, so we're typing, the articles popping up also changes to relevant ones.

So now to code! Let's start with the js part, I used react which is not bad but is a little overkill.

First:

class Main extends React.Component {
  constructor(props){
    super(props);
    this.state={
      value:'',
      result:[]
    }
  }
  render(){
   return(
    <div></div>
   )
 }
}

From the above we just defined a basic react component, and added some values to the state object, the value key would hold the input of the user, while the result will hold the results we get from the wikipedia api after sending a get request.

Next, we create a function and call it search, this function will send a get request and process the response gotten.

search(event,val){
    //console.log(this.state.value)
    let value= val? val: this.state.value
    event.preventDefault();
    fetch('https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=20&srsearch='+value).then(response=>response.json()).then(data=>{
      //console.log(data)
      this.setState({
        result:data.query.search
        })
    }).catch(err=>console.log(err))
  }

The search function above has two inputs, the event and the val. Reading through the function we'll see that the val input is temporary as if it doesn't see the val, it gets the value from the state object as written in line 2.
Someone might ask, why don't we just get directly from the state, instead of asking from an input of val. We'll answer that in the next section. The third line just makes it hard for the form to submit empty string to the fetch request, as the function is a form submit handler. We then made a fetch request to

'https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=20&srsearch='

and added the value with string concatenation and after getting the request in json, we put the required results we need in the state object. We saw before setting the state I visualised the data to know what I want to get exactly from it. The catch is to catch any errors encountered instead of breaking the app and print to console.

So the next function is

handleChange(e){
    this.setState({
      value:e.target.value
    })
    this.search(e,e.target.value)
  }

This is to handle change in input to the form, so as you type in the input form, it automatically saves the value in the state object. We also want to trigger the search function we defined above to show us the results after request to and response from the wiki page. But we would have a problem as it won't be in real time, it'll bring up results of one input ago. The reason is the state won't change until the component re-renders, but we're still in the handleChange function and the only value we'll have access to is the former one until it re-renders. We want to still see real time results, so what do we do? We can just pass the new value as a second input to the search function, remember we made provision for that, so the value variable becomes the val input. Also don't forget that the search is also a submit handler, the input val won't be inputted by default, so that's why we had a fallback getting the value from this.state.value. Note that on submit, the component automatically renders, so we'll be having the new correct value, win-win right? On change it shows results in real time, on submit also shows results in real time!

Okay, one more function to go...

clear(){
    this.setState({
      value:''
    })
  }

This function above is a simple function to clear the value of this.state.value, maybe to input another word or sentence.

Next is the render part,

render() {
    //console.log(this.state.result)
    var bee=''
    this.state.result.map((i,index)=>{
          let url='https://en.wikipedia.org/wiki/'+encodeURI(i.title)
          bee+= "<div class='card'><a href="+url+" target=_blank><h3>"+i.title+"</h3><hr><p>"+i.snippet+"</p></a></div>"
          })
    //console.log(bee)
    if(bee){document.getElementById('top').innerHTML=bee}
    return (
      <div className='body'>
        <h2> Wikipedia Previewer</h2>
        <div className='search'>
        <form onSubmit={this.search}>
          <input type='text' onChange={this.handleChange} value={this.state.value} />
          <button type='reset' className='x' onClick={this.clear}>x</button>
          <button type='submit'><i className="fas fa-search" /></button>
          <button><a href='https://en.wikipedia.org/wiki/Special:Random' target='_blank'><i className="fas fa-random"></i></a></button>
        </form>
        </div>
        <div id='top' />
      </div>
    );
  }

Okay, what do we have here! It's not one complicated thing. Let's go over it together.

On render, we created a bee variable to a string containing some html combinations and injecting it into the element with id named 'top'. Someone may say we could just put this in the search function, but remember whenever a function does a change of state, we can't access the new value until it re-renders. So another way to beat it is getting your objects in the render function, it will always trigger a re-render before executing what is inside it, but note it is outside the return statement. But whenever you're putting statements in the render, remember to NEVER set a state in it, it'll trigger an infinite loop and believe me you don't want that.
So inside the render, the mapped the array from this.state.results and created a url variable which uses the title key value to create a link element and also used the snippet key value to show a some text on the topic also displayed and concatenated them to the bee variable, and this is done for all the values of the result array. After this it is injected into the div with element with id 'top' using 'innerHTMl', and voila we're done!.

The return statement is used to create the needed elements for displaying and getting results, notice the event handler on the form element and input element? We should also make sure we render with react dom.

ReactDOM.render(<Main />, document.getElementById('root'));

My html looks like this:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js"></script>
    </body>
</html>

The link for fontawesome is for the icons I used in my project, that is the search and random icons.

You can test my app here below codepen. Note it may take a little time like 2-5 seconds to show results of input, this is due to the fetch request which sometimes is slow to return responses. Enjoy!

FreeCodeCamp take home project 1 walkthrough - weather app

Agbanusi John — Mon, 29 Jun 2020 03:20:34 +0000

Okay, I'll be writing a blog series talking about all of freecodecamp take home projects and more, this will be the first blog post and will cover the "show the weather app".

The project is simply a weather app that shows the weather in your location, also has features like an icon to describe the weather and the temperature shown that can be toggled between the celsius and fahrenheit unit.

Project: Weather App
Approximate Time: 2hrs
Difficulty level: Easy
The link to the challenge is here.

I used React for this project which I must say was an overkill, normal HTML, CSS and JS is enough.
First, we have to get the location of our user, for that we'll use navigator.geolocation which will give a prompt to allow or block this site from knowing your current location.

The code could look like:

if (navigator.geolocation){
 navigator.geolocation.getCurrentPosition(function(position){
 var lat=position.coords.latitude;
 var long=position.coords.longitude;
 })
}

FreeCodeCamp helped us by providing an api we can make a get request to, querying with longitude and latitude we're going to fetch and use the json response we receive as below. But before the code, I put the rest of the code including the fetch request inside the if statement above to ensure we're sending the right kind of request to the api.

fetch('https://fcc-weather-api.glitch.me/api/current?lon='+long+'&lat='+lat)
.then(response=>response.json())
.then(data=>{
  //function goes here
})

The code above requests from the api, with queries "lon" for longitude and "lat" for latitude.

We should know how the response look like right?

{"coord":{"lon":139,"lat":35},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"https://cdn.glitch.com/6e8889e5-7a72-48f0-a061-863548450de5%2F04d.png?1499366020964"}],"base":"stations","main":{"temp":25.56,"feels_like":28.46,"temp_min":25.56,"temp_max":25.56,"pressure":1006,"humidity":67},"wind":{"speed":0.45,"deg":116,"gust":0.89},"clouds":{"all":59},"dt":1593399515,"sys":{"type":3,"id":2019346,"country":"JP","sunrise":1593372765,"sunset":1593424915},"timezone":32400,"id":1851632,"name":"Shuzenji","cod":200}

From these results above, our main target data is the data.main.temp for the temperature, data.weather[0].icon for the icon to be displayed, data.sys.country for displaying country. Note the data is from the fetch function above. For ease and simplicity, we put the entire React component below in it.

So, what's next? Designing the app and displaying the required data after getting from the api.

The React component could look like this:

class Main extends React.Component {
  constructor(props){
    super(props)
    this.state={
      temp_change:true
    }
    this.convert=this.convert.bind(this)
    this.toggle=this.toggle.bind(this)
  }
  toggle(){
    this.setState({
      temp_change:!this.state.temp_change
    })
  }
  convert(temp){

    if(this.state.temp_change){

      return temp+'°C'
    }
    else{
      return +((9*temp/5)+32).toFixed(2) +'°F'
    }
  }
  render() {
      return (
       <div>
        <h1>A simple Weather App</h1>
        <h4>{data.sys.country}</h4>
        <div className='show'>
         <h3>{this.convert(data.main.temp)}</h3>
         <button onClick={this.toggle}> Change unit </button>
        </div>
        <h4>{data.weather[0].main}</h4>
        <img src={data.weather[0].icon} />
      </div>
      );
      }
    }
ReactDOM.render(<Main />, document.getElementById('root'))

Breaking it down, we have two functions and one state variable here. The state variable is for toggling between celsius or fahrenheit, so on the click of a button, we could change the temperature displayed. This toggling is taken care of by the toggle function, which then triggers a change in state and also the convert temperature function since the button click will trigger a re-render.

As the last line shows we have to render to an element with id of 'root', so our html code should look like this:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js"></script>
    </body>
</html>

The main focus is that you have an element, div in this case with id 'root', so that React can render your result to that element. You can then design as you deem fit, you can check out mine here on codepen.