month-12/step-1_first submition

src/components/app/app.tsx

@@ -8,11 +8,11 @@ import { StringComponent } from "../string/string";
 import { SortingPage } from "../sorting-page/sorting-page";
 import { StackPage } from "../stack-page/stack-page";
 
-import "./app.css";
+import styles from './app.module.css'
 
 function App() {
   return (
-    <div className="app">
+    <div className={styles.app}>
       <BrowserRouter>
         <Switch>
           <Route path="/" exact>

src/components/fibonacci-page/fibonacci-page.tsx

@@ -1,10 +1,67 @@
-import React from "react";
+import React, { ChangeEvent, FormEvent, ReactElement, useState } from "react";
 import { SolutionLayout } from "../ui/solution-layout/solution-layout";
+import styles from "./fibonacci.module.css"
+import { Input } from "../ui/input/input";
+import { Button } from "../ui/button/button";
+import { Circle } from "../ui/circle/circle";
+import { fibArray } from "./fibonacci";
 
 export const FibonacciPage: React.FC = () => {
+
+  type PropsType = {
+    val: number[],
+  }
+
+  const [form, setValue] = useState({ valToCount: '' })
+  const [data, setData] = useState([])
+  const [btnDisable, setBtnDisable] = useState(false)
+  const [btnLoader, setBtnLoader] = useState(false)
+
+  function onInputChange(e: ChangeEvent<HTMLInputElement>) {
+    e.preventDefault();
+    let valToCount = (e.target as HTMLInputElement).value
+
+    setBtnDisable(+valToCount > 19)
+    setValue({ ...form, valToCount });
+  }
+
+  function calculate(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const fibArr = fibArray(+form.valToCount + 1)
+    const val: number[] = []
+    let i = 0
+    setBtnLoader(true)
+    const rev = setInterval(() => {
+      val.push(fibArr[i])
+      setData([...val] as [])
+      if (i === fibArr.length - 1) {
+        clearInterval(rev)
+        setBtnLoader(false)
+      }
+      i++
+    }, 500)
+    setValue({ valToCount: '' });
+  }
+
+  function FibBeads({ val }: PropsType): any  {
+    return val.map((fibNum: number, idx: number) => {
+      return <Circle key={idx} letter={`${fibNum}`} index={idx} />
+    })
+  }
+
   return (
     <SolutionLayout title="Последовательность Фибоначчи">
-
+      <div className={styles.context}>
+        <form className={styles.form} onSubmit={calculate}>
+          <Input name={'valToCount'} type="number" value={form.valToCount} onChange={onInputChange}
+            min="1" max="19" extraClass="mr-6" />
+          <Button text="Рассчитать" type='submit' disabled={btnDisable} isLoader={btnLoader}></Button>
+        </form>
+        <p className={styles.limit}> Максимальное число - 19</p>
+      </div>
+      <ul className={styles.circles}>
+        <FibBeads val={data} />
+      </ul>
     </SolutionLayout>
   );
 };

src/components/fibonacci-page/fibonacci.module.css

@@ -0,0 +1,37 @@
+.context {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  gap: 4px;
+  width: 567px;
+}
+
+.form {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  width: 567px;
+  gap: 12px;
+  margin: 0 auto;
+}
+
+.limit {
+  display: flex;
+  width: 204px;
+  padding: 0 16px;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 22px;
+  text-align: left;
+}
+
+.circles {
+ display: flex;
+ gap: 16px;
+ row-gap: 48px;
+ margin: 0 auto;
+ margin-top: 48px;
+ justify-content: center;
+ max-width: 1040px;
+ flex-wrap: wrap;
+}

src/components/fibonacci-page/fibonacci.tsx

@@ -0,0 +1,33 @@
+const cacheFib: Record<number, number> = {}
+
+export function getFibonacci(index: number): number {
+  if (index < 0) {
+    throw new Error();
+  }
+  if (index === 0) {
+    return 0
+  }
+  if (index === 1) {
+    return 1
+  }
+
+  if (cacheFib[index]) {
+    return cacheFib[index]
+  }
+
+  const num1 = getFibonacci(index - 1)
+  const num2 = getFibonacci(index - 2)
+
+  cacheFib[index - 1] = num1
+  cacheFib[index - 2] = num2
+
+  return num1 + num2;
+}
+
+export function fibArray(index: number){
+ const arr = [1]
+ for (let i = 2; i <= index; i++){
+  arr.push(getFibonacci(i))
+ }
+ return arr
+}