I have a little system where if I click on a button it changes the color of the clicked on button and if I click on the other button it changes its color as well as setting the previously clicked button back to its original color.

All I want is to have one of the buttons set as active (clicked) when the page is opened/refreshed. Preferably the Login set as the default clicked.

Thank you is advance :)

HTML:

<div class="login-or-register-container">
    <button class="button-categories">LOGIN</button>
    <button class="button-categories">REGISTER</button>
</div>

CSS:

.login-or-register-container {
    display: flex;
}

button.button-categories:hover {
    border-bottom-width: 1px;
    border-bottom-color: #1100ff;
}

button.button-categories {
    font-size: 12px;
    display: block;
    width: 100px;
    height: 40px;
    color: #fff;
    background-color: #555;
    border: solid;
    border-radius: 0px;
    border-width: 1px;
    border-color: #999;
    text-align: center;
    font-weight: 1000;
}
  
button.button-categories.active { 
    border-bottom-width: 2px;
    border-bottom-color: #1100ff;
    padding-top: 1px;
    color: #1100ff;
}

Javascript:

// Get all the buttons into a node list
let buttons = document.querySelectorAll(".button-categories");

// Set an event handler on the document so that when
// any element is clicked, the event will bubble up to it
document.addEventListener("click", function(evt){
  // Check to see if it was a button that was clicked
  if(evt.target.classList.contains("button-categories")){

    // Loop over all the buttons & remove the active class
    buttons.forEach(function(button){
      button.classList.remove("active");
    });
    // Make the clicked button have the active class
    evt.target.classList.add("active");
    
  } 
});