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>
<!-- IGUALDAD DE GENERO -->
<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>Inversiones para la igualdad de género</p>
</div>
<div id="barra4">
<!-- 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: <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="140.854"
aria-valuenow="4.086"
style="background-color: rgb(122, 189, 148);"
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( selector...