External JS not linking to HTML

Question

I have a very simple directory structure with an index.html file and a main.js file at the same level and no other files/folders. But I'm unable to link this js file in my index.html.

I have posted the contents of both files below, and the expected behaviour is to have a simple alert pop-up.

Here is my HTML File:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/main.css" />
        <script type="text/javascript" scr="main.js"></script>
        <title>External JS Issue</title>
    </head>
    <body>
        Some Content Here.
    </body>
</html>

Here is my JS File:
alert("If you can read this, it worked;");

However, if I include this JS line of code and put it directly inside my index.html , it works fine.
Here are the screenshots:

index.html: