On gists

Simple rating (odometer)

JavaScript CSS CSS trick

example.html Raw #

	<section>
	<button id="minus">-</button>
	<div>
		<span style="--state: -10">- 9-8 -7 -6 -5 -4 -3 -2 -1 0 +1 +2 +3 +4 +5 +6 +7 +8 +9</span>
	</div>
	<button id="plus">+</button>
		</section>

example.css Raw #

body {
	font-size: 30px;
}

section {
	display: inline-flex;
	gap: 5px;
}

div {
	width: 1em;
	height: 1em;
	border: 1px solid red;
	line-height: 1em;
	text-align: center;
display: inline-block;
	overflow: hidden;
}

span {
	--finalState: calc(var(--state) * 1em);
	background: gold;
	transform: translateY(var(--finalState));
	display: block;
	transition: transform 500ms;
	

}

app.js Raw #

const span = document.querySelector('span');

const like = (e) => {
	const style = getComputedStyle(span);
	const state = style.getPropertyValue('--state');
	let stateNumber = parseInt(state) - 1 
	
	span.style.setProperty('--state', stateNumber)
}

const dislike = (e) => {
	const style = getComputedStyle(span);
	const state = style.getPropertyValue('--state');
	let stateNumber = parseInt(state) + 1 

	span.style.setProperty('--state', stateNumber)
}

document.getElementById('plus').addEventListener('click', like)
document.getElementById('minus').addEventListener('click', dislike)