accent-dialect-map/app.js

'use strict';

let currentPage = 2;
const tabs = document.getElementsByClassName('page');
const validField = (formId, fieldId, customFieldId) => {
  const form = document.getElementById(formId);
  const element = form.querySelector(`#${fieldId}`);
  if (element.value === '') {
    form.classList.add('was-validated');
    return false;
  } else {
    if (customFieldId && element.value === 'other') {
      const customField = form.querySelector(`#${customFieldId}`);
      if (customField.value === '') {
        customField.classList.add('is-invalid');
        return false
      } else {
        return true
      }
    }
    return true;
  }
}

const conditions = {
  agreement: [
    () => {
      const agreementCheckbox = document.getElementById('agreement');
      if (agreementCheckbox.checked) {
        return true;
      } else {
        const form = document.getElementById('terms-and-conditions-form');
        form.classList.add('was-validated');
        return false;
      }
    }
  ],
  personalInformation: [
    () => validField('personal-information-form', 'age-range'),
    () => validField('personal-information-form', 'gender', 'gender-custom'),
    () => validField('personal-information-form', 'ethnicity', 'ethnicity-custom'),
    () => validField('personal-information-form', 'town-birth'),
    () => validField('personal-information-form', 'postal-code'),
  ]
}


const showCustomInput = (customElementId, element) => {
  if (element.value === 'other') {
    const customInput = document.getElementById(customElementId);
    customInput.style.display = 'block'
  } 
}

const showPage = (page) => {
  tabs[page].style.display = 'block';  
}

const isValid = condition => condition();

const changePage = (page, condition) => {
  if (condition && !conditions[condition].map(isValid).every(result => result)) {
    return;
  }
  tabs[currentPage].style.display = 'none';
  showPage(page);
  currentPage = page;
}

showPage(2);