# Frontend test
### 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.
To save you time for running the project on your localhost, we prepared a boilerplate with a Score Dial skeleton and added the CSS and the JavaScript inside the same HTML file. Feel free to adapt it as you wish, and add any other additional notes. The code should work in the latest modern browsers.
### Requirements
Implement a Score Dial that displays the Score Band (Excellent, Good, Fair, Poor, Very Poor) based on the credit score value. Given a score of 930, the "Good" 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!
### 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;
// To do
</script>
</body>
</html>
```
Sign in with Wallet
Connect another wallet