random color for stats

Ariaky · Nov 28, 2023 · b4a7605 · b4a7605
1 parent 7686e2c
commit b4a7605
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/src/components/Statistics/GetRandomColor.js b/src/components/Statistics/GetRandomColor.js
@@ -0,0 +1,3 @@
+export function getRandomColor() {
+    return `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, 0)}`;
+  }
diff --git a/src/components/Statistics/Statistics.jsx b/src/components/Statistics/Statistics.jsx
@@ -1,4 +1,5 @@
 import css from './Statistics.module.css';
+import {getRandomColor} from './GetRandomColor';
 
 export const Statistics =({ title, stats }) => {
     return (
@@ -7,7 +8,7 @@ export const Statistics =({ title, stats }) => {
 
         <ul className={css.statList}>{stats.map(item => {
             return (
-                <li key={item.id} className={css.item} >
+                <li key={item.id} className={css.item} style={{backgroundColor: getRandomColor(), flex: 1, }}>
                     <span className={css.label}>{item.label}</span>
                     <span className={css.percentage}>{item.percentage}%</span>
                 </li>

diff --git a/src/components/Statistics/Statistics.module.css b/src/components/Statistics/Statistics.module.css
@@ -13,14 +13,12 @@
     justify-content: space-between;
     padding: 0;
     margin-top: 30px;
-    background-color: white;
 }
 
 .item {
     border: 1px solid rgb(213, 211, 211);
     width: calc(100% / 5);
     padding-bottom: 20px;
-    color: rgb(98, 97, 97);
 }
 
 .label {