word game json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Word Game</title>
    <style>
        * {
            box-sizing: border-box;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        body {
            margin: 0;
            padding: 0;

        }
        #wordspace {
            width: 100%;
            height: 100%;
            font-size: 1.5rem;
            font-weight: bold;
            background-color: black;
            color: white;
            padding: 0 50px;
        }
        #footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background-color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            align-items: stretch;
        }
        #footer > div {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: stretch;
        }
        #footer .btns {
            justify-content: start;
        }
        #footer .typeinput input {
            width: 100%;
            font-size: 1.2rem;
        }
        #footer .score {
            justify-content: end;
            line-height: 50px;
            padding-right: 20px;
            color: yellow;
            font-size: 1.2rem;
        }
        #level {
            color: red;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div id="wordspace"></div>
    <div id="footer">
        <div class="btns">
            <button id="start">Start</button>
            <button id="stop">Stop</button>
            <button id="clear">Clear</button>
        </div>
        <div class="typeinput">
            <input type="text" id="typeinput" autofocus>
        </div>
        <div class="score">
            <span>Level: </span>
            <span id="level">1</span>
            <span>Score: </span>
            <span id="score">0</span>
        </div>
    </div>
    <script>
        let level = 0;
        let score = 0;
        let wordinterval = [4000, 3500, 3000, 2500, 2000];
        let movewordpixels = [10, 20, 30, 40, 50];
        let timer4words = null;
        let timer4drop = null;
        let words = [];
        let totalwords = 0;

        const getWordsFromJson = async () => {
            const response = await fetch('https://assets.codepen.io/147406/words.json');
            const words = await response.json();
            return words;
        }

        getWordsFromJson().then((data) => {
            for( let i=0; i<data.words.length; i++) {
                words.push(data.words[i]);
            }
        });

        document.getElementById('start').addEventListener('click', () => {
            showWords();
            timer4words = setInterval(() => {
                showWords();
            }, wordinterval[level]);
            timer4drop = setInterval(() => {
                moveWords();
            }, 1000);
            document.getElementById('typeinput').focus();
        });
        document.getElementById('stop').addEventListener('click', () => {
            clearInterval(timer4words);
            clearInterval(timer4drop);
        });

        document.getElementById('clear').addEventListener('click', () => {
            let words = document.getElementsByClassName('word');
            for (let i = 0; i < words.length; i++) {
                let word = words[i];
                word.remove();
            }
            document.getElementById('stop').click();
            level = 0;
            score = 0;
            document.getElementById('level').innerText = level + 1;
            document.getElementById('score').innerText = score;
        });

        document.getElementById('typeinput').addEventListener('keyup', (e) => {
            if (e.keyCode === 13) {
                let words = document.getElementsByClassName('word');
                for (let i = 0; i < words.length; i++) {
                    let word = words[i];
                    if (word.innerText === e.target.value) {
                        word.remove();
                        score++;
                        document.getElementById('score').innerText = score;
                        document.getElementById('level').innerText = level + 1;
                        if( score % 10 === 0) {
                            level++;
                            if( level > 3) {
                                level = 3;
                            }
                            document.getElementById('stop').click();
                            document.getElementById('start').click();
                        }
                    }
                    if( word.style.top >= window.innerHeight-50) {
                        word.remove();
                    }
                }
                e.target.value = '';
                console.log(e.target.value);
            }
        });

        const showWords = async () => {
            if( words.length === 0) {
                document.getElementById('stop').click();
                return;
            }
            words.sort(() => Math.random() - 0.5);
            const word = words.pop();
            let span = document.createElement('span');
            span.classList.add('word');
            span.style.position = 'absolute';
            span.style.left = Math.floor(((window.innerWidth-200) - 200) * Math.random() + 200)  + "px";
            span.style.top = 0;
            span.style.color = "white";
            span.innerText = word;
            document.getElementById('wordspace').appendChild(span);
        }
        const moveWords = () => {
            let words = document.getElementsByClassName('word');
            for (let i = 0; i < words.length; i++) {
                let word = words[i];
                let top = parseInt(word.style.top);
                word.style.top = `${top + movewordpixels[level]}px`;
            }
        }


    </script>
</body>
</html>