Skip to content

feat(forms): limit secondary languages selection to maximum of 3 #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
developerfred wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(forms): limit secondary languages selection to maximum of 3 #10

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 28 additions & 4 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { vars, numbers, strings, arrays, objects } from "./js/listEls.js";
const languageForm = document.getElementById('languageForm');
const select = document.getElementById('primaryLang');
const h1 = document.querySelector('h1');
const MAX_SECONDARY_LANGUAGES = 3;

/**
* * FUNCTIONS
Expand All @@ -30,12 +31,14 @@ function initHomePage() {

const langs = getLocalStorage('checkedLangs');

// check the secondary languages the user checked
// check secondary languages the user checked
langs.forEach(val => {
const checkbox = document.querySelector(`input[type="checkbox"][value="${val}"]`);
if (checkbox) checkbox.checked = true;
});

limitSecondaryLanguages();

createLiSection(vars, 'vars', 'Variables + Miscellaneous');
createLiSection(numbers, 'numbers', 'Numbers');
createLiSection(strings, 'strings', 'Strings');
Expand Down Expand Up @@ -87,13 +90,28 @@ function languageListItems(obj, string, text, el1, el2, el3) {
obj[string].forEach(item => {
const li = document.createElement('li');
const code = document.createElement('code');
code.className = `custom-${string.toLowerCase()}`;
code.className = `language-${string.toLowerCase()}`;
code.textContent = item;
li.append(code);
list.append(li);
})
}

// Limit secondary languages to max of 3
function limitSecondaryLanguages() {
const checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
const selectedPrimary = select.options[select.selectedIndex].value;

allCheckboxes.forEach(checkbox => {
if (checkbox.checked || checkbox.id === selectedPrimary) {
checkbox.disabled = (checkbox.id === selectedPrimary);
} else {
checkbox.disabled = (checkedBoxes.length >= MAX_SECONDARY_LANGUAGES);
}
});
}


/**
* * EVENT LISTENERS
Expand All @@ -102,21 +120,27 @@ function languageListItems(obj, string, text, el1, el2, el3) {
// 1. Load localStorage objects if they exist
document.addEventListener('DOMContentLoaded', initHomePage);

// Select list
// Select list
select.addEventListener('change', e => {
const checkedLanguages = getLocalStorage('checkedLangs') || []
if (checkedLanguages.length > 0) {
setLocalStorage('checkedLangs', [])
}
const selectedvalue = select.options[select.selectedIndex].value;
console.log(selectedvalue) // this is correct

const boxes = document.querySelectorAll('input[type="checkbox"]');

const disabled = [...boxes].filter(box => box.id === selectedvalue).map(box => box.disabled = true);
const primarySelection = [...boxes].filter(box => box.id === selectedvalue)

// I need to somehow maintain the disabled attribute and only remove it when the user picks a different primary language or clears LS

limitSecondaryLanguages();
})

// 3. Checkboxes - limit to max of 3
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
checkbox.addEventListener('change', limitSecondaryLanguages);
})

// 2. form listener
Expand Down