html-css-js/html/coin-flip-tracking/a.html at master · denisde4ev/html-css-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html><html lang="en"><head><!-- note: this was just a simple, 1 day test. might delete later.--><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Coin Flip</title><style>body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	height: 100vh;
	margin: 0;
}
#average {
	margin-top: 20px;
	font-size: 1.2em;
}
#buttons {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 20px;
}
.flip-button {
	width: max(35vw, 8em); /* Start with viewport width */
	height: max(35vw, 8em);
	margin: 10px;
	font-size: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
}
#downloadButton {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 5px 10px;
	font-size: 0.8em;
}

@media (min-width: 100vh) {
	.flip-button{
		width: max(35vh, 8em); /* if height is smaller, use viewport height */
		height: max(35vh, 8em);
	}
}
</style></head><body><div id="average">Average: Heads - ?%, Tails - ?% ...</div><div id="buttons"><button class="flip-button" id="heads">H<br>YES</button><button class="flip-button" id="tails">T<br>NO </button></div><button id="downloadButton">Download</button><script>const results = [];
const averageDisplay = document.getElementById('average');
const headsButton = document.getElementById('heads');
const tailsButton = document.getElementById('tails');
const downloadButton = document.getElementById('downloadButton');

function calculateAverage() {
	if (results.length === 0) {
		averageDisplay.textContent = 'Average: Heads - ?%, Tails - ?%';
		return;
	}

	const headsCount = results.filter(result => result === 'H').length;
	const tailsCount = results.filter(result => result === 'T').length;
	const total = results.length;

	const headsPercentage = (headsCount / total) * 100;
	const tailsPercentage = (tailsCount / total) * 100;

	averageDisplay.textContent = `Average: Heads - ${headsPercentage.toFixed(2)}%, Tails - ${tailsPercentage.toFixed(2)}%`;
}

headsButton.addEventListener('click', () => {
	results.push('H');
	calculateAverage();
});

tailsButton.addEventListener('click', () => {
	results.push('T');
	calculateAverage();
});

downloadButton.addEventListener('click', () => {
	const resultsString = results.join('\n');
	const element = document.createElement('a');
	element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(resultsString));
	element.setAttribute('download', 'coin_flips.txt');
	element.style.display = 'none';
	document.body.appendChild(element);
	element.click();
	document.body.removeChild(element);
});</script></body></html>