The Code

						
const getValues = () => {
	const userText = document.getElementById('userText').value;
	if (!validateInput(userText)) {
		displayError();
	} else {
		const reversedMessage = reverseMessage(userText);
		displayMessage(reversedMessage);
	}
}

const validateInput = input => {
	return input.length
}

const displayError = () => {
	Swal.fire({
		icon:"error",
		backdrop:false,
		title: "Oops!",
		text: "Please enter a message to reverse."
	})
}

const reverseMessage = (input) => {
	let reversedString = '';

	for (let i = input.length - 1; i >= 0; i--) {
		const letter = input[i]
		reversedString += letter;
	}

	return reversedString;
}

const displayMessage = (input) => {
	const alertBox = document.getElementById('alert');
	const msg = document.getElementById('msg');
	alertBox.classList.remove('invisible');
	msg.innerText = `Your message reversed is: ${input}`;
}
						
					

Abstract

For this exercise I had to keep the following goals in mind:

• The purpose of the exercise was to use loops intentionally, not to use the readymade methods leading to a one line solution of input.split("").reverse().join("");
• Get the input from the user.
• If the input is invalid, display an error message.
• If the input is valid, process it to reverse it.
• Finally, display the reversed string.

Entry function

The entry function for this app is getValues (line 1). In this function, I get the input value from the DOM when the user clicks the button "Flip!". Once I had this value in Javascript, I checked to see if this was a valid input by passing it as an argument in the function validateInput (line 3). This function just returned the input's length which could then be used to check the truthy/falsey values in conditionals. If the input was not valid, I'd fire off an error display function.

IF the input was valid, I'd arrive at the reversed string by calling reverseMessage function (line 24). I'd then call the displayMessage function with the reversed string.

How I reversed the string

The reverseMessage function (line 24) takes uses the parameter input. I initialised an empty string variable reversedString. It's important for this identifier to not be a const because the function relies on this being re-assigned later on.

Then, I ran a decrimental loop starting at input.length - 1 (last character of the string) and ending at 0 (first character of the string). After each iteration,I reduced i by 1.

Given that I was looping through the string backwards now, all I had to do was to add the individual character (starting from the end of the string) to the empty string reversedString. It was important for reversedString to be outside the for loop because let is block scoped. Meaning, if it was declared inside the loop, there'd be no persistence of that variable between different iterations of the loop and it'd be re-initialised each time. For it to be accessible by all the iterations of the loop, it had to reside outside of the loop block.

Once the loop was done with all the iterations, I returned the reversedString. This return would allow the rest of the code to assign the reversed string to a variable outside this function.

How I displayed the string

Finally, in the displayMessage function (line 35), I accessed the DOM elements with ID's alert and msg respectively. I removed the invisible class from the alert box, which is the parent element of the msg. I then called the innerText method on the msg element to change its content to a dynamically constructed string. This string showed the parameter input of this function. So when I call this function on line 7 with reversedMessage I end up displaying the reversed string.

And that completes the functionality of this app.