JavaScriptにてエラーが出る

前提

ここに質問の内容を詳しく書いてください。
この動画(https://youtu.be/fD8gm-DhjXk)のソースコード

自分のソースコード

海外のYouTube動画を見ながらJavaScriptでチェックボックス付きのパスワード生成システムを作っています。
チェックボックス機能を実装中に以下のエラーメッセージが発生しました。JavaScriptに詳しい方すみませんが、宜しくお願いします。リンクは以下に貼り付けています。18:55のところです。
https://youtu.be/fD8gm-DhjXk

実現したいこと

ここに実現したいことを箇条書きで書いてください。

チェックボックス機能を動作するようにする

発生している問題・エラーメッセージ

エラーメッセージ
```Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') line22

### 該当のソースコード

```script.js
ソースコード
```const lengthSlider = document.querySelector(".pass-length input"),
options = document.querySelectorAll(".option input"),
generateBtn = document.querySelector("generate-btn");

const generatePassword = () => {
    let staticPassword = "";
    
    options.forEach(option => { //looping through each option's checkbox
        if(option.checked) {
            console.log(option);
        }
    });
}

const updateSlider = () => {
    //passing slider value as counter text
    document.querySelector(".pass-length span").innerText = lengthSlider.value;
}
updateSlider();

lengthSlider.addEventListener("input", updateSlider);
generateBtn.addEventListener("click", generatePassword);

```style.css

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #4285F4;
}
.container{
    width: 450px;
    background: #fff;
    border-radius: 8px;
}
.container h2{
    font-weight: 600;
    font-size: 1.31rem;
    padding: 1rem 1.175rem;
    border-bottom: 1px solid #d4dbe5;
}
.wrapper{
    margin: 1.25rem 1.75rem;
}
.wrapper .input-box{
    position: relative;
}
.input-box input{
    width: 100%;
    height: 53px;
    color: #000;
    background: none;
    font-size: 1.06rem;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid #aaa;
    padding: 0 2.85rem 0 1rem;
}
.input-box span{
    position: absolute;
    right: 13px;
    cursor: pointer;
    line-height: 53px;
    color: #707070;
}
.wrapper .pass-indicator{
    width: 100%;
    height: 4px;
    position: relative;
    background: #dfdfdf;
    margin-top: 0.75rem;
    border-radius: 25px;
}
.pass-indicator::before{
    position: absolute;
    content: "";
    height: 100%;
    width: 50%;
    border-radius: inherit;
    background: #f1c80b;
}
.wrapper .pass-length{
    margin: 1.56rem 0 1.25rem;
}
.pass-length .details{
    display: flex;
    justify-content: space-between;
}
.pass-length input{
    width: 100%;
    height: 5px;
}
.pass-settings .options{
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.pass-settings .options .option{
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    width: calc(100% / 2);
}
.options .option:first-child{
    pointer-events: none;
}
.options .option:first-child input{
    opacity: 0.7;
}
.options .option input{
    height: 16px;
    width: 16px;
    cursor: pointer;
}
.options .option label{
    cursor: pointer;
    padding: 0.63rem;
}
.wrapper .generate-btn{
    width: 100%;
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    background: #4285F4;
    font-size: 1.06rem;
    padding: 0.94rem 0;
    border-radius: 5px;
    text-transform: uppercase;
    margin: 0.94rem 0 1.3rem;
}

```index.html

<!DOCTYPE html>
<!-- Coding By Tak -->
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>Password Generator JavaScript | Tak</title>
    <link rel="stylesheet" href="style.css">
    <meta namae="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Google Icon Link for Icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="container">
        <h2>Password Generator</h2>
        <div class="wrapper">
            <div class="input-box">
                <input type="text" value="e7_5y^BmArJ1o*WQ0Dx-y@~5s" disabled>
                <span class="material-symbols-rounded">copy_all</span>
            </div><!-- .input-box -->
            <div class="pass-indicator"></div><!-- .pass-indicator -->
            <div class="pass-length">
                <div class="details">
                    <label class="title">Password Length</label>
                    <span></span>
                </div><!-- .details -->
                <input type="range" min="1" max="30" value="15" step="1">
            </div><!-- .pass-length -->
            <div class="pass-settings">
                <label class="title">Password Settings</label>
                <ul class="options">
                    <li class="option">
                        <input type="checkbox" id="lowercase" checked>
                        <label for="lowercase">Lowercase (a-z)</label>
                    </li>
                    <li class="option">
                        <input type="checkbox" id="uppercase">
                        <label for="uppercase">Uppercase (A-Z)</label>
                    </li>
                    <li class="option">
                        <input type="checkbox" id="numbers">
                        <label for="numbers">Numbers (0-9)</label>
                    </li>
                    <li class="option">
                        <input type="checkbox" id="symbols">
                        <label for="symbols">Symbols (!-$^+)</label>
                    </li>
                    <li class="option">
                        <input type="checkbox" id="exc-duplicate">
                        <label for="exc-duplicate">Exclude Duplicate</label>
                    </li>
                    <li class="option">
                        <input type="checkbox" id="spaces">
                        <label for="spaces">Include Spaces</label>
                    </li>
                </ul>
            </div><!-- .pass-settings -->
            <button class="generate-btn">Generate Password</button>
        </div><!-- .wrapper -->
    </div><!-- .container -->
    
</body>
</html>

### 試したこと

ここに問題に対して試したことを記載してください。
ソースコードを見直して最初から書き直すとまた今度は別のエラーが発生しました。
### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。