My HTML code not picking up local javascript file-CodePudding

I was following a tutorial which uses a js file to make a static page dynamic and I typed everything verbatim but my page stays static when I open it with my browser. I have the HTML file and js file in the same directory.

JS AND HTML FILE

//some great message options
const vibes = [
    "... and you are awesome!",
    "... have an amazing day!",
    "... love to see you win!",
    "... can't wait to see what you accomplish today!",
    "... You got this!"
];

var vibe = vibes[Math.floor(Math.random() * Math.floor(vibes.length))];

// diplay a good vibe
document.querySelector(".vibe").append(vibe);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A page for you</title>
    <style>
        body{
            text-align:center;
        }
        div.container{
            width: 400px;
            margin: 0 auto;
        }
        .love{
            font-size: 4em;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>This is a page for you</h1>
        </div >You are great!</div>
        <div class="love">
            ❤️
        </div>
    </div>
    <script type="text/javascript" src="vibe.js"></script>
</body>
</html>

How can I get the html file to pick the js script and randomize the messages?

CodePudding user response：

Fix this;

 </div class="vibe">You are great!</div>

it should be

<div class="vibe">You are great!</div>