An example of trying to avoid using global variables by using a function which returns the value. This is for cases where the value is needed but not the reference. See lines 22 - 24, 49 - 51 and 80. I have posted this to get feedback on this as a coding practice. Is it weird? Unnecessary? Clever? Useful? Feel free to leave comments

factorial-calculator.js

// Portoflio Assignment Task 1

/*Create a special calculator that read a number from the user, checks that it is an integer and performs a series of mathematical calculations as listed:
calculates the number's factorial. A factorial is the product of an integer and all the integers below it; e.g., the factorial of 4 is equal to 24 (4 * 3 * 2 * 1).
Calculate the square and cube of the number. A number squared is a number that is multiplied by itself; e.g., 22 is equal to 4 (2 * 2). A number cubed is a number that is multiplied by itself twice e.g., 23 is equal to 8 (2 * 2 * 2).
*/

//prevent sloppy code
'use strict';
//factorial function, stored outside main function for modularity @link https://codeburst.io/learn-and-understand-recursion-in-javascript-b588218e87ea
function getFactorial (n) {
	
	//terminal condition in case a negative value is passed
	if (n < 0) return;
	//base condition: return when function is complete will also return correct factorial for 0
	if (n === 0) return 1;
	//returns "num" multiplied by the value returned by getFactorial(num -1), initalising recursive loop which will resolve itself when it reaches the base condition
	return n * getFactorial(n - 1);
} 

//the form is stored as a function declaration in the "global" scope. This allows multiple functions to access it and avoids storing global variables
function theForm () { 
	return document.querySelector('form[name="theForm"]');
}

// Function called when the form is submitted.
// Function performs the calculations and returns false.
function calculate(){
	
	// Get references to the form value:
	//convert value to number for validation 
	const numInput = theForm().querySelector('#number');
	//second condition added as chrome browser won't convert "0" to a number from text input
	if (Number(numInput.value) || numInput.value === '0') {
		var num = Number(numInput.value);
	} else {
		console.log(typeof numInput.value);
		alert("Not a Number!!!");
		return false;
	} 

	// if value entered is not an integer between 0 and 50 stop function and alert user (entered for sake of completion but is never executed as html5 validation takes precedence. input type=number only allows integers and informs user if non integers are entered)
	if (!Number.isInteger(num) || num < 0 || num > 50) {
		alert('Please enter a whole number between 0 and 50');
		return false;
	}	

	//get references for other form inputs for displaying results
	const factorial = theForm().querySelector('#factorial');
	const squared = theForm().querySelector('#squared');
	const cubed = theForm().querySelector('#cubed');

	console.table(factorial, squared, cubed);			
	// Calculate the factorial results and display them in their respective inputs :
	//HINT: the factorial of 0 is 1.
	factorial.value = getFactorial(num);
	// Calculate the squared results:
	squared.value = num * num;
	// Calculate the cubed results:
	cubed.value = num * num * num;
	
	// Return false to prevent submission:
	return false; 
	
}// End of calculate() function.

//prevent users typing into text inputs
function preventTypingIntoInputs () {
		const inputs = theForm().querySelectorAll('input[type="text"]');
		inputs.forEach((inpt) => {
				inpt.addEventListener('keypress', (e) => e.preventDefault());
		});
}
	
// Function called when the window has been loaded.
// Function needs to add an event listener to the form.
function init() {
		preventTypingIntoInputs();
    // Add an event listener to the form:
    theForm().onsubmit = calculate;
}  // End of init() function.

// Assign an event listener to the window's load event:
window.onload = init;