REWIND: A Coding Challenge By Thato Ramphore

The Code for REWIND

//Get the string from the user input
//CONTROLLER
function getValue(){
    //make alert invisible afrom the beginning
    document.getElementById("alert").classList.add("invisible");

    let userString = document.getElementById("userString").value;

    //pass userString to reverseString
    let reverse = reverseString(userString);

    //display reversed string
    displayString(reverse);
}

//Reverse the string
//LOGIC
function reverseString(userString){
    let newString = [];
    for(let i=userString.length-1; i>=0; i--){
        newString += userString[i];
    }
    return newString;
}

//Display reversed string to the user
//VIEW
function displayString(reverse){
    //write message to the screen
    document.getElementById("msg").innerHTML = `Your string reversed is: ${reverse}`;

    //show the alert box
    document.getElementById("alert").classList.remove("invisible");
    document.getElementById("alert").classList.add("visible");
}

The Code is structured in three functions.

getValue

getValue is a function that accesses the string entered by the user. This is achieved with DOM manipulation technique such as getElementById to directly retrieve the user input. The extracted string is passed is then passed to two other functions responsible for reversing the string and displaying the reversed string respectively.

reverseString

reverseString is a function that handles the logic aspect of the application (so they would say in the informatiom systems world, okay, back to our code).

This is where all the operations of reversing the string happen. Using a for loop to decrement from the last character of the string to the first character, all character are then added to another string (newString) to form a new reversed string. The reversed string is then returned.

displayString

dislayString function does exactly that, display the string but now reversed. This is achieved by innerHTML to send reversed string to an element with id of "msg".

Last two lines of code toggle the visibility of message box on the page.