changing style and adding gifs

Author: NicolasPCouts

Screenshots/ScreenRecorderProject1.gif

@@ -13,6 +13,10 @@ html{
     text-align: center;
 }
 
+#itemsDiv{
+    height: 42vw;
+}
+
 .array-item{
     display: inline-block;
     border-radius: 15px 15px 0px 0px;
@@ -35,7 +39,7 @@ button{
     font-size: inherit;
     cursor: pointer;
     padding: 15px 10px;
-    transition: all 0.3s;
+    transition: all 0.2s;
     display: inline-block;
     text-transform: uppercase;
     letter-spacing: 1px;
@@ -69,4 +73,12 @@ div button, div input, div label{
 .numberInput{
     all: unset;
     background-color: #ff5733;
+    font-weight: 200;
+    font-size: x-large;
+    color: white;
+}
+
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+  -webkit-appearance: none; 
 }

Screenshots/Sorting_1.gif

@@ -136,7 +136,7 @@ export default class SortingVisualizer extends React.Component{
         let widthValue = 40 / this.state.numberOfItems;
         return (
             <div className="main-div" id="centerdiv">
-                <div className="centerdivKeepWidth">
+                <div className="centerdivKeepWidth" id="itemsDiv">
                     {arrayToSort.map((heightValue, idx) => (
                         <div className="array-item" key={idx} style={{height: `${heightValue / 25}vw`, width: `${widthValue}vw`, backgroundColor: this.getColor(idx)}}>