# Frontend test - React
### Task
We would like you to focus on the functionality and not necessarily the completion of the test. We are more interested in your confidence, problem solving skills and thinking process.
### Requirements
Implement a `ScoreDial` component in React, that displays the Score Band (Excellent, Good, Fair, Poor, Very Poor) based on the credit score value. Given a score of 930, the "Good" band should be displayed and the segments should be coloured accordingly as in the below screenshot.
From this:
To:
The Score Dial bands are made up of 2 sets of 5 circle elements: 5 coloured score bands and 5 grey score bands. The bands are created by having strokes drawn around the circles using the [stroke dasharray](https://css-tricks.com/almanac/properties/s/stroke-dasharray/) property - made up of two values: fill value (dash) and the space (gap). One dash per band is drawn, so the gap value should be 100% minus the dash value.
[Experian credit scores](https://www.experian.co.uk/consumer/experian-credit-score.html) range from 0-999. A credit score of 961-999 is considered excellent, a score of 881-960 is considered good, a score of 721-880 is considered fair, a score of 561-720 is considered poor, a score of 0-560 is considered very poor.
### Submitting the code
Please send us the link to your https://codesandbox.io/, https://codepen.io or your own GitHub public repository after you submit your code.
Good luck!
### Example of a non React code snippet:
```
<html>
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: "Open Sans", sans-serif;
}
.container {
width: 400px;
height: 400px;
margin: 0 auto;
position: relative;
}
#score-dial {
width: 100%;
height: 100%;
position: relative;
transform: rotateX(180deg);
}
.score-band-wrapper {
position: absolute;
top: 40%;
width: 100%;
text-align: center;
}
.score-band-wrapper .score-band-label {
font-weight: bold;
font-size: 30px;
line-height: 20px;
}
.score-band-wrapper small {
display: block;
font-weight: 300;
font-size: 16px;
line-height: 12px;
}
.score-dial-wrapper {
margin: 0 auto;
top: -40%;
width: 60%;
position: relative;
text-align: center;
}
.score-dial-wrapper input {
width: 100%;
}
.legend {
margin-top: 60px;
}
.legend li {
border-left: 20px solid #fff;
padding: 10px;
list-style-type: none;
font-size: 14px;
}
.legend li.excellent {
border-color: #1f9c4c;
}
.legend li.good {
border-color: #91c738;
}
.legend li.fair {
border-color: #fadd00;
}
.legend li.poor {
border-color: #f79a38;
}
.legend li.vpoor {
border-color: #bd2727;
}
</style>
</head>
<body>
<div class="container">
<svg height="500px" width="500px">
<circle class="grey" fill="none" stroke="#F1F1F1" stroke-width="30" cx="200" cy="200" r="140"
stroke-dasharray="150, 747" stroke-dashoffset="597" />
<circle id="red" fill="none" stroke="#bd2727" stroke-width="30" cx="200" cy="200" r="140"
stroke-dasharray="150, 747" stroke-dashoffset="597" />
<circle class="grey" fill="none" stroke="#F1F1F1" stroke-width="30" cx="200" cy="200" r="140"
stroke-dasharray="150, 747" stroke-dashoffset="447" />
<circle id="orange" fill="none" stroke="#f79a38" stroke-width="30" cx="200" cy="200" r="140"
stroke-dasharray="150, 747" stroke-dashoffset="447" />
<circle class="grey" fill="none" stroke="#F1F1F1" stroke-width="30" cx="200" cy="200" r="140"
stroke-dasharray="150, 747" stroke-dashoffset="297" />
<circle id="yellow" fill="none" stroke="#fadd00" stroke-width="30" cx="200" cy="200" r="140"
stroke-dasharray="150, 747" stroke-dashoffset="297" />
<circle class="grey" fill="none" stroke="#F1F1F1" stroke-width="30" cx="200" cy="200" r="140"
stroke-dasharray="150, 747" stroke-dashoffset="147" />
<circle id="green" fill="none" stroke="#91c738" stroke-width="30" cx="200" cy="200" r="140"
stroke-dasharray="150, 747" stroke-dashoffset="147" />
<circle class="grey" fill="none" stroke="#F1F1F1" stroke-width="30" cx="200" cy="200" r="140"
stroke-dasharray="150, 747" stroke-dashoffset="0" />
<circle id="light-green" fill="none" stroke="#1f9c4c" stroke-width="30" cx="200" cy="200" r="140"
stroke-dasharray="150, 747" stroke-dashoffset="0" />
</svg>
<div class="score-band-wrapper">
<small>Your score band is</small>
<p class="score-band-label">Excellent</p>
</div>
<div class="score-dial-wrapper">
<input type="range" min="0" max="999" value="0" step="1">
Your score is
<p class="score-dial-value">0</p>
</div>
</div>
<ul class="legend">
<li class="excellent">Excellent: 961 - 999</li>
<li class="good">Good: 881 - 960</li>
<li class="fair">Fair: 721 - 880</li>
<li class="poor">Poor: 561 - 720</li>
<li class="vpoor">Very Poor: 0 - 560</li>
</ul>
<script>
const radius = 140;
const circumference = 2 * Math.PI * radius; // 879
const customCircumference = circumference * 0.85; // 747
const arcLength = customCircumference / 5; // 150
const offset = arcLength * 5;
const scoreBand = [
{ index: 0, band: "Very poor", min: 0, max: 560 },
{ index: 1, band: "Poor", min: 561, max: 720 },
{ index: 2, band: "Fair", min: 721, max: 880 },
{ index: 3, band: "Good", min: 881,max: 960 },
{ index: 4, band: "Excellent", min: 961, max: 999 }
];
// To do
</script>
</body>
</html>
```
Sign in with Wallet
Connect another wallet