lobby.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VideoCall</title>
    <link rel="icon" type="image/x-icon" href="icon/946370-removebg-preview-removebg-preview.png" >

    <link rel="stylesheet" href="lobby.css">
    
</head>
<body onload="myFunction()">
    <main id="lobby-container">
        <div id="form-container">
            <div id="form__container__header">
                <p>Create OR join a Room</p>
            </div>
            <div id ="form__content__wrapper">
                <form id="join-form">
                <input type="text" name="invite_link" required/>
                <input type="submit" value="Join Room">

                <div id="loader">
                <div class="spinner">
                    <div class="circle">
                    </div>
                </div>
            </div>
    </form>
            </div>
        </div>
    </main>
   
</body>

<script>
    let form = document.getElementById('join-form')
    form.addEventListener('submit', (e)=>{
        e.preventDefault()
        let inviteCode = e.target.invite_link.value
        window.location = `index.html?room=${inviteCode}`
    })
    let preloader = document.getElementById("loader");
    function myFunction(){
        preloader.style.display = 'none'
    }
</script>
</html>