Bad DOM Manipulation Code

[SamChou19815]

Example 1

course-plan/src/components/Modals/NewCourse.vue

Lines 50 to 92 in ea5f4d9

	if (val.length >= 3) {
	a = document.createElement('DIV');
	a.setAttribute('id', `${inp.id}autocomplete-list`);
	a.setAttribute('class', 'autocomplete-items');
	/* append the DIV element as a child of the autocomplete container: */
	inp.parentNode.appendChild(a);
	/* code array for results that contain course code and title array for results that contain title */
	const code = [];
	const title = [];
	for (const attr in courses) {
	if (attr.toUpperCase().includes(val)) {
	code.push(courses[attr].t);
	} else if (courses[attr].t && courses[attr].t.toUpperCase().includes(val)) {
	title.push(courses[attr].t);
	}
	}
	code.sort();
	title.sort();
	/* prioritize code matches over title matches */
	const match = code.concat(title);
	match.forEach(newTitle => {
	/* check if the item starts with the same letters as the text field value: */
	/* create a DIV element for each matching element: */
	b = document.createElement('DIV');
	/* make the matching letters bold: */
	b.innerHTML = newTitle;
	/* insert a input field that will hold the current array item's value: */
	b.innerHTML += `<input type='hidden' value="${newTitle}"'>`;
	/* execute a function when someone clicks on the item value (DIV element): */
	b.addEventListener('click', () => {
	/* insert the value for the autocomplete text field: */
	inpCopy.value = b.getElementsByTagName('input')[0].value;
	/* close the list of autocompleted values,
	(or any other open lists of autocompleted values: */
	closeAllLists();
	});
	a.appendChild(b);
	});
	}
	});

Example 2

course-plan/src/components/Course.vue

Lines 72 to 100 in ea5f4d9

	requirementString() {
	if (
	this.requirementsMap === null
	|| this.requirementsMap.keys() === null
	|| this.requirementsMap.keys().length === 0
	) {
	return '';
	}
	const keys = Array.from(this.requirementsMap.keys());
	let str = 'Satisfies ';
	const endStr = '</b> requirement';
	const { length } = keys;
	if (length === 1) {
	return `${str}<b>${keys[0]}${endStr}`;
	}
	// loop through all but the last requirement and comma separate
	for (let i = 0; i < length - 1; i += 1) {
	str += `<b>${keys[i]}</b>, `;
	}
	// remove the comma if only 2 requirements
	if (length === 2) {
	str = `${str.substring(0, str.length - 2)} `;
	}
	return `${str}and <b>${keys[length - 1]}${endStr}`;
	},

Example 3

course-plan/src/components/Course.vue

Lines 103 to 134 in ea5f4d9

	cautionString() {
	if (
	this.requirementsMap === null
	|| this.requirementsMap.keys() === null
	|| this.requirementsMap.keys().length === 0
	) {
	return null;
	}
	let str = '';
	this.requirementsMap.forEach((courses, req) => {
	str += '<li>';
	if (courses.length === 1) {
	str += `${courses[0]} also fulfills <b>${req}</b> requirement`;
	} else {
	// loop through all but the last course and comma separate
	for (let i = 0; i < courses.length - 1; i += 1) {
	str += `${courses[i]}, `;
	}
	// remove the comma if only 2 requirements
	if (courses.length === 2) {
	str = `${str.substring(0, str.length - 2)} `;
	}
	str = `${str}and ${courses[courses.length - 1]} also fulfill <b>${req}</b> requirement`;
	}
	str += '</li>';
	});
	return str;
	},

Consider creating a new component for these HTML and listener instead.