キッチンタイマー(カウントダウンタイマー)の実装
Q&A
Closed
解決したいこと
キッチンタイマー(カウントダウンタイマー)を作成したいと思っています。
javascriptで、打った数字をconsoleに出力することはできるのですが、HTMLの数字を液晶部分(便宜上こう表現しますがトップのところ)に表示させるにはどうしたらいいのでしょうか?
例えば、「1111」と4回押せば「11:11」と表示されて、「11111」と5回押せば同じく「11:11」と表示されるが、5回目の1は無効になる、という感じです。
あと、これはまだ上記のことが解決してからだとは思っているのですが、「START」ボタンを押せば、カウントダウンが始まり、「STOP/RESET」を押せばその時点で時は止まり、再度「STOP/RESET」を押せば「00:00」になるというコードを作りたいです。ぜひご教授いただければと思います。よろしくお願いします。
<!DOCTYPE html>
<html>
<head>
<title>タイマー</title>
<meta name="description" content="タイマーアプリ">
<meta charset="utf-8">
<body>
<h1><span id="the timer">00:00</span></h1>
<form>
<input type="button" id="number1" value="1">
<input type="button" id="number2" value="2">
<input type="button" id="number3" value="3"><br>
<input type="button" id="number4" value="4">
<input type="button" id="number5" value="5">
<input type="button" id="number6" value="6"><br>
<input type="button" id="number7" value="7">
<input type="button" id="number8" value="8">
<input type="button" id="number9" value="9"><br>
<input type="button" id="stopresetBtn" value="STOP/RESET">
<input type="button" id="number0" value="0">
<input type="button" id="startBtn" value="START">
</form>
</body>
</head>
</html>
### 以下javascript
```
const btnOne = document.getElementById('number1');
btnOne.addEventListener('click', () => {
console.log('1');
});
const btnTwo = document.getElementById('number2');
btnTwo.addEventListener('click', () => {
console.log('2');
});
const btnThree = document.getElementById('number3');
btnThree.addEventListener('click', () => {
console.log('3');
});
const btnFour = document.getElementById('number4');
btnFour.addEventListener('click', () => {
console.log('4');
});
const btnFive = document.getElementById('number5');
btnFive.addEventListener('click', () => {
console.log('5');
});
const btnSix = document.getElementById('number6');
btnSix.addEventListener('click', () => {
console.log('6');
});
const btnSeven = document.getElementById('number7');
btnSeven.addEventListener('click', () => {
console.log('7');
});
const btnEight = document.getElementById('number8');
btnEight.addEventListener('click', () => {
console.log('8');
});
const btnNine = document.getElementById('number9');
btnNine.addEventListener('click', () => {
console.log('9');
});
const btnZero = document.getElementById('number0');
btnZero.addEventListener('click', () => {
console.log('0');
});
例)
```ruby
def greet
puts Hello World
end
自分で試したこと
ここに問題・エラーに対して試したことを記載してください。