Asignar una clase con submit

const $home = document.getElementById("home");

$form.addEventListener("submit", event => {
   event.preventDefault() //para quitar que el formulario recarge siempre la pagina
   $home.classList.add('search-active')
});

Si tenemos que asignar clases o stylos a mas de un elemento lo mejor es realizar una función y llamarla con el Submit.

function showModal() {
   $overlay.classList.add('active'); // añade la clase active
   $modal.style.animation = 'modalIn .8s forwards'; // añade el estilo modalIn de 8 segundos se queda en la posición final.
};

Cerrar el modal

const $cerrarModal = document.getElementById("cerrar-modal");

$cerrarModal.addEventListener('click', cerrarModal); //al hacer click ejecuta la función cerralModal
  function cerrarModal(){
    $overlay.classList.remove('active'); // quita la clase activa
    $modal.style.animation = 'modalOut .8s forwards'; // Sale 8 segundos
  }

Añadir mas de un objeto

La función setAtributos tiene el for que recorre todo el objeto atributos y los incluirá con el nombre y el parámetro que se han declarado. y asigna un atributo por cada objeto.

Con el metodo setAttribute se añaden los objetos al elemento.

function setAtributos($elemento, atributos) {
    for (const atributo in atributos) {
      $elemento.setAttribute(atributo, atributos[atributo]);      
}}

const $featuringContenedor = document.getElementById("featuring");

  $form.addEventListener("submit", event => {
    event.preventDefault() //para quitar que el formulario recarge siempre la pagina
    $home.classList.add('search-active')
    const $loader = document.createElement('img'); //crea el elemento img
    setAtributos($loader, {
      src: 'src/images/loader.gif',
      height: 50,
      width: 50,
    })
    $featuringContenedor.append($loader)
  });