Month 12/step 1

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

@@ -0,0 +1,17 @@
+.box_input {
+    display:flex;
+    width:522px;
+    gap:12px;
+}
+.box_main {
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+}
+.lists_circle {
+    list-style-type: none;
+    display: flex;
+    gap: 16px;
+    flex-wrap:wrap;
+    max-width:944px;
+}

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

@@ -1,10 +1,76 @@
-import React from "react";
+import React, { useState, ChangeEvent, SyntheticEvent} from "react";
 import { SolutionLayout } from "../ui/solution-layout/solution-layout";
-
+import { Circle } from '../ui/circle/circle';
+import { Input } from "../ui/input/input";
+import { Button } from "../ui/button/button";
+import { uid } from '../../helper/helper';
+import fibonacciStyle from './fibonacci-page.module.css'
 export const FibonacciPage: React.FC = () => {
+  const [numberInput, setNumberInput] = useState<number>(0);
+  const [started, setStarted] = useState<boolean>(false);
+  const [indexfib, setIndexfib] = useState<number | null>(null)
+  const [arrNumber, setArrNumber] = useState<number[]>([]);
+  const fiboAlgo = async (
+    n: number
+  ) => {
+    let arr: number[] = [];
+    for (let i = 0; i < n + 1; i++) {
+      await new Promise<void>((res) => {
+        setTimeout(() => {
+          res()
+        }, 500)
+      })
+      if(arr.length < 1) {
+        arr.push(0)
+        setIndexfib(i)
+        setArrNumber(arr)
+      }
+      else if(arr.length < 2) {
+        arr.push(1)
+        setIndexfib(i)
+        setArrNumber(arr)
+      }
+      else {
+        arr.push(arr[i - 2] + arr[i - 1])
+        setIndexfib(i)
+        setArrNumber(arr)
+      }
+    }
+  }
+  const startAlgo = async () => {
+    setStarted(true)
+    await fiboAlgo(numberInput)
+    setStarted(false)
+  }
+  const onFormChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setNumberInput(parseInt(e.target.value));
+  }
+  const onChangeForm = (e: SyntheticEvent) => {
+    e.preventDefault();
+    startAlgo()
+  }
   return (
     <SolutionLayout title="Последовательность Фибоначчи">
-
+      <div className={fibonacciStyle.box_main}>
+        <form onSubmit={onChangeForm} className={fibonacciStyle.box_input}>
+          <Input
+            type="number"
+            isLimitText={true}
+            max={19}
+            value={numberInput}
+            onChange={onFormChange} />
+          <Button isLoader={started} type="submit" text='Расчитать' />
+        </form>
+        <ul className={fibonacciStyle.lists_circle}>
+          {arrNumber.length >= 1 && (arrNumber.map((list) => {
+            return (
+              <li key={uid()} >
+                <Circle letter={list} />
+              </li>)
+          }))}
+        </ul>
+      </div>
+
     </SolutionLayout>
   );
 };

src/components/list-page/linkedList.ts

