https://github.com/programandoconro/fibonaccimathgame

App to play and mentally calculate the nth Fibonacci number
https://github.com/programandoconro/fibonaccimathgame

app fibonacci game math reactjs

Last synced: 9 months ago
JSON representation

App to play and mentally calculate the nth Fibonacci number

• Host: GitHub
• URL: https://github.com/programandoconro/fibonaccimathgame
• Owner: programandoconro
• Created: 2019-12-08T16:15:28.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-11-05T02:47:56.000Z (about 1 year ago)
• Last Synced: 2025-01-23T02:43:18.776Z (11 months ago)
• Topics: app, fibonacci, game, math, reactjs
• Language: JavaScript
• Homepage:
• Size: 2.1 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# FibonacciMathGame

App to mentally calculate the nth Fibonacci number.

https://programandoconro.github.io/FibonacciMathGame/

## My simplest working example (starting point) 

```

import React, {useState,} from 'react';

import logo from './fibo.png';

import './App.css';

import ExampleComponent from 'react-rounded-image'

function App() {

  

  const [nValue, nValueHandler] = useState("3");

  const [userAnswer, userAnswerHandler] = useState("2");

  

  const fiboHandler = (n)=>{

    

    if (n <= 2) return 1;

    const f = [0, 1, 1];

    for(let i = 3; i <= n; i++) {

      f[i] = f[i-1] + f[i-2];

    }

    const correctAnswer = f[f.length-1];

    if (correctAnswer.toString() === userAnswer.toString()) 

    alert('Woowow ' + correctAnswer +" is correct, genius !!! " + f.toString());

    else alert ('Sorry, that is not correct');    

  };

  

  return (

    


    


    
Nth. Fibonacci number

    nValueHandler(e.target.value)}

    type='number'

    >

    


    

    


    
Your Answer 

    

    userAnswerHandler(e.target.value)}

    type="number"

    

    >

    


    

    {

      fiboHandler(nValue)

    }

  }

  >Send


  

  

    https://github.com/progamandoconro/FibonacciMathGame 

  


  

  );

}


export default App;

```

# Now with more complexity and less bugs

```

import React, {useState,} from 'react';

import {Button,Table,TableCell} from '@material-ui/core';

import Header from './Header'

import Footer from './Footer'

import './App.css';

function App() {

  

  const [nValue, setnValue] = useState("3");

  const [answer, setAnswer] = useState("2");

  

  const fiboCalculator = (n)=>{

    if (n <= 2) return 1;

    let f = [0, 1, 1];

    for(let i = 3; i <= n; i++) {

      f[i] = f[i-1] + f[i-2];

    }

    let correctAnswer = f[f.length-1];

    

    if (correctAnswer.toString() === answer.toString()) {

      alert('Woowow ' + correctAnswer +" is correct, genius !!! " + f.toString() + " A new level is now available");

      

    }

    else alert ('Sorry, that is not correct');  

    

  };

  

  const gameLevelHandler = (n)=> {

    

    if (n <= 2) return 1;

    let f = [0, 1, 1];

    for(let i = 3; i <= n; i++) {

      f[i] = f[i-1] + f[i-2];

    }

    let correctAnswer = f[f.length-1];

    let counter = 1

    

    if (correctAnswer.toString() === answer.toString()) {

      let val = parseInt( nValue)  + parseInt( counter)

      return val;

    }

    else {

      return parseInt(nValue)

    }

  }

  

  const nValueOnHandleChange = e => {

    let valu = e.target.value;

    if (!Number(valu)) {

      return;

    }

    setnValue(e.target.value);

  };

  

  const answerOnHandleChange = e => {

    let valu = e.target.value;

    if (!Number(valu)) {

      return;

    }

    setAnswer(e.target.value);

  };

  

  const showTable = (n)=> {

    if (n <= 2) return 1;

    let f = [0, 1, 1];

    for(let i = 3; i <= n; i++) {

      f[i] = f[i-1] + f[i-2];

    }

    return f.slice(1,f.length-2).map(e=>
{e.toString()}
)

  }

  

  return (

    

    


    

    


    
 Level 

    nValueOnHandleChange(e)}

    type='number'

    min='3'

    max={gameLevelHandler(nValue)}

    

    >


What is the {nValue}th. Fibonacci number? 

 

    answerOnHandleChange(e)}      

    type="number"

    min='2'

    

    >

    

    
Your Answer 


    fiboCalculator(nValue)}

    > Send

    

    


    
 Your Fibonacci Points 


    

     {showTable(nValue)} 

    

    

    

    

    

    );

  }

  

  export default App;

  

```


# Simple is beautiful, lets remove input and update the level if answer is correct automatically. 

``` 

import React, {useState,} from 'react';

import Header from './Header'

import Footer from './Footer'

import './App.css';

function App() {

  

  const [nValue, setnValue] = useState("3");

  const [answer, setAnswer] = useState("2");

  

  const fiboCalculator = (n)=>{

    if (n <= 2) return 1;

    let f = [0, 1, 1];

    for(let i = 3; i <= n; i++) {

      f[i] = f[i-1] + f[i-2];

    }

    let correctAnswer = f[f.length-1];

    

    if (correctAnswer.toString() === answer.toString()) {

      alert('Woowow ' + correctAnswer +" is correct, genius !!! " + f.toString() + " A new level is now available");

      setnValue(parseInt(nValue)+1);

    }

    else alert ('Sorry, that is not correct');  

    

  };

  

  const answerOnHandleChange = e => {

    let valu = e.target.value;

    if (!Number(valu)) {

      return;

    }

    setAnswer(e.target.value);

  };

  

  const showTable = (n)=> {

    if (n <= 2) return 1;

    let f = [0, 1, 1];

    for(let i = 3; i <= n; i++) {

      f[i] = f[i-1] + f[i-2];

    }

    return f.slice(1,f.length-2).map(e=>
{e.toString()}
)

  };


  return (

    

    


    

    


    

    
What is the {nValue}th. Fibonacci number? 

    

    answerOnHandleChange(e)}      

    type="number"

    min='2'

    

    >

    

    
Your Answer 

    

    fiboCalculator(nValue)}

    > Send

    

    

    
 Your Fibonacci Points 

     {showTable(nValue)} 

    

    

    

    

    

    );

  }

  

  export default App;


  ```