Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Playwrite+BE+VLG:wght@100..400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body
	background-color #111
	display grid
	place-items center
	height 100vh
	width 100vw
	font-family 'Poppins'

.stopwatch
	width 200px
	height 200px
	background-color #efefef
	border-radius 50%
	display grid
	place-items center
	border 12px solid #ccc
	box-shadow inset 1px 1px 1px rgba(0,0,0,.35), inset -1px -1px 1px rgba(0,0,0,.35)
	position relative
	.dot
		width 10px
		height 10px
		border-radius 50%
		background-color #aaa
		z-index 99
		box-shadow  inset 1px 1px 1px rgba(255,255,255,.25), inset -1px -1px 1px rgba(0,0,0,.25), 1px 1px 2px rgba(0,0,0,.25)
		position absolute
	.minutes
		position absolute
		width 25px
		height 20px
		right 50px
		border-radius 3px
		box-shadow inset 0 0 2px rgba(0,0,0,.5)
		display grid
		place-items center
		font-size 12px
		&:after
			content 'mins'
			font-size 8px
			position absolute
			margin-bottom -32px
	.secondhand
		height 60px
		width 3px
		border-radius 50% 50% 0 0
		transform translateY(-30px) rotate(0deg)
		transform-origin bottom center
		background-color red
		position absolute
		transition transform .75s ease-in-out
		box-shadow 1px 1px 2px rgba(0,0,0,0.75)
	.notch
		width 1px
		height 8px
		background-color #000
		position absolute
		rotate 180deg
	for i in (1..60)
		.n{i}
			transform rotate(360/60deg*i) translateY(89px)
			transform-origin center center
			&:after
				transform rotate(180deg)
		if i % 5 == 0
			.n{i}
				height 12px
				width 1px
				transform rotate(360/60deg*i) translateY(87px)
				background-color red
				&:after
					content ''+i
					top -15px
					right -5px
					position absolute
					color #000
					font-size 10px
			if i % 15 == 0
				.n{i}
					height 16px
					width 2px
					transform rotate(360/60deg*i) translateY(86px)
					font-weight 600
					&:after
						margin-top 2px
						color red
				
.controls
	display grid
	gap 10px
	grid-template-columns repeat(3,1fr)
	position absolute
	margin-top 350px
	button
		width 80px
		height 40px
		border-radius 5px
		color #fff
		border none
		box-shadow inset 1px 1px 1px rgba(255,255,255,.125), inset -1px -1px 1px rgba(0,0,0,.125)
		cursor pointer
		background-color #232323
		outline none
		transition background-color .25s
		&:hover
			background-color #343434

console.log("Event Fired")
let hand = document.querySelector('.secondhand');
let minBox = document.querySelector('.minutes');
let deg = 0;
let clockInt;
let minutes = 0
function updateHandPosition() {
    hand.style.transform = `translateY(-30px) rotate(${deg}deg)`;
}

function stopClock() {
    if (clockInt) {
        clearInterval(clockInt);
        clockInt = null;
    }
}

function resetClock() {
    stopClock();
    deg = 0;
    updateHandPosition();
}

document.querySelector('.start').addEventListener('click', startClock);
document.querySelector('.reset').addEventListener('click', resetClock);
document.querySelector('.stop').addEventListener('click', stopClock);

Frontend Forever App