@@ -0,0 +1,257 @@
+import {ReactElement} from "react";
+
+export class Node<T> {
+    value: T
+    next: Node<T> | null
+    constructor(value: T, next?: Node<T> | null) {
+        this.value = value;
+        this.next = (next === undefined ? null : next);
+    }
+}
+//Пока не до конца типизировано. В работе.
+import { ElementStates } from '../../types/element-states';
+interface ILinkedList<T> {
+    append: (element: T) => void;
+    getSize: () => number;
+    toArray: () => void;
+    prepend: (element: T) => void
+    addByIndex: (element:T, index: number, al:ReactElement) => void;
+    deleteByIndex: (
+        index:number,
+        cicleCallback: (text:string | number) => ReactElement) => void;
+    deleteHead: () => void;
+    deleteTail: () => void;
+}
+export class LinkedList<T> implements ILinkedList<T> {
+    private head: any;
+    private size: number;
+    private tail: Node<T> | null;;
+    arr: any;
+    setArr: any;
+    setChange: any;
+    setStarted: any;
+    constructor(arr: any,
+        setArr: any,
+        setChange: any,
+        setStarted: any) {
+        this.arr = arr;
+        this.head = null;
+        this.size = 0;
+        this.tail = null;
+        this.setArr = setArr;
+        this.setChange = setChange;
+        this.setStarted = setStarted;
+    }
+
+    addByIndex = async (element: T, index: number, al: ReactElement) => {
+        if (index < 0 || index > this.size) {
+            console.log('Enter a valid index');
+            return;
+        } else {
+            const node = new Node<any>(element);
+            if (index === 0) {
+                this.setChange(true)
+                this.head.value.head = al
+                await new Promise<void>((res) => {
+                    setTimeout(() => {
+                        res()
+                    }, 1000)
+                });
+                this.setChange(false)
+                node.next = this.head;
+                node.value.head = 'head'
+                this.head.value.head = ''
+                this.head = node;
+                this.setArr(this.toArray());
+                await new Promise<void>((res) => {
+                    setTimeout(() => {
+                        res()
+                    }, 1000)
+                });
+                node.value.style = ElementStates.Default
+            } else {
+                let curr = this.head;
+                let currIndex = 0;
+                let prev = null
+                curr.value.style = ElementStates.Changing
+                curr.value.head = al;
+                while (currIndex < index) {
+                    this.setChange(true)
+                    currIndex++
+                    await new Promise<void>((res) => {
+                        setTimeout(() => {
+                            res()
+                        }, 1000)
+                    });
+                    prev = curr
+                    prev.value.style = ElementStates.Changing;
+                    currIndex === 1 ? prev.value.head = "head" : prev.value.head = '';
+                    curr = curr.next;
+                    curr.value.head = al;
+                    this.setChange(false)
+                    if (currIndex == index) {
+                        prev.value.head === "head" ? prev.value.head = 'head' : prev.value.head = '';
+                        curr.value.head = '';
+                        this.defaultColor();
+
+                    }
+                    else {
+                        curr.value.style = ElementStates.Changing
+                        curr.value.head = al;
+                    }
+                }
+                await new Promise<void>((res) => {
+                    setTimeout(() => {
+                        res()
+                    }, 1000)
+                });
+                node.next = curr;
+                prev.next = node;
+                this.setArr(this.toArray())
+                await new Promise<void>((res) => {
+                    setTimeout(() => {
+                        res()
+                    }, 1000)
+                });
+                prev.next.value.style = ElementStates.Default
+            }
+            this.size++;
+        }
+    }
+    defaultColor() {
+        let currentNode = this.head;
+        while (currentNode) {
+            currentNode.value.style = ElementStates.Default
+            currentNode = currentNode.next;
+        }
+    }
+    deleteByIndex = async (index: number, cicleCallback: (text:string | number) => ReactElement) => {
+        if (index >= this.size) {
+            throw new Error("error size");
+        }
+        if (index === 0) {
+            return this.deleteHead();
+        }
+        let prev = null;
+        let curr = this.head;
+        let currentIndex = 0;
+        curr.value.style = ElementStates.Changing
+        while (currentIndex < index) {
+            this.setChange(true)
+            currentIndex++
+            await new Promise<void>((res) => {
+                setTimeout(() => {
+                    res()
+                }, 1000)
+            });
+            prev = curr;
+           // prev.value.style = ElementStates.Changing;
+            curr = curr.next;
+            //this.setArr(this.toArray());
+            this.setChange(false)
+
+            if (currentIndex == index) {
+                this.setChange(true)
+                let text = curr.value.text
+                curr.value.style = ElementStates.Changing;
+                this.setArr(this.toArray());
+                await new Promise<void>((res) => {
+                    setTimeout(() => {
+                        res()
+                    }, 1000)
+                });
+                curr.value.text = '';
+                curr.value.style = ElementStates.Default;
+                curr.value.tail = cicleCallback(text);
+                this.setChange(false);
+                // prev.value.tail = ''
+                //  curr.value.tail = '';
+
+            }
+            else {
+                curr.value.style = ElementStates.Changing
+
+
+            }
+
+        }
+        await new Promise<void>((res) => {
+            setTimeout(() => {
+                res()
+            }, 1000)
+        });
+        prev.value.tail = 'tail';
+        prev.next = curr.next;
+        this.defaultColor();
+        this.setArr(this.toArray());
+
+        this.size--;
+        return this;
+    }
+    deleteHead() {
+        if (!this.head) return null;
+
+        if (this.head.next) {
+            this.head = this.head.next;
+        } else {
+            this.head = null;
+            this.tail = null;
+        }
+
+        return this;
+    }
+    deleteTail() {
+        const deletedTail = this.tail;
+        if (this.head === this.tail) {
+            this.head = null;
+            this.tail = null;
+            return deletedTail;
+        }
+        let current = this.head;
+        while (current?.next) {
+            if (!current.next.next) {
+                current.next = null;
+            } else {
+                current = current.next;
+            }
+        }
+
+        this.tail = current;
+        return this;
+    }
+
+    prepend(element: T) {
+        const node = new Node(element);
+        if (!this.head || !this.tail) {
+            this.head = node;
+            this.tail = node;
+            return this;
+        }
+        this.tail.next = node;
+        this.tail = node;
+        this.size++
+        return this
+    }
+    append = async (element: any) => {
+        const node = new Node(element, this.head);
+        this.head = node;
+        if (!this.tail) {
+            this.tail = node
+        }
+        this.size++
+        return this
+    }
+    toArray = () => {
+        const nodes = [];
+        let currentNode = this.head;
+        while (currentNode) {
+            nodes.push(currentNode)
+            currentNode = currentNode.next;
+        }
+        return nodes;
+    }
+
+    getSize() {
+        return this.size;
+    }
+}

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

@@ -0,0 +1,28 @@
+.box_input {
+    display:flex;
+    width:952px;
+    gap:12px;
+}
+.box_main {
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+}
+.lists_circle {
+    list-style-type: none;
+    display: flex;
+    gap: 25px;
+}
+.input_field_size {
+    width:204px;
+}
+.button_size {
+    width:175px;
+}
+.list {
+    display:flex;
+    align-items: center;
+    gap: 25px;
+
+
+}