The Code
// takes in and controlls the other functions
function getValues() {
let userString = document.getElementById('userString').value;
let revString = reverseString(userString);
displayString(revString);
}
// model of data
function reverseString(input) {
// input ='apple' strArray = ['a' 'p' 'p' 'l' 'e']
let revString = '';
for (let index = input.length - 1; index >= 0; index--) {
let letter = input[index];
revString = revString + letter;
}
return revString;
}
// view
function displayString(output) {
document.getElementById('results').textContent = output;
let alertBox = document.getElementById('alert');
alertBox.classList.remove('invisible');
}
Walkthrough
- The controller function takes in user input and directs it to the following functions
- The logic function makes a model of our data. Here we are reversing a string (which is by default an array)
- The array is formed by processing each item in the array through a decrementing for-loop
- The letters are set to each index of the array (starting at index 0)
- Our resulting string is incremented letter by letter and returned to the controller function
- The resulting string is then passed through the view function, where we target our output area by its ID
- Our output is going into an alert section, which is invisible until JS runs and removes the class 'invisible'