Помощь JavaScript для отзывчивого webapp

Я знаю, что могу получить за это отпор, но я в основном ищу кого-то, кто мог бы накормить меня с ложечки некоторыми инструкциями по javascript для веб-приложения, над которым я работаю. У меня нет никаких предварительных знаний JS.

Я использую шаблон Jinja2 для рендеринга webapp. Индексная страница отображает список div-ов, которые содержат информацию о конкретных событиях. Пользователи могут присоединиться к этим событиям. Это делается путем отправки post запроса на Django Server с именем пользователя и ID события.

Может ли кто-нибудь помочь мне с JS-кодом, создающим всплывающее окно, когда пользователь нажимает кнопку "присоединиться" на определенном событии.

<div class="container" id="container">
            {% for event in data %}
            <div class="event">
                <div class="sport">
                    <h2>{{ event.description }}</h2>
                </div>
                <div class="venue">
                    <p> <span class="title">Creator:</span> {{ event.creator }}</p>
                </div>
                <div class="time">
                    <p> <span class="title">Date and Time:</span> {{ event.time }}</p>
                </div>
                <div class="venue">
                    <p> <span class="title">Venue:</span> {{ event.venue }}</p>
                </div>
                <div class="participants">
                    <p> <span class="title">Participants:</span> {{ event.participants }}</p>
                </div>
                <div class="join-now">
                    <a><h3 id="{{ event.id }}" class="join-now-button">Join</h3></a>
                </div>
                <div class="see-participants">
                    <a>
                        <h3>See Participants</h3>
                    </a>
                </div>
            </div>
            <div class="join-form">
                <form action="">
                    <label for="">{{ event.id }}</label>
                    <p><span class="title">Your Name:</span></p><input type="Name">
                    <br><br>
                    <div class="join-now">
                        <a href="">
                            <button>
                                <h3>Join</h3>
                            </button>
                        </a>
                    </div>
                </form>
            </div>
        {% endfor %}
        </div>
    </main>
</body>
<script language="javascript" type="text/javascript">
    var join_now_button = document.getElementsByClassName('join-now-button');
    console.log(join_now_button);
    var join_form = document.getElementById('join-form');
    var container = document.getElementById("container");
    
    window.onclick = function(event) {
        console.log(event.target);
        if (event.target in join_now_button == true) {
            join_form.style.display = "inline-block";
        }
        if (event.target == container) {
            join_form.style.display = "none";
        }
    }
</script>

Это то, что я написал на данный момент, и это не работает хорошо. Пожалуйста, помогите мне, ребята, у меня действительно нет времени на изучение JS :(

) Вернуться на верх