写真に数字を貼り付けるアプリ

写真を選択してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真に数字を貼り付けるアプリ</title>
<style>
    #photo {
        width: 500px;
    }
    .number {
        display: none;
        position: absolute;
        font-size: 10pt;
    }
</style>
</head>
<body>
<h1>写真に数字を貼り付けるアプリ</h1>
<p>写真を選択してください。</p>
<input type="file" accept="image/*" id="photoInput">
<div id="photoContainer">
    <img src="#" alt="選択された写真" id="photo">
</div>
<script>
    const photoInput = document.getElementById('photoInput');
    const photo = document.getElementById('photo');
    const photoContainer = document.getElementById('photoContainer');
    
    photoInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        const reader = new FileReader();
        
        reader.onload = function(event) {
            photo.src = event.target.result;
        };
        
        reader.readAsDataURL(file);
    });
    
    let counter = 1;
    
    photoContainer.addEventListener('click', function(e) {
        const x = e.offsetX;
        const y = e.offsetY;
        const number = document.createElement('div');
        number.textContent = counter++;
        number.classList.add('number');
        number.style.left = x + 'px';
        number.style.top = y + 'px';
        photoContainer.appendChild(number);
    });
</script>
</body>
</html>