<div id="container">
  <h1>JS Event - preventDefault()</h1>
  <a id="link" href="https://www.google.com">Go to the link</a>
  <br><br>
  <form id="form-submission">
    <label for="input-text">username: </label>
    <input type="text" id="input-text" placeholder="Don't type anything here">
    <br><br>
    <input id="agreement-checkbox" type="checkbox">

    <label for="agreement-checkbox">I agree</label>

    <br><br>

    <input id="submit-btn" type="submit" value="Submit">

    <br><br>
  </form>

</div>

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

form {
  width: 450px;
  padding: 1rem;
  border: solid 3px burlywood;
}

#submit-btn {
  background: #000;
  border: none;
  border-radius: 20px;
  color: #fff;
  font-weight: bold;
  padding: 0.625rem 1rem;
}

const container = document.querySelector("#container");

const link = document.querySelector("#link");

const form = document.querySelector("#form-submission");

const input = document.querySelector("#input-text");

const checkbox = document.querySelector("#agreement-checkbox");

const btn = document.querySelector("#submit-btn");