DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Sorting Visualizer in ReactJs
vasanthkumar
vasanthkumar

Posted on

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›