The Code for RETRACT
// Get the values from the page
// Get the string
// Controller Function
function getValues() {
document.getElementById("alert").classList.add("invisible");
let userString = document.getElementById("userString").value;
let revString = reverseString(userString);
displayString(revString);
}
// Reverse the string
// Logic Function
function reverseString(userString) {
let revString = [];
// reverse a string using a for loop
for (let index = userString.length - 1; index >= 0; index--) {
revString += userString[index];
}
return revString;
}
// Display the reversed string to the user
// View Function
function displayString(revstring) {
// write the message to the page
document.getElementById("msg").innerHTML = `Your string reversed is: ${revstring}`;
// show the alert box
document.getElementById("alert").classList.remove("invisible");
}
The Code for this application is structured into three sections; CONTROLLER, LOGIC, and VIEW
CONTROLLER: getValues();
In this block of the code the program is retrieving the strting that the user enters into the input box. Also, it is adding a class to the alert to set it to invisible. This will be removed when it is time to display the reversed string
LOGIC: reverseString();
In this function, the string will be reversed. I will be using a for loop() to take the string the user enters and cycle through each character. The characters will then be added to an array reversed and ready to be displayed.
VIEW: displayString()
With this block of code the "invisible" class is being removed from the alert and the Array is being passed in to be displayed to the user as the result.