Sorting Visualizer in ReactJs

You can watch the speed code at youtube
and link to Git
I always wanted to build a sorting visualizer in ReactJs after watching algoexpert.io co-founder youtube video.
But I don't know that I would wait this much time to build it.

I used a very newbie approach while building it. It took me 1hour of Day012 and Day013 during my #100DaysOfCode

the final App.js is:

import React ,{useState} from 'react';
import './App.css'

export default function App() {

    const [arr,setArr]=useState([]);
    const [arrswap,setArrswap]=useState([]);
    const [completed,setCompleted]=useState([]);




    function genArr(){
       // console.log(100);
        var maximum=99;
        var minimum=10;
        var l=[];
        for(let i=0;i<99;i++){
        var randomnumber = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
        l.push(randomnumber);

         }
        setArr([...l]);
        setArrswap([])
        setCompleted([])

    }
    function Sort()
    {let l=arr.length;
        if(l===0)
        genArr();
        else{


            let temp=[...arr]; 
            for(let i=0;i<l-1;i++)
            {
                for(let j=0;j<l-i-1;j++)
                {setTimeout(()=>{
                    const b=[]
                    b.push(j)
                    b.push(j+1)
                    if(temp[j]>temp[j+1])
                    {
                        let t=temp[j+1];
                        temp[j+1]=temp[j];
                        temp[j]=t;
                    }
                    setArrswap([...b])

                    setArr([...temp])
                },30)


                }
                setTimeout(()=>{
                     let com=[]
                     for(let k=l;k>=l-i-1;k--)
                     {
                         com.push(k);
                     }
                     setCompleted([...com])
                },30)
            }
            setTimeout(()=>{
                setCompleted([])
                setArrswap([])
           },30)

        }
    }
    return (
        <div>
            <center >
            <h1 className="header">Sorting Visualizer</h1>
            <button className="header" onClick={()=>genArr()}>GenerateArray()</button>
            <button className="header" onClick={()=>Sort()}>Sort()</button>
            </center>
            <hr/>

            <div className="arrayContainer">
                <center>
                {arr.map((ele,id)=>(
                    <div className="arrayElement"
                    key={id}
                    style={{height:`${(80/100)*ele}vh`,
                        width:`${(32/100)}vw`,
                        margin:`0 0.2vw`,
                    backgroundColor:arrswap.includes(id)?"green":
                    completed.includes(id)?"red":"white"
                    }}></div>
                ))}
                </center>
            </div>
        </div>
    )
}

and I am very terrible at css but managed it with below
App.css

.arrayContainer{
    height:80vh;
    width:80vw;
    background-color: black;
    border: chartreuse solid;
    margin-left:10vw;
}
.arrayElement{
    display: inline-block;

    background-color: white;
    vertical-align:bottom;
}
.header{
    display: inline-block;
    margin-left:40px ;
}
button{
    font-size: larger;
    background-color: black;
    border:none;
    color:white;
    cursor: pointer;
    padding:10px;
    border-radius: 40px;
}

Blog

Sorting Visualizer in ReactJs

vasanthkumar

Join Our Newsletter. No Spam, Only the good stuff.

Related