์์์ ์ด์๊ณ ์์
์ฐธ๊ณ ๋ก๋ง ์ดํด๋ณด์ธ์. ๐
HTML ์ฝ๋
<!DOCTYPE html>
<html lang="ko">
<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>Yalco Stopwatch</title>
<link rel="stylesheet" href="./style.css">
<script defer src="./script.js"></script>
</head>
<body>
<div class="stopwatch">
<h1>yalco stopwatch</h1>
<div class="stopwatch__interface">
<span id="screen">00:00:00</span>
<button id="button">โถ</button>
</div>
</div>
</body>
</html>
CSS ์ฝ๋
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
body, h1, button {
all: unset;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #ddd;
}
.stopwatch {
display: inline-block;
padding: 48px 32px 72px 32px;
background-color: white;
border: 4px solid #aaa;
border-radius: 24px;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
}
.stopwatch h1 {
display: block;
margin-bottom: 16px;
font-family: 'Noto Sans KR', sans-serif;
text-transform:uppercase;
color: gray;
}
.stopwatch__interface {
display: flex;
align-items: center;
gap: 10px;
}
.stopwatch__interface > * {
height: 72px;
line-height: 72px;
border-radius: 4px;
}
.stopwatch__interface span {
display: inline-block;
width: 248px;
font-family: 'Press Start 2P', cursive;
font-size: 1.6em;
font-weight: bold;
text-align: center;
color: white;
background-color: #555;
}
.stopwatch__interface button {
width: 80px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 1.6em;
text-align: center;
color: white;
background-color: steelblue;
cursor: pointer;
transition: background-color 0.35s ease-in-out;
}
JavaScript ์ฝ๋
const screen = document.getElementById('screen')
const toggleButton = document.getElementById('button')
let timeInterval
let stopWatchOn = false
let seconds = 0
toggleButton.addEventListener('click', () => {
stopWatchOn = !stopWatchOn
toggleButton.innerHTML = stopWatchOn ? 'โ ' : 'โถ'
toggleButton.style.backgroundColor
= stopWatchOn ? 'tomato' : 'steelblue'
if (!stopWatchOn) {
clearInterval(timeInterval)
seconds = 0
screen.innerHTML = '00:00:00'
} else {
timeInterval = setInterval(() => {
seconds++
const mm = String(Math.floor(seconds / 6000) % 60).padStart(2, '0')
const ss = String(Math.floor(seconds / 100) % 60).padStart(2, '0')
const cs = String(seconds % 100).padStart(2, '0')
screen.innerHTML = `${mm}:${ss}:${cs}`
}, 10);
}
})