adlerdias/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
    <style>
        .red {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="countdown"></div>
    <br >
    <br >
    <div class="chart-container" style="position: relative; height:40vh; width:80vh">
        <canvas id="myChart">
        </canvas>
    </div>
    <br >
    <div id="number"></div>

    <script type="text/javascript">
        function addData(chart, label, data) {
            chart.data.labels.push(label);
            chart.data.datasets.forEach((dataset) => {
                dataset.data.push(data);
            });
            chart.update();
        }

        var loadTimer = new Promise(function(resolve, reject) {
            var timeleft = 2.3;
            var downloadTimer = setInterval(function(){
                if(timeleft <= 0) {
                    clearInterval(downloadTimer);
                    document.getElementById("countdown").innerHTML = "Finished";
                    resolve("Stuff worked!");
                } else {
                    document.getElementById("countdown").innerHTML = "Começando em " + parseFloat(timeleft).toFixed(2) + " segundos";
                }
                timeleft = parseFloat(timeleft - 0.10).toFixed(2);
            }, 100);
        });

        function goToNumber(chart, target) {
            var value = 0.00;
            var time = 0.00;
            var progress = setInterval(function(){
                if(parseFloat(value) >= parseFloat(target)) {
                    clearInterval(progress);
                    document.getElementById("number").classList.toggle('red');
                } else {
                    addData(chart, parseFloat(time*2).toFixed(2), parseFloat(value).toFixed(2));
                    document.getElementById("number").innerHTML = parseFloat(value).toFixed(2) + "x";
                }
                value = parseFloat(value + 0.01);
                time = parseFloat(time + 0.10);
            }, 100);
        }

        (function() {
            var ctx = document.getElementById("myChart").getContext("2d");
            var optionsNoAnimation = {animation : true}
            var myNewChart = new Chart(ctx, {
                type: 'line',
                update: 'none',
                normalized: true,
                data: {
                    labels: [0,1,2,3,4,5,6],
                    datasets: [{
                        data: [],
                        fill: false,
                        borderColor: 'rgb(75, 192, 192)',
                        tension: 0.1
                    }]
                },
            });
            loadTimer.then(function(result) {
                var target = Math.floor(Math.random() * (1000 - 100) + 100) / 100;
                goToNumber(myNewChart, target);
            }, function(err) {
                console.log(err);
            });
        })();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
	<style>
	.red {
	color: red;
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<div id="countdown"></div>
	<br >
	<br >
	<div class="chart-container" style="position: relative; height:40vh; width:80vh">
	<canvas id="myChart">
	</canvas>
	</div>
	<br >
	<div id="number"></div>

	<script type="text/javascript">
	function addData(chart, label, data) {
	chart.data.labels.push(label);
	chart.data.datasets.forEach((dataset) => {
	dataset.data.push(data);
	});
	chart.update();
	}

	var loadTimer = new Promise(function(resolve, reject) {
	var timeleft = 2.3;
	var downloadTimer = setInterval(function(){
	if(timeleft <= 0) {
	clearInterval(downloadTimer);
	document.getElementById("countdown").innerHTML = "Finished";
	resolve("Stuff worked!");
	} else {
	document.getElementById("countdown").innerHTML = "Começando em " + parseFloat(timeleft).toFixed(2) + " segundos";
	}
	timeleft = parseFloat(timeleft - 0.10).toFixed(2);
	}, 100);
	});

	function goToNumber(chart, target) {
	var value = 0.00;
	var time = 0.00;
	var progress = setInterval(function(){
	if(parseFloat(value) >= parseFloat(target)) {
	clearInterval(progress);
	document.getElementById("number").classList.toggle('red');
	} else {
	addData(chart, parseFloat(time*2).toFixed(2), parseFloat(value).toFixed(2));
	document.getElementById("number").innerHTML = parseFloat(value).toFixed(2) + "x";
	}
	value = parseFloat(value + 0.01);
	time = parseFloat(time + 0.10);
	}, 100);
	}

	(function() {
	var ctx = document.getElementById("myChart").getContext("2d");
	var optionsNoAnimation = {animation : true}
	var myNewChart = new Chart(ctx, {
	type: 'line',
	update: 'none',
	normalized: true,
	data: {
	labels: [0,1,2,3,4,5,6],
	datasets: [{
	data: [],
	fill: false,
	borderColor: 'rgb(75, 192, 192)',
	tension: 0.1
	}]
	},
	});
	loadTimer.then(function(result) {
	var target = Math.floor(Math.random() * (1000 - 100) + 100) / 100;
	goToNumber(myNewChart, target);
	}, function(err) {
	console.log(err);
	});
	})();
	</script>
	</body>
	</html>