JSFiddle - React, Tailwind, and code Playground
by greenpeace
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- EVOLUCIÓN DE LAS INVERSIONES -->
<style>
.titulo {
margin-bottom: 1em;
}
.titulo p{
font-family: "Work Sans", sans-serif;
font-weight: 700;
text-align: center;
margin: 0;
}
.antetitulo{
font-size:13px;
padding-top: 1%;
}
.footergr p{
font-family: "Work Sans", sans-serif;
font-weight: 400;
font-size:13px;
text-align: left;
margin-top: 30px;
}
</style>
<div class="titulo">
<p class="antetitulo">Plan España Puede (2021-2023)</p>
<p>Evolución de las inversiones</p>
</div>
<div id="barra1">
<!-- EDITAR EL TEXTO EN LA LINEA ABAJO PERO NO TOCAR LAS TAGS HTML-->
<div>Inversiones concedidas a fecha actual: <strong><span class="current"></span></strong> millones de €. Inversiones previstas totales: <strong><span class="maxim"></span></strong> millones de €.</div> <div class="progress mb-4" style="height: 30px;">
<!-- PONER LOS VALORES ABAJO: MIN, MAX, NOW
Y EL COLOR DE FONDO EN RGB (valores rgb entre 0 y 255) -->
<div
aria-valuemin="0"
aria-valuemax="69.500"
aria-valuenow="29.387"
style="background-color: rgb(91, 74, 89)"
class="progress-bar the_bar"
role="progressbar"
></div>
</div>
</div>
<script>
// No hace falta cambiar el código abajo
document.addEventListener("DOMContentLoaded", function() {
const populateProgressBar = function(selector) {
const valueMin = jQuery( selector + " .the_bar").attr("aria-valuemin");
let valueMax = jQuery( selector + " .the_bar").attr("aria-valuemax");
let valueNow = jQuery(...