Статические файлы JS не работают для проекта Django
Я изучаю этот онлайн-руководство по обратным отсчетам https://www.youtube.com/watch?v=ZpujnQqcvAA для внедрения на моем сайте. Я чувствую, что мне не хватает чего-то простого.
base.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- favicon -->
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- custom js-->
{% block scripts %}
{% endblock scripts %}
<title>countdown to events</title>
</head>
<body>
<div class="container mt-3">
{% block content %}
{% endblock content %}
</div>
</body>
</html>
main.html
{% extends 'base.html' %}
{% block content %}
{% for obj in object_list %}
<div>
<a href={{obj.get_absolute_url}}>{{obj.name}}</a>
</div>
{% endfor %}
{% endblock %}
countdown.html
{% extends 'base.html' %}
{% load static %}
{% block scripts %}
<script scr={% static 'main.js' %} defer></script>
{% endblock scripts %}
{% block content %}
<div class ="row">
<div class = "col-5">
<div>{{object.names}} will take place:</div>
</div>
<div class = "col-7">
<div id="event-box">{{object.when|date:"M d, Y H:m:s"}}</div>
</div>
</div>
<div>Time left:</div>
<div id ="count-down-box" class="text-center mt-3 h1">
<div class ="spinner-border" role = "status"></div>
</div>
{% endblock content %}
main.js
console.log('hello world')
const eventBox = document.getElementById('event-box')
const countdownBox = document.getElementById('count-down-box')
console.log(eventBox.textContent)
const eventDate = Date.parse(eventBox.textContent)
console.log(eventDate)
setInterval(()=>{
const now = new Date().getTime()
//console.log(now)
const diff = eventDate - now
//console.log(diff)
const d = Math.floor(eventDate / (1000 * 60 * 60 * 24) - (now / (1000 * 60 * 60 * 24)))
const h = Math.floor((eventDate / (1000 * 60 * 60) - (now / (1000 * 60 * 60))) % 24)
const m = Math.floor((eventDate / (1000 * 60) - (now / (1000 * 60))) % 60)
const s = Math.floor((eventDate / (1000) - (now / (1000))) % 60)
console.log(s)
if (diff> 0){
countdownBox.innerHTML = d + " days, " + h + " hours, " + m + " minutes, " + s + " seconds"
}
else{
countdownBox.innerHTML = "countdown complete!"
}
}, 1000)
settings.py
STATIC_URL = 'static/'
STATICFILES_DIRS = [ BASE_DIR / 'static']
http://127.0.0.1:8000/static/main.js
Я пробовал смотреть другие вопросы, очищать кэш, изменять статические пути/директории, но он не загружается. Все другие ответы на этот вопрос предлагают изменить статические директории или добавить STATIC_ROOT, но он все равно не загружается на моей стороне.