{"id":21399707,"url":"https://github.com/programandoconro/fibonaccimathgame","last_synced_at":"2025-03-16T15:48:57.906Z","repository":{"id":113420064,"uuid":"226695214","full_name":"programandoconro/FibonacciMathGame","owner":"programandoconro","description":"App to play and mentally calculate the nth Fibonacci number","archived":false,"fork":false,"pushed_at":"2024-11-05T02:47:56.000Z","size":2202,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-23T02:43:18.776Z","etag":null,"topics":["app","fibonacci","game","math","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/programandoconro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-08T16:15:28.000Z","updated_at":"2024-11-05T02:43:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"91a543ac-1b6e-4efb-9ba0-52a587137865","html_url":"https://github.com/programandoconro/FibonacciMathGame","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programandoconro%2FFibonacciMathGame","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programandoconro%2FFibonacciMathGame/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programandoconro%2FFibonacciMathGame/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programandoconro%2FFibonacciMathGame/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/programandoconro","download_url":"https://codeload.github.com/programandoconro/FibonacciMathGame/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243892936,"owners_count":20364800,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["app","fibonacci","game","math","reactjs"],"created_at":"2024-11-22T15:16:18.669Z","updated_at":"2025-03-16T15:48:57.885Z","avatar_url":"https://github.com/programandoconro.png","language":"JavaScript","readme":"# FibonacciMathGame\nApp to mentally calculate the nth Fibonacci number.\n\nhttps://programandoconro.github.io/FibonacciMathGame/\n\n## My simplest working example (starting point) \n```\nimport React, {useState,} from 'react';\nimport logo from './fibo.png';\nimport './App.css';\nimport ExampleComponent from 'react-rounded-image'\n\nfunction App() {\n  \n  const [nValue, nValueHandler] = useState(\"3\");\n  const [userAnswer, userAnswerHandler] = useState(\"2\");\n  \n  const fiboHandler = (n)=\u003e{\n    \n    if (n \u003c= 2) return 1;\n    const f = [0, 1, 1];\n    for(let i = 3; i \u003c= n; i++) {\n      f[i] = f[i-1] + f[i-2];\n    }\n    const correctAnswer = f[f.length-1];\n    if (correctAnswer.toString() === userAnswer.toString()) \n    alert('Woowow ' + correctAnswer +\" is correct, genius !!! \" + f.toString());\n    else alert ('Sorry, that is not correct');    \n  };\n  \n  return (\n    \u003cdiv className=\"App\"\u003e\n    \u003cdiv className=\"App-header\"\u003e\n    \u003ch1\u003eNth. Fibonacci number\u003c/h1\u003e\n    \u003cinput\n    \n    value={nValue}\n    onChange={e=\u003enValueHandler(e.target.value)}\n    type='number'\n    \u003e\u003c/input\u003e\n    \u003chr\u003e\u003c/hr\u003e\n    \n    \u003cExampleComponent className=\"App-logo\" alt=\"logo\" image={logo} /\u003e\n\n    \u003ch1\u003eYour Answer \u003c/h1\u003e\n    \n    \u003cinput\n    value={userAnswer}\n    onChange={e=\u003euserAnswerHandler(e.target.value)}\n    type=\"number\"\n    \n    \u003e\u003c/input\u003e\n    \u003chr\u003e\u003c/hr\u003e\n    \n    \u003cbutton\n    onClick={()=\u003e{\n      fiboHandler(nValue)\n    }\n  }\n  \u003eSend\u003c/button\u003e\n\n  \u003c/div\u003e\n  \u003cimg style={{padding:100}} src={logo} className=\"App-logo\" alt=\"logo\" /\u003e\n  \u003cfooter\u003e \u003ca href='https://github.com/progamandoconro/FibonacciMathGame'\u003e https://github.com/progamandoconro/FibonacciMathGame\u003c/a\u003e \u003c/footer\u003e\n  \n\n  \u003c/div\u003e\n  );\n}\n\nexport default App;\n\n\n```\n# Now with more complexity and less bugs\n\n```\n\nimport React, {useState,} from 'react';\nimport {Button,Table,TableCell} from '@material-ui/core';\n\nimport Header from './Header'\nimport Footer from './Footer'\n\nimport './App.css';\n\nfunction App() {\n  \n  const [nValue, setnValue] = useState(\"3\");\n  const [answer, setAnswer] = useState(\"2\");\n  \n  const fiboCalculator = (n)=\u003e{\n    if (n \u003c= 2) return 1;\n    let f = [0, 1, 1];\n    for(let i = 3; i \u003c= n; i++) {\n      f[i] = f[i-1] + f[i-2];\n    }\n    let correctAnswer = f[f.length-1];\n    \n    if (correctAnswer.toString() === answer.toString()) {\n      alert('Woowow ' + correctAnswer +\" is correct, genius !!! \" + f.toString() + \" A new level is now available\");\n      \n    }\n    else alert ('Sorry, that is not correct');  \n    \n  };\n  \n  const gameLevelHandler = (n)=\u003e {\n    \n    if (n \u003c= 2) return 1;\n    let f = [0, 1, 1];\n    for(let i = 3; i \u003c= n; i++) {\n      f[i] = f[i-1] + f[i-2];\n    }\n    let correctAnswer = f[f.length-1];\n    let counter = 1\n    \n    if (correctAnswer.toString() === answer.toString()) {\n      let val = parseInt( nValue)  + parseInt( counter)\n      return val;\n    }\n    else {\n      return parseInt(nValue)\n    }\n  }\n  \n  const nValueOnHandleChange = e =\u003e {\n    let valu = e.target.value;\n    if (!Number(valu)) {\n      return;\n    }\n    setnValue(e.target.value);\n  };\n  \n  const answerOnHandleChange = e =\u003e {\n    let valu = e.target.value;\n    if (!Number(valu)) {\n      return;\n    }\n    setAnswer(e.target.value);\n  };\n  \n  const showTable = (n)=\u003e {\n    if (n \u003c= 2) return 1;\n    let f = [0, 1, 1];\n    for(let i = 3; i \u003c= n; i++) {\n      f[i] = f[i-1] + f[i-2];\n    }\n    return f.slice(1,f.length-2).map(e=\u003e\u003cli\u003e{e.toString()}\u003c/li\u003e)\n  }\n  \n  return (\n    \n    \u003cdiv className=\"App\"\u003e\n    \u003cHeader/\u003e\n    \u003cdiv className=\"App-body\"\u003e\n    \u003ch1\u003e Level \u003c/h1\u003e\n    \u003cinput\n    value={nValue}\n    onChange={e=\u003enValueOnHandleChange(e)}\n    type='number'\n    min='3'\n    max={gameLevelHandler(nValue)}\n    \n    \u003e\u003c/input\u003e\n\n\u003ch1\u003eWhat is the {nValue}th. Fibonacci number? \u003c/h1\u003e\n \n    \u003cinput\n    value={answer}\n    onChange={e=\u003eanswerOnHandleChange(e)}      \n    type=\"number\"\n    min='2'\n    \n    \u003e\u003c/input\u003e\n    \n    \u003ch1\u003eYour Answer \u003c/h1\u003e\n\n    \u003cButton\n    style={{color:'white'}}\n    onClick={()=\u003efiboCalculator(nValue)}\n    \u003e Send\n    \u003c/Button\u003e\n    \u003c/div\u003e\n\n    \u003ch1\u003e Your Fibonacci Points \u003c/h1\u003e\n\n    \u003cTable \u003e\n    \u003cTableCell \n    className='Table'\n    \u003e {showTable(nValue)} \n    \u003c/TableCell\u003e\n    \u003c/Table\u003e\n    \u003cFooter/\u003e\n    \u003c/div\u003e\n    \n    );\n  }\n  \n  export default App;\n  \n```\n\n# Simple is beautiful, lets remove input and update the level if answer is correct automatically. \n\n``` \nimport React, {useState,} from 'react';\n\nimport Header from './Header'\nimport Footer from './Footer'\n\nimport './App.css';\n\nfunction App() {\n  \n  const [nValue, setnValue] = useState(\"3\");\n  const [answer, setAnswer] = useState(\"2\");\n  \n  const fiboCalculator = (n)=\u003e{\n    if (n \u003c= 2) return 1;\n    let f = [0, 1, 1];\n    for(let i = 3; i \u003c= n; i++) {\n      f[i] = f[i-1] + f[i-2];\n    }\n    let correctAnswer = f[f.length-1];\n    \n    if (correctAnswer.toString() === answer.toString()) {\n      alert('Woowow ' + correctAnswer +\" is correct, genius !!! \" + f.toString() + \" A new level is now available\");\n      setnValue(parseInt(nValue)+1);\n    }\n    else alert ('Sorry, that is not correct');  \n    \n  };\n  \n  const answerOnHandleChange = e =\u003e {\n    let valu = e.target.value;\n    if (!Number(valu)) {\n      return;\n    }\n    setAnswer(e.target.value);\n  };\n  \n  const showTable = (n)=\u003e {\n    if (n \u003c= 2) return 1;\n    let f = [0, 1, 1];\n    for(let i = 3; i \u003c= n; i++) {\n      f[i] = f[i-1] + f[i-2];\n    }\n    return f.slice(1,f.length-2).map(e=\u003e\u003cli\u003e{e.toString()}\u003c/li\u003e)\n  };\n\n  return (\n    \n    \u003cdiv className=\"App\"\u003e\n    \u003cHeader/\u003e\n    \u003cdiv className=\"App-body\"\u003e\n    \n    \u003ch1\u003eWhat is the {nValue}th. Fibonacci number? \u003c/h1\u003e\n    \n    \u003cinput\n    value={answer}\n    onChange={e=\u003eanswerOnHandleChange(e)}      \n    type=\"number\"\n    min='2'\n    \n    \u003e\u003c/input\u003e\n    \n    \u003ch1\u003eYour Answer \u003c/h1\u003e\n    \n    \u003cbutton\n    onClick={()=\u003efiboCalculator(nValue)}\n    \u003e Send\n    \u003c/button\u003e\n    \u003c/div\u003e\n    \u003ch1\u003e Your Fibonacci Points \u003c/h1\u003e\n    \u003ctable\n    className='Table'\n    \u003e {showTable(nValue)} \n    \u003c/table\u003e\n    \n    \u003cFooter/\u003e\n    \u003c/div\u003e\n    \n    );\n  }\n  \n  export default App;\n\n  ```\n\n  \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogramandoconro%2Ffibonaccimathgame","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprogramandoconro%2Ffibonaccimathgame","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogramandoconro%2Ffibonaccimathgame/lists"}