http-cat2.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTTP CAT</title>
        <script type="text/javascript">
            const codes = ['100','101','102','200','201','202','203','204','206','207','300','301','302','303','304','305','307','308','400','401','402','403','404','405','406','407','408','409','410','411','412','413','414','415','416','417','418','420','421','422','423','424','425','426','429','431','444','450','451','497','498','499','500','501','502','503','504','506','507','508','509','510','511','521','523','525','599'];
            var codeIndex=0, baseImageUrl='https://http.cat/';
            window.addEventListener('load', function(){
                const url = new URL(window.location.href);
                const code = url.searchParams.get('code');
                codeIndex = codes.indexOf(code);
                if(codeIndex == -1) codeIndex = 0;
                document.getElementById('cat_image').src=baseImageUrl + codes[codeIndex] + '.jpg';
            });
            document.addEventListener('keydown', e => {
                if (e.code == 'KeyA' || e.code == 'ArrowLeft') {
                    if(codeIndex > 0) codeIndex--;
                } else if (e.code == 'KeyD' || e.code == 'ArrowRight') {
                    if(codeIndex < codes.length -1) codeIndex++;
                }
                window.location.href = window.location.pathname + '?code=' + codes[codeIndex];
            });
        </script>
    </head>
    <body>
        <p>Left Arrow ('<-') to go back, Right Arrow ('->') to proceed</p>
        <image id="cat_image" src="" alt="Cat image"></image>
    </body>
</html>