preenchendo formulario html automaticamente com ajax | JavaScript

Estou tentando reproduzir o conteúdo desse artigo (https://www.alura.com.br/artigos/preenchendo-formulario-html-automaticamente-com-ajax), mas quando tento adicionar o evento de buscar cep no botão dá o seguinte erro: Cannot read property 'addEventListener' of null.

function buscaCep(){

    let inputCep = document.querySelector('input[name=cep]');
    let cep = inputCep.value.replace('-', '');

    let url = 'http://viacep.com.br/ws/' + cep + '/json';

    let xhr = new XMLHttpRequest();


    xhr.open('GET', url, true);


    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                preencheCampos(JSON.parse(xhr.responseText));
            }
        }
        xhr.send();
    }
}

function preencheCampos(json) { 

    document.querySelector('input[name=endereco]').value = json.logradouro;
    document.querySelector('input[name=bairro]').value = json.bairro; 
    document.querySelector('input[name=complemento]').value = json.complemento;
    document.querySelector('input[name=cidade]').value = json.localidade; 
    document.querySelector('input[name=estado]').value = json.uf; 
}

const botaoBuscaCep = document.querySelector('#o-button--gary');
botaoBuscaCep.addEventListener('click', buscaCep);

O HTML eu copiei o disponibilizado pelo próprio autor do artigo, e chamo o

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax com JS Puro</title>
    <link href="asserts/stylesheets/stilize/stilize.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    <form class="o-form">
        <div class="o-navbar--gary">Buscando CEP com requisição JAX</div>
        <div class="o-form__body o-form__body--padding">
            <div class="l-row">
                <div class="u-grid--2">
                    <label for="" class="o-form__text">CEP</label>
                    <div class="o-form__group">
                        <input class="o-form__data" name="cep" type="text">
                        <span class="o-form__groupElement"><button class="o-button--gary"><i class="icon-globe"></i></button></span>
                    </div>
                </div>
                <div class="u-grid--8">
                    <label for="" class="o-form__text">Endereço</label>
                    <input class="o-form__data" name="endereco" type="text">
                </div>
                <div class="u-grid--2">
                    <label for="" class="o-form__text">Numero</label>
                    <input class="o-form__data" name="numero" type="text">
                </div>
            </div>
            <div class="l-row">
                <div class="u-grid--8">
                    <label for="" class="o-form__text">Bairro</label>
                    <input class="o-form__data" name="bairro" type="text">
                </div>
                <div class="u-grid--4">
                    <label for="" class="o-form__text">Complemento</label>
                    <input class="o-form__data" name="complemento" type="text">
                </div>
            </div>
            <div class="l-row">
                <div class="u-grid--10">
                    <label for="" class="o-form__text">Cidade</label>
                    <input class="o-form__data" name="cidade" type="text">
                </div>
                <div class="u-grid--2">
                    <label for="" class="o-form__text">Estado</label>
                    <input class="o-form__data" name="estado" type="text">
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

PRORROGAMOS O DESCONTO!