Currently, I am utilizing Python as the backend for my React frontend. The backend is passing in values such as 17 or 87, and I aim to use these values as a percentage on the scale that I am constructing. Currently, the scale starts in the center:
https://i.stack.imgur.com/gldpn.png
At this stage, it remains stationary because the backend has not provided a numerical value. However, if the backend were to assign a score of 23, the triangle would shift precisely to 23% of the div (outlined by the black border):
https://i.stack.imgur.com/YRndW.png
Below is the code snippet in the HTML segment of my React frontend:
<div
className={
!this.state.listening
? 'results-container'
: 'results-container-closed'
}
>
<div className="result-wrapper">
{this.state.score === ''
? 'Click record and check your score'
: 'Your Score: ' + this.state.score}
</div>
</div>
<div className="scale-container">
<div className="bar">
<div className="arrow-up"></div>
<div className="scale-meter"></div>
<span></span>
</div>
</div>
this.state.score is where the score is saved once received from the backend.
Presented below is my CSS styling:
.arrow-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
text-align: center;
line-height: 35px;
position: absolute;
top: 54px;
z-index: 1;
border-bottom: 25px solid purple;
animation: scale 4s ease;
}
@keyframes scale {
from {
left: 48%;
}
}
.bar:nth-child(1) .arrow-up{
left: 23%;
}
The section .bar:nth-child(1) .arrow-up specifies where I intend to alter the left based on the score. Is there a method through which I can dynamically set the left value, rather than hardcoding it, maybe something akin to left: score%;?