notes-calculator.html

<style>
	*{
		border: 0;
		padding: 0;
		margin: 0;
	}
	.singolo{
		display: flex;
		height: 100%;
	}
	.singolo p{
		font-family: Helvetica, Arial, sans-serif;
		flex: 1;
		align-self: center;
		text-align: center;
		font-size: 96px;
	}
	
	.singolo:nth-of-type(2n+1) {
		background: red;
	}
	.singolo:nth-of-type(2n+1) p{
		color: white;
	}
	
</style>
<div id="container">
	
</div>
<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
<script>
	notes = 
	[
		'A',
		'A#',
		'B',
		'C',
		'C#',
		'D',
		'D#',
		'E',
		'F',
		'F#',
		'G',
		'G#'
	]
	
	for(i=0; i < notes.length; i++){
		var stringa = "<div class='singolo'><p>";
		stringa += "0: <b>" + notes[i] + "</br></b>\n";
		stringa += "3: <b>" + notes[(i + 4) %12] + "</br></b>\n";
		stringa += "5: <b>" + notes[(i + 7)  %12] + "</br></b>\n";
		stringa += "7: <b>" + notes[(i + 11)  %12] + "</br></b>\n";
		stringa += "</div></p>";
		$("#container").append(stringa);
	}
</script